Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
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 some styling here in the CSS. Now, what we have here is we have an embedded style sheet that already has the beginnings of a rule set up. We already have our selector and all we need to do now is start to fill in some styles, some declarations to be precise about it. Ok, so there is just a very basic start and if we go back over to Firefox we 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 in later chapters. For now, let's just concentrate on the fact that the styles can come on together. We keep going with this and a, in so doing, more complicated presentation more complex presentation.
All the things that I put up here will 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 that work together. The styles from the external style sheet, ex0206.css, are brought in via the link and the embedded 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 product which is the presentation style sheet is used to style the page. Now there is something I wanted to point out here now that we have this embedded style sheet, which is that if you wanted to, you could rearrange this so that it's perhaps more readable to you 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 there so 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 allows each author and allows you to develop your own style for writing out CSS. You can pick a 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 multiple declarations per line. Any of these are exactly equivalent to the others. So you're pretty much free to develop your own writing style as 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 and having curly braces around the entire declaration, bracket, those are some things you, you don't get to change but in terms of the whitespace, if you 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.
Get unlimited access to all courses for just $25/month.Become a member
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.