Introduction to Cascading Style Sheets (CSS)

show more What is CSS? provides you with in-depth training on Web. Taught by Eric Meyer as part of the CSS Web Site Design show less
please wait ...

What is CSS?

Before you start out it's probably worth asking what is CSS and sort of by implication why would someone use it? CSS, cascading style sheets, is effectively the clothing that you put on a webpage or other document. But we most typically see CSS used on webpages and this is everything you see here in our Javacotea design, the fonts, the colors, the way it's laid out, the separation of elements from one to another. That's all a set of clothes that we've put on this page, but underneath those clothes, underneath that presentation there're still these. There's the raw sort of body, the naked page if you will and underneath that is the structural skeleton that makes it go, the divs and paragraphs and all the XHTML. That's like the skeleton that creates the document body onto which you can put a set of clothes. In the same way that you can change your presentation simply by changing an outfit, you can change the way a page is presented by changing its outfit, its CSS.

Here's another site and this is this site without its CSS, the just sort of the raw naked page and then we add some CSS and this is what this page looks like, just as a result of some cascading style sheets. Here's a site called CSSBEAUTY, same situation. It's a very plain looking page of course, I mean these pages all look very plain before you start styling them, so you can see there are lists and there are images and there's content and links and then when we turn the CSS on, it looks like this. So this is, you know, again the same way that you can go from wearing sweatpants and a T-shirt to putting on elegant evening wear and then change the presentation of yourself, change the way that you look, you can do the same thing with a webpage. So naked page, dressed page.

You can take this a little bit further. In fact, for a while it was all the rage to have what is called style switchers and this is the website of Jeremy Keith adactio.comp, who has a number of themes for his website. It's the same document. All I'm doing is I'm changing through the little mechanism he's provided, which style sheet is being applied to the page and so incredibly different results.

Based on what style sheet we're using, here's his take on a sort of old-school Jeffrey Zeldman Web design. The, this is sort of a take off on web design that Jeff Zeldman had oh, back in around 2000 or so. At any rate this as I say we're just changing the clothes that go on the page, but we're not changing its body and that's one of the advantages of CSS. For example, here's my personal website meyerweb.comp.

I'm looking at this over the network right now and what I'm going to do is I'm going to change the style sheet that drives meyerweb. So that you can see that, and not only can I change the way that the page looks I can change the way the entire site looks because every page on my website as is generally the case with any site that uses CSS, every page is pointing to a style sheet. And so if I want to change the way the entire site looks I can go to that style sheet and edit just that.

So actually have the change set up and ready to go and all I need to do here is hit save to save over the network. And then when I hit Reload, notice that the entire page flipped around basically. I have my sidebar on the left side now and my posts in my weblog, the meta information is now over here on the right side whereas before it was on the left and the meyerweb.comp link up here changed and I can go surfing around through meyerweb, just pretty much picking any path that I feel like and what I'm going to find is that everything's been switched around. Now if I decide I don't like that I can undo my change, save again, hit Reload and everything's back to the way that it was. So if I, see if I back up, this page will still be caught in the cache so I would have to keep hitting reload if I wanted those pages to be fixed, the ones in my history, but if I click back then they'll fix themselves and so this is now back to the way that it was before I made the change. The sidebar is now over on the right side and the meta information for my weblog post is over here on the left and the little meyerweb.comp is back here in the lower left-hand corner like it usually is. And that, I could've taken an hour to go through every single page on my website basically and whatever changes I make in the style sheet, that's what happens to all the pages here, because all these pages are pointing to that style sheet. So that's another huge advantage of CSS. Not only is it a set of clothes for one page, but it's a set of clothes for all of the pages that are on a given site, because they all point to that single style sheet.

What is CSS?
Video duration: 5m 34s 6h 8m Intermediate


What is CSS? provides you with in-depth training on Web. Taught by Eric Meyer as part of the CSS Web Site Design

please wait ...