Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,800 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Exploring default styling
- Writing a selector
- Setting properties
- Working with common units of measurement, including ems and pixels
- Structuring HTML correctly
- Understanding the cascade and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Styling container elements
- Working with RGB vs. HSL values
- Styling drop shadows
Skill Level Beginner
So far, we've written inline and embedded styles to format page content. Now, both of these methods are good for targeting local content, but they're not that efficient in controlling styles over a large number of pages, or an entire site. For that, we typically use external style sheets, so let's take a look at how those work. So, I'm going to go over to the Chapter_01 directory and look in the 01_09 folder, and I'm just going to open up all three of these pages: pages 1, 2, and 3. I'm just going to go ahead and open those guys up.
Whenever you're creating styles for an entire site, or a section of pages for example, you really need to understand how the structure of those pages work. So if I go to page 1, for example, I can see the structure that we've been using in the past couple of exercise files. We have a heading 1, a paragraph. Below that is a div tag with an h2 and a couple of paragraphs in it. But if I go to page 2, I can see that I have an h2 here that is not in the other pages, and on page 3, I have a heading 3 in the div tag, which the other two pages don't have as well.
So now when I write styles I have to really consider all of those elements and how they're going to work together as I write the styles. So that's one of the challenges that you face in writing styles for an entire site or grouping of pages rather than just a single page. An external style sheet is a totally separate file, so I need to go ahead and create that. I'm just going to go up here to File and choose New, and I'm going to do a new file. So it doesn't matter what program you're using, whether it's Aptana Studio or some other program, there should be a way to go ahead and create a new file.
Now if it's offering you the option of creating a new CSS file, just go ahead and choose that. Otherwise it's really just a text file with a .css extension. So in the 01_09 folder, I'm going to go ahead and just call this styles.css and go ahead and save the file. So now I have the styles.css file opened as well, and I'm just going to go up to line number one and write our first selector. So I'm going to write a body selector and inside that, I'm just going to do font-family, and we're going to make that Arial.
So nothing really new here, other than what we've done before. I'm going to go on the next line, however, and type in a second property. This time I'm going to do color, and I'm going to do gray. Really interesting here, I'm using some of the reserved keywords for colors right off the bat. We have an entire chapter on color a little bit later in the title, but there's actually a difference between gray spelled with an A and gray spelled with an E; one is darker than the other. So if I save this file and let's just say I go back to page 1, for example, and I preview this in one of my browsers, I see absolutely no formatting whatsoever.
Well, that's because currently there is nothing linking that style.css file to any of these individual files. So that's sort of a two-step process. We have to create our external style sheet, then we have to link the pages that we want to be controlled by that style sheet to it, and we do that in the HTML document. We have a couple of ways of doing it. The first way that we're going to take a look at is using a link tag. So on page number 1, directly after the title tag but still in the head of my document, I'm going to go ahead and create a link tag.
Now, this link element has a couple of different attributes that we're going to need to use in order to link it to an external style sheet. The first one is going to be an href attribute. So we're going to do an href attribute, and href is really just, where is this file located that we want to link to? And since they're both in same folder, we're just going to type in styles.css. If this was in a separate directory like a subdirectory, such as _css or something like that, I have to make sure that that path was properly written within here; otherwise, it's not going to know where to find those styles.
After that, I'm going to use another attribute, and this is going to be the type attribute. And for type, we're going to do text/css. So that's really just the MIME type for this file. In HTML5, it's not specifically required. I'm just going to place it here for older legacy devices. And then after that, there's another attribute that we really do need, and that is the rel, or relationship, attribute, and for that, we have to describe its relationship as a style sheet. After that, I'm going to make sure I'm outside of the quotation marks and then just go ahead and close my angle bracket there.
So link tags don't need to be closed. There's no closing link tag. If you're using XHTML, you can feel free to self-close it, but this syntax right here is just fine. I want every single page to be linked to this external style sheet, so one way to do that would be to go ahead and copy this. And let's go to page 2 and just paste it in. But there is an alternate way of linking to external style sheets and on page 3, I want to show that to you. So I'm going to save that, go over to page 3, and now I'm just going to go ahead and do what we did earlier with embedded styles: I'm going to create a style tag.
So I have an opening and closing style tag. Inside these opening and closing style tags, I can use an inline style rule called @import. So if I type in @import and then a space, I can type in URL, and then I can point that to the page that I want. In this case, it's going to be styles.css. So the same thing here: I would have to type in the full path to that page-- so if this was on a subdirectory, I'd have to make sure that that was in there-- and then just go ahead and close out that line.
If you're going to use @import, this has to be done above any of the other rules. So if these embedded cells had additional rules, I'd have to make sure that @import was at the very top of this. And @import is really interesting because you can use it in a lot of different places: you can use it within a style sheet to link several style sheets together, sort of daisy-chain them together if you will; you can use it here within the head of the document, within the style tag. So there are a couple of different places that you can use that. Save that, preview page number 3, and for this one, I'll just use Firefox. So there is page 3. There's the styling that we're looking for.
We're getting the font, we're getting the font sizing, we're getting the color gray that we're looking for, and if I go back and preview the other two pages as well--so let me go in each one of these and just preview it-- I can see that every single one of these guys is giving me the exact same styling. So those styles are being used across all three of those pages. So this makes it a lot easier to update and change and maintain styles across an entire site. Now, before we try that, I want to do one thing here.
I'm going to go back into Aptana Studio, and I want to talk about using @import just a little bit more. This is not a best practice. @import was great when there were certain browsers around that didn't understand styles because you could, say, encase it within an HTML comment, and if the browser or user agent didn't understand style sheets, it just simply wouldn't import them. It's not as efficient as using the link tag, and overall, it's just not used as widely. So what I'm going to do is I'm going to replace this with a link tag instead.
So now all three pages are linking to the style sheet the exact same way. So let's go back into styles.css and let's continue to add to our existing styles. Now the first thing I'm going to do is, just below body, I'm going to write a group selector for h1, h2, and h3. So, notice that we have the commas between each of those: h1, h2, h3. I'm going to go ahead and open and close my curly brace at the same time, and I'm just going to set their color to black. So I'm going to go ahead and save that and I'm going to go back to my browser and I'm just going to update my styles in each of these. Cool! Looking great! Now, one of the things I would like to do is this heading 2 that's inside of the div tag here, I really would like that to be maroon instead of black.
So going back and modifying my styles, I'm just going to take the h2, and I'm just going to change its color to maroon. And I'll just remove the h2 from this selector, so now that's just going to say h1, h3. So that sounds right. So I'm going to go ahead and save that, go back out to my browser, and I'm just going to preview those. So now you can see that heading 2 turns maroon, that heading 2 turns maroon, that heading 2 turns maroon, but there was a problem.
If I go back to page 2, I notice that that one has two heading 2s on it, and this extra heading 2 that the other pages don't have, I don't want that to be maroon; I want that to be black. I just wanted the heading 2 inside the div tag to be maroon. And this is what I talked about earlier. It's really important when you write sort of global, site-wide styles to really understand your page structure, because we only have three pages here. That's pretty simple, right? But what if you had 500 pages? You need to understand the structure of your pages as you write your styles so that little things like that don't just sort of crop up and surprise you.
So, a much more efficient way to write the selector--I'll go back into my code-- would be to just go ahead and say, okay, h1, h2, h3 all those are black, except for when h2s are found inside of a div. So when rewriting the selector here, say any h2s inside of a div--this is a descendant selector-- I know in order to efficiently write this, you really have to understand selectors, and we have a whole chapter on selectors a little later on. So right now just focus on the concept of this one particular page controlling all the styling on our site, or these three pages.
So if I save this, go back into my browser and refresh my styles, I can see that now it's doing what I want. Every single page that has the h2 inside of a div, it's maroon, but when the h2 is outside of the div tag, it's now black. So understanding the structure of my pages was crucial in order to have my external styles.css style sheet apply the formatting the way that I want it to. When we talk about external style sheets, they are by far the most efficient way to control your sites. And actually, I'm guessing that you're going to find yourself using them the majority of the time.
It is important to keep in mind though, just as we've talked about here, how changes made to one page often have unintended consequences because it just sort of effects everybody that has similar content, and that's why it's so important to write well-structured, consistent HTML. Now, we're going to explore that relationship in a little bit more detail a little bit later on. For now, just understand that in order to write effective external style sheets, you're going to need to be familiar with how your pages are structured and then take the time to properly plan your styles before you begin to write them.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.