Viewers: in countries Watching now:
In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.
In the next few movies, I want to explore the relationship between styles and the HTML documents that they control. As authors, we have several options to choose from, in terms of where we write our styles. Understanding those options and how they interact with each other is a very important part of writing efficient styles, and I want to start with inline styles. Inline styles allow you to format HTML elements directly as an attribute of that element itself, so let's go ahead and try that out.
And again, very simple page structure, the one that we have seen before. We have the headline with a paragraph below it. We have a div tag and inside of that we have a heading two and now two paragraphs inside that as well. So the first thing I want to do I want to make sure that all of my elements on the page use Arial. We know that with inheritance, I could go ahead and apply that to the body selector. And last time we did this using embedded style; this time we are going to do it with an inline style, so here is how you do it inline-style. I am going to go to the body tag. I am just going to place my cursor right after the word body and hit space, because inline styles are simply attributes of HTML elements.
So I am going to use the style attribute for this. And again, I am using code completion to help me out here, but to do this you do style=. And then everything within the style declaration goes inside quotation marks, so make sure you are inside some quotation marks here. And then you just type in the property just in the way you would normally within a CSS rule declaration. So here I am just going to type in font-family: Arial, and then a semicolon. So you can see, the syntax really hasn't changed.
It's just where we are placing that syntax that changes. Here, we are placing inside of that attribute. So I am going to save this and this time I want to test it in a different browser, maybe this time Opera. So we see that all the elements on the page we are using Arial and our styling is occurring exactly the way that we want it to. Now let's go explore inline styles in a little bit more detail. Now you can use as many properties as you want. So, for example, I am going to go down to the next paragraph and I will go ahead and do a style attribute there as well, style=. And what I am going to do here is I am going to do more that one property. So here I am going to do font-size and we'll go ahead and make that 14 pixels.
So if you want to do multiple properties, after the semicolon, I am just going to type in a space. I don't need the space here. It just makes a little bit easier for me to read. And I am just going to type in color, colon, the word red. And again, I am just making sure that all of these properties are now within my quotation marks, and then another semicolon to let it know that I am done with that one. So if I save this and test this, you can see that now that paragraph is smaller, 14 pixels, and it is also red. Now I am going to go back into Aptana Studio, and I am just going to add a couple of more.
One of the things that you start to figure out really quickly on in using inline styles is that they're not that efficient. What if we've got a couple of elements that I want to have the exact same formatting for? So if I go down to this paragraph, for example, I can again do a style attribute, style=, and inside that I could do font-size of 12 pixels and then font-style: italic. Now again, pay really close attention to the syntax here. Remember that we have a colon after the property and the value, and there is semicolon to indicate that we are done with that property and we are moving on to the next one.
So if I want the paragraph below that to be styled exactly the same way, the easiest way for me to do would just be copy and paste it, but if I am using inline styles, I still have to do another style declaration and I have to make it exactly like the one that I just did. So obviously, yes, copying and pasting will save me a little bit of time, but this is still pretty tedious. So if I save this and preview that in my browser, I can see that indeed it's shrinking down, it's becoming italic, that's exactly what I wanted, but as I mentioned before, not that efficient.
Honestly, inline styles, these guys are great for targeting specific content on the page where you want to place it, but I think you can see pretty quickly how this is going to become almost unmanageable for an entire site. Imagine trying to do this for every element on the page for an entire site. It would be really difficult to maintain and update. It would take you long time to write. This is definitely not the way to go about doing it. Now they are great way to make sure that the formatting that you want to have is applied, because they tend to almost always win in the event of a conflict with other styles.
So you can write and inline style and you know that that's the formatting pretty much this is going to get. Now we are going to explore that concept a little bit more later on as we discuss to resolving conflicts, but to be honest with you, there is really very little reason to ever use inline styles, and most of the time their use is really just restricted to instances where older or less robust user agents don't support other means of applying styles. And that's typical of, say, older email clients, so you'll typically find inline styles in HTML emails. But for the most part, you're probably not going to use inline styles all that often, if ever at all.
There are currently no FAQs about CSS: Core Concepts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.