Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
CSS stands for Cascading Style Sheets and the word CSS refers to inheritance, and this is about how styles inherit their properties from one another in CSS. So let's take a look at an example here and see how that works and what that means. So here we have a document that's formatted with CSS and here we have the same document in the text editor and you will notice that there aren't any styles in here. All of the styles in this document are defined in this external style sheet right here, which is brought in with this link tag, and so that's in the head element and link tag has a rel attribute which stands for relationship and that is set to stylesheet.
And it has a type attribute, which is set to text/css, and it has an h attribute, which is the location of the file, which is here in this external CSS file. And the style sheet is in this external file right here, which is also loaded up in our text editor, and there it is. You will see that it doesn't have a lot in it. It's not a very complicated style sheet and that's the style sheet that's used to format this document here. So we'll notice that the body style has a background-color and a color for the text and a font-family and the h1 style has a different font-family and so that sets the Verdana font for these headings and the paragraph style has yet a different font-family, which is Tahoma or a backup of sans-serif.
Tahoma is loaded on the system and that's this font here, which is used for the paragraphs. We have a couple of other styles here. We have our first style and a highlight style and these use class selectors. You will notice these selectors have a little period before them and that makes them class selectors and those are selected in a different way. In other words, these tag selectors, these mean that this style will apply to all the p tags in this context and the h1 likewise for the h1 heading tags and the body of course for the whole body of the document.
So these are tag selectors and these are class selectors. class selectors are applied using the class attribute. Let's go ahead and apply this first class to the first paragraph of the document and when we do that, we'll see this first paragraph will not be indented anymore, because this sets the text-indent to 0. So what we are demonstrating here is part of the inheritance, the cascading of the Cascading Style Sheets. What will happen is that this paragraph will first be formatted by the body because the paragraph is inside the body and then it will be formatted by the paragraph style right here with this font-family and line height and text height, and we'll see that's already applied here and then after all of those have been applied, it will apply this first style.
So it will take the text-indent away so that document won't have any indent for this particular paragraph. So let's go ahead and apply that style to that paragraph, which is right there, and we'll say class="first" and that class attribute is available for most tags in XHTML and HTML and that applies a class based on the class selector. So we don't put the period here, but we just use the name of it, so it's first. If I go ahead and save this and reload the document, you will see that this paragraph is no longer indented.
So the p style is still applied. We have that line height. We have the font and all of that. The body style is still applied, because the body is first in the hierarchy. Let's take a look at the hierarchy here. You can see the body is first, because that encompasses the entire document and then the h1 is applied on top of that, so it has that color from the body but it has the font from the h1 and the p style is applied on top of the body, not on top of the h1 because they are next to each other in the hierarchy but it's applied on top of the body because the body is first in the hierarchy and then the p.
And then this class style is applied on top of it. This first style is applied on top of what's already defined for the p because that's later in the hierarchy. We are applying it just to this one paragraph, but not to this other one, and so that's the way that it's working here. We have the body style and then the paragraph style and then the first class is applied. Let's look at another example, we'll use this highlight style, we'll see that the highlight sets the font-weight to bold and it sets the background-color to this other color. So it will look like a highlight in the document.
We will go ahead and highlight just a couple of words here. So the span tag is used for applying class to an inline element. It's an inline tag and it's a container. So you put content inside of it. It has a begin tag and an end tag and it's just there for applying class. That's really all that the span tag is for. It doesn't have any properties of its own and so this allows us to apply a class to an inline object and this text here is inline with this paragraph.
And so when I save this, it will apply that highlight class on top of the class already applied to the paragraph. And so it will use the same font and it will use the color from the body. Remember that the color of the text is set in the body and so this is definitely after that in the hierarchy and then it will apply a background-color on top of that and a font-weight, so it won't change the font but it will just use a bold version of this existing font. So let's go ahead and reload this in the document. You will see, there we go.
It's bold and it's highlighted and everything else is the same because it has inherited all of those other styles because that's where it is in the hierarchy. And so this is how inheritance works in CSS. The C in CSS is for cascading, Cascading Style Sheets and cascading refers to inheritance. It refers to how the styles are inherited from one another and applied on top of one another within the hierarchy of the document.
Get unlimited access to all courses for just $25/month.Become a member