Watching:

Embedded style sheets


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

Embedded style sheets

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.

Embedded style sheets
Video duration: 2m 20s 6h 8m Intermediate

Viewers:

Embedded style sheets provides you with in-depth training on Web. Taught by Eric Meyer as part of the CSS Web Site Design

Subject:
Web
Software:
CSS
Author:
please wait ...