Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Styling Elements

tal Shnitzer
PLUS
tal Shnitzer
Courses Plus Student 5,242 Points

what is inline property?

it is mentioned a couple of times in this Video but there is no explanation of what it is and how should I know if a property is an inline property. if someone from this corse stuff is listening - Pls improve this course

4 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi again, tal Shnitzer! You're correct. He's referring to an inline style. But your question asked about the inline property and not an inline style which are two separate things. I was also a bit thrown off because you asked another question on the forums about the block property.

An inline style is a style that is written in the same line where the HTML element is presented. Because of this an inline style takes precedence over any external style sheets. Let's say for example that you have in an external style sheet a rule that makes all <h1> elements red, but in the actual HTML, you have several <h1> elements. In your HTML, you could override that by including the style (in the same line) with the h1.

So if your HTML looked like this:

<!-- some HTML omitted for brevity -->
<style>
   h1 {
       color: red;
   }
</style>


<h1> Hi there, tal! </h1>

This would appear in red (and any other h1 elements on the page.

But if you had this:

<!-- some HTML omitted for brevity -->
<style>
   h1 {
       color: red;
   }
</style>


<h1 style="color: blue;"> Hi there, tal! </h1>

Then that h1 would appear in blue text. This is an example of an inline style. Because inline styles are considered more specific, they take precedence over any styles included in <style> tags or in external style sheets.

Hope this helps clear things up! :sparkles:

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Tal! The inline property of an element means that the element takes up only the space required and does not start on a new line. You can find more information and examples of this in the MDN documentation. Another link to MDN documentation about style is included in the teacher's notes.

While learning JavaScript is possible without in-depth knowledge of HTML and CSS, it is (in my opinion) infinitely easier to understand if you do have a solid base in both HTML and CSS. This particular course is about manipulating the elements and styles of the Document Object Model using JavaScript. Including explanations for every CSS style and HTML element is beyond the scope of this course.

Again, while taking HTML and CSS courses are not absolutely necessary, you will likely find it much easier to understand what is going on if you do. Just my two cents :smiley:

Hope this helps! :sparkles:

tal Shnitzer
PLUS
tal Shnitzer
Courses Plus Student 5,242 Points

Hi, I thinks the teacher meant something else. He talks about inline style properties: "you can't rely on these properties to know

how an element has been styled, unless you set them here yourself.

The style objects properties are generally used as setters and not getters for

this reason." your answer I think is about inline tags (like <em> or <strong>) Thanks