From the course: CSS Positioning Best Practices

Understanding levels of style sheets - CSS Tutorial

From the course: CSS Positioning Best Practices

Start my 1-month free trial Buy for my team

Understanding levels of style sheets

“

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.

Contents