Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
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.
There are currently no FAQs about CSS Web Site Design.
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.