Video: Using linked and embedded style sheets together

We've seen how style sheets can be embedded and also how there can be linked to style sheets and not only, but multiple linked style sheets. What we're going to look at in this video is how there can be both linked and embedded style sheets in the same document. In this case, we have our layouts, but if you take a close look at the sidebar over there on the right, to the tee of the day and post archive headings don't look quite the same as they did in previous chapters.

CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.

Using linked and embedded style sheets together

We've seen how style sheets can be embedded and also how there can be linked to style sheets and not only, but multiple linkedstyle sheets. What we're going to look at in this video is howthere can be both linked and embedded style sheets in the same document.In this case, we have our layouts,but if you take a close look at the sidebar over there on the right, to the tee of the day and post archive headings don't look quite the same as they did in previous chapters.

So what we're going to do is we're going to add to the styles that have been linked in the external style sheet by doing somestyling here in the CSS. Now, what we have here is we have an embedded style sheet that already has the beginnings of a ruleset up. We already have our selector and all we need to do now is start to fill insome styles, some declarations to be precise about it. Ok,so there is just a very basic start and if we go back over to Firefoxwe discover upon reloading that we have some background color.

At this point, of course, you haven't seen really what background means or exactly how it works, that will come inlater chapters. For now, let's just concentrate on the fact that the styles can come on together. We keep going with thisand a, in so doing, more complicated presentation more complex presentation.

All the things that I put up herewill be covered in later chapters. So if we go back to the web browser and hit the reload,we see even more changes.Again, just like when we had two linked style sheets working together, here we have a linked and an embedded style sheet thatwork together. The styles from the external style sheet, ex0206.css, are brought in via the link and theembedded style sheets styles are,the two are combined, the embedded style sheet and the links style sheet are combined, any conflicts are resolved and the final aggregate productwhich is the presentation style sheet is used to style the page. Now there is something I wanted to point out here now that wehave this embedded style sheet, which is that if you wanted to, you could rearrange this so that it's perhaps more readable toyou if I didn't like the way it was set up before. This arrangement,and the arrangement that we had before, are exactly equivalent. CSS doesn't care how exactly you set up your declarations, in fact,you can set them up so they look at this with extra spaces between declarations and values we'll put a little extra bit thereso that every declaration, every property value pair is on its own line, if we go back and hit the reload,nothing changes, because this is exactly the same as what we had before. It's just written a little bit differently. This allowseach author and allows you to develop your own style forwriting out CSS. You can picka writing style that works best for you that you find easiest to read. Some people will find this sort of thing,easy to read, some people will take this sort of approach and some will do more like what I did where there are multipledeclarations per line. Any of theseare exactly equivalent to the others. So you're pretty much free to develop your own writing styleas long as you remain to the basic syntax rules of separating a property and a value with a colon, and ending a declaration with a semicolon andhaving curly braces around the entire declaration, bracket, those are some things you, you don't get to change but in terms of the whitespace, ifyou want to have every declaration on it's own line,you can do that or if you just want to have every rule be just one little long line of text you can do that to.

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.

Already a member ?

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

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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:

new course releases

newsletter

general communications

special notices

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:

new course releases

newsletter

general communications

special notices

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