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 last movie, we introduced inline styles and discussed how they're inefficient for controlling the formatting of pages in sites. Now another way to author styles is through the use of embedded styles. Embedded styles allow you to write styles to control the page content in the head of the page's HTML. Let's give it a try. And the first thing we need to do if we are going to write embedded styles is to use the style tag in the head of the document to let the browser or the user agent know that we have some styles.
So the first thing I am going to do is go right up here, so right after the title, but before the closing head tag. I am going to go ahead and open up a style tag and then Aptana closes the style tag for me, which is very nice of it, but if your user agent didn't do that for you, go ahead and do that. I also like creating just a little bit of room between them so that I have room to create my styles. Now in some older browsers, or in older units, you might actually see within the style using an attribute like type, for example, to specify that it's CSS styles or something like that. But with HTML5, the text CSS is assumed as the type for style tags, so I don't really have to use that anymore.
So the first thing I am going to do is write a selector that is going to control the entire page in terms of the font family being used. And we will just go ahead and use the element selector body to do that. So I am going to go ahead and do body and open up curly brace, and I will hit Return. Now I usually like to do what you're seeing right here. Now again, Aptana Studio is being very nice, because as soon as I opened up a curly brace, it went ahead and closed one for me, but I really do like to build it this way, even if I have do it manually. I call this the skeleton of a selector, and it's very easy to forget that closing curly brace.
So when you do that, your styles really get a little out of whack. So you want to make sure that you have the opening and closing braces. And I like to do that at the very beginning of writing a rule. Okay, now I am just going to do font- family, and I am just going to do Arial. So again remember, our properties have a colon after them and a semicolon at the end of that line. Okay, I am going to go down to my next rule, and to do that, again I am just going to make sure that I am at the closing curly brace of body--not still inside of it; I have to be outside of it--and then hit Return. Now I can go down to the next line and just go ahead and do a new selector.
So here I am going to do all paragraphs, so I am just going to do a P selector. And again I am just going to hit Return to go down to the next line. Now again I have my opening and closing curly braces, so if you are not using an editor like Aptana that we will go ahead and do that for you, make sure you do that. And I am just going to type in font-size: 16 pixels and then on the next line color: red. So these values are probably familiar to you if you did the previous exercise, because they are almost exactly the same. And next, I'm going to do one more selector, so I am going to go down below in my paragraph.
I am going to do div p. So that's going to target every paragraph inside of div. This is called a descendent selector. The whitespace there is very important between the div and the p, and we are going to talk more about those in our chapter on selectors. Now inside that selector I am just going to do font-style: italic and then font-size: 14 pixels. If I save this and preview this in one of my browsers, I can see that I am getting the exact same formatting that we had in the previous exercise, for the most part.
Everything is Arial, I have got the size in there I want, I have got the color that I am looking for, and the paragraphs inside the div tag are indeed italic this time around as well. So that's is a lot more efficient than inline styles, especially in regards to controlling the content of this page. But it's still not as efficient as it could be in terms of controlling an entire site. It's great for this page, but what if I want every page in my site to be styled the exact same way? So over here in the 01_08 folder, there's another file. This one is called embedded2. I am going to go ahead and open that up. And what if I wanted to use the exact same styling on this page? Well, the easiest way for me to do this is to simply copy everything, including the opening and closing style tags, and then pasting that into my new embedded2 file.
And if I save that and preview that in the browser, I can see that it looks exactly the same as my first one. So yes, that does work, but imagine having to do this for, say, a site that has 100 pages, and then what if you needed to make a change? Let's say I want to change the color of the text from red to green, so I would come back in my code here, type in green for the color, but I have to remember to do it for every single page. So that's not that big of a deal when you only have two pages, but it's a big deal when you have, say, 50 pages or 100 pages or 1,000 pages.
So while embedded styles, they do give us a really powerful and efficient way to target the content of an individual page, they are inefficient as a means of controlling styles across an entire site. Now for the most part, authors use embedded styles as a way of writing smaller, targeted styles that are only meant for a specific page. So if you have one page in your site, or maybe two pages in your site, that the styling on is very, very unique, or you need to overwrite something in your global styles, this is a good way to do it. But for site-wide styling, most authors use external style sheets, which is what we are going to explore in our very next movie.
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.