New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

CSS: Core Concepts
Illustration by

Using external style sheets


From:

CSS: Core Concepts

with James Williamson

Video: Using external style sheets

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.
Expand all | Collapse all
  1. 4m 57s
    1. Welcome
      55s
    2. Using the exercise files
      4m 2s
  2. 1h 7m
    1. Exploring default styling
      4m 56s
    2. CSS authoring tools
      2m 29s
    3. CSS syntax
      4m 45s
    4. Writing a selector
      4m 10s
    5. Setting properties
      8m 40s
    6. Common units of measurement
      7m 47s
    7. Inline styles
      5m 1s
    8. Embedded styles
      5m 19s
    9. Using external style sheets
      10m 34s
    10. Checking for browser support
      8m 48s
    11. Dealing with browser inconsistencies
      5m 30s
  3. 2h 15m
    1. Structuring HTML correctly
      2m 51s
    2. Element selectors
      4m 52s
    3. Class selectors
      6m 4s
    4. ID selectors
      3m 27s
    5. Using classes and IDs
      10m 7s
    6. Element-specific selectors
      4m 35s
    7. The universal selector
      5m 42s
    8. Grouping selectors
      4m 49s
    9. Descendent selectors
      7m 32s
    10. Child selectors
      5m 7s
    11. Adjacent selectors
      5m 30s
    12. Attribute selectors
      12m 43s
    13. Pseudo-class selectors
      3m 54s
    14. Dynamic pseudo-class selectors
      8m 29s
    15. Structural pseudo-class selectors
      6m 45s
    16. Nth-child selectors
      13m 10s
    17. Pseudo-element selectors
      12m 40s
    18. Targeting page content: Lab
      8m 56s
    19. Targeting page content: Solution
      7m 59s
  4. 42m 39s
    1. What happens when styles conflict?
      4m 0s
    2. Understanding the cascade
      5m 47s
    3. Using inheritance
      6m 11s
    4. Selector specificity
      6m 55s
    5. The !important declaration
      4m 5s
    6. Reducing conflicts through planning
      3m 33s
    7. Resolving conflicts: Lab
      6m 45s
    8. Resolving conflicts: Solution
      5m 23s
  5. 1h 47m
    1. Setting a font family
      7m 10s
    2. Using @font-face
      9m 18s
    3. Setting font size
      7m 35s
    4. Font style and font weight
      6m 52s
    5. Transforming text
      3m 58s
    6. Using text variants
      2m 49s
    7. Text decoration options
      4m 26s
    8. Setting text color
      3m 2s
    9. Writing font shorthand notation
      8m 49s
    10. Controlling text alignment
      6m 33s
    11. Letter and word spacing
      9m 11s
    12. Indenting text
      4m 30s
    13. Adjusting paragraph line height
      10m 30s
    14. Controlling the space between elements
      6m 41s
    15. Basic text formatting: Lab
      8m 45s
    16. Basic text formatting: Solution
      7m 14s
  6. 2h 1m
    1. Understanding the box model
      16m 53s
    2. Controlling element spacing
      14m 29s
    3. Controlling interior spacing
      10m 49s
    4. Margin and padding shorthand notation
      6m 27s
    5. Adding borders
      8m 57s
    6. Defining element size
      10m 7s
    7. Creating rounded corners
      6m 58s
    8. Background properties
      2m 51s
    9. Using background images
      5m 10s
    10. Controlling image positioning
      10m 25s
    11. Using multiple backgrounds
      7m 5s
    12. Background shorthand notation
      5m 25s
    13. Styling container elements: Lab
      7m 55s
    14. Styling container elements: Solution
      8m 17s
  7. 47m 51s
    1. Color keyword definitions
      5m 4s
    2. Understanding hexadecimal notation
      6m 5s
    3. Using RGB values
      4m 58s
    4. Using HSL values
      5m 17s
    5. Working with opacity
      2m 23s
    6. Using RGBa and HSLa
      3m 8s
    7. Styling drop shadows
      5m 38s
    8. CSS gradients
      6m 32s
    9. Working with color: Lab
      4m 26s
    10. Working with color: Solution
      4m 20s
  8. 1m 58s
    1. Additional resources
      1m 58s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS: Core Concepts
8h 49m Beginner Nov 22, 2011

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.

Topics include:
  • 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
Subject:
Web
Software:
CSS
Author:
James Williamson

Using external style sheets

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.

There are currently no FAQs about CSS: Core Concepts.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Core Concepts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.