Join Bill Weinman for an in-depth discussion in this video Understanding levels of style sheets, part of CSS Positioning Best Practices.
There are three major levels of Style Sheets in CSS and one is applied first, and then another, and then another. So the external style sheet is applied first. And so here we have a document with an external style sheet that's specified here in this link element. And if we wanted to, we could have another Style Sheet in the document inside the head element using the <style> tag. And we could put a style in here for example, if we wanted another style for paragraphs, say we want our paragraphs to be a bluish color.
We could put that in here. Say color and that will make our paragraphs a little bit bluish. But that's applied on top of the styles that are already in the external style sheet. You have the font, you have the line- height, those are already in the style sheet, and then this color blue is applied on top of that. So first the external style sheets are applied and then any style sheets that are inside the head element.
And finally, if we wanted to apply style down here, we could apply style to a particular element using the style attribute. This is not to be confused with the <style> tag. The <style> tag goes in the head element. The style attribute can be an attribute to any element in XHTML. And so maybe I'll use a different color just for this paragraph here, make it a little bit green, I'll save that and reload. Now this paragraph down here is green and this one is still blue.
And so the styles are applied in order. First the external style sheet and then the <style> tag inside the head element and then any styles that are applied to particular elements using the style attribute. So these are the levels of style sheets in CSS.
- Understanding style sheets and levels of inheritance
- Learning how to use CSS units of measure in page layout
- Laying out content on a page using absolute, relative, float, and fixed positioning
- Using CSS positioning to place menus, buttons, graphics, and columns precisely on a page
- Using templates to improve workflow
- Creating a full working web site, step by step