Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
In this video, what we're going to do is we're going to take this completely unstyled document and we're going to style it by means of an embedded style sheet. So what that means is, there is actually a style sheet that's embedded into the document. So if we take a look here, we can see that we have already in the document a style element. That would be style with the attribute type equals text/CSS. That is necessary to have for a style element. You need to have a type attribute and the type attribute value for a CSS style sheet needs to be text/CSS. So inside this element, we can put a style sheet, as short or as long as we care to. So what we're going to do with this particular embedded style sheet is we're going to go the file base.css, select the entire thing, I use Cmd+A, Ctrl+A that you use for select all, copy it, then close base.css and paste the entire style sheet into the style element.
So you can see that that's actually, now is inside the style element and if we scroll up quite a bit because it's a relatively sizeable style sheet, we find the beginning of the style element and then if we go back over to Firefox, and we hit Reload, there it is, this style sheet is applied to the document and makes it look all pretty just like we wanted to. So this is an embedded style sheet again because it is embedded into the document. This is not necessarily the best way to do this though.
What we have is, we have an entire style sheet that we stuck into this document and made this document quite a bit longer than it used to be. So, you know this is one way to include a little bit of, you know, small style sheet or if you had a template driven site, you could include the style sheet in every single page if you really fell like it, but that's not really very efficient. It would be better if you could have the style sheets in a different file and then just refer to it from your XHTML document, and that's what we're going to do in the next exercise.
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.