How To Apply CSS Styles to HTML
Oct 01, 2021HTML specifies the content and structure of a webpage, Cascading Style Sheets (CSS) is the language used to define how HTML elements are styled and displayed. Use this video to learn how to use CSS to style your HTML documents.
In this video, we're going to start our discussion on Cascading Style Sheets. Now, if you're coming here from the HTML course, you know that our, a web page can have several different tags to that page. We can have <div> tags, <h1> tags, <form> tags, buttons and so on. However, the tags that you add to your HTML document will simply add structure to that document.
In order to add some color, some, maybe some formatting and layouts and things like that, you do need another technology called CSS, Cascading Style Sheets. Now what you're looking at on the screen right now are two exact same HTML documents. They simply have a pair of <div> tags with an h tag inside of that, with some textual content in the middle.
So what we have on the left is just HTML, but on the right-hand side, if you notice we have added a style to the pair of <div> tags. [Video description begins] The style reads: "color:blue;". [Video description ends] What this style is going to do is it's going to color all of the content between those <div> tags blue, meaning the textual content will be turned into a blue color. Now, the <h1> tag that you see there does not have a style to it.
So you might be thinking, why does it turn blue if the <div> tag has the style, but not the <h1> tag, because the <h1> tags contain the textual content. So this is where the cascading nature comes in, because what's going to happen is that the <h1>, the pair of <h1> tags inside of our <div> tag, those <h1> tags are considered the child to the parent, which is the <div> tag. [Video description begins] Inside the h tags, it reads: Just some content. [Video description ends]
So in this case, the style would cascade down into the child element, which is the pair of <h1> elements, and there we have our textual content, which will be turned to blue. Let's take a look now at some of the advantages of CSS. Apart from the fact that we can make our page look and feel a lot better, we can also do things like separate the content from our style.
And by separating out our content, what I mean is that we're going to be separating out our HTML documents or HTML files with the tags inside of them that will be separate to the CSS, which could be another file, or it could be inside of the same file as well. But we have the ability to separate out these two different files and therefore increase our productivity and make web development a lot more efficient, a lot more fun.
Also, by being able to separate out our content from our style, we are able to apply the same style to multiple pages. So we can, in a typical website, we can have as many of those individual web pages as we want. And by having one style, we can therefore add that style to all of the pages inside of the website, so we have consistency. Also, we can have different presentation modes.
So for example, if you wanted to have that same web page be printer-friendly, then we can have a specific style for our printer. Then if you wanted it to be mobile-friendly, we can have another style sheet that we can add to the same web page and therefore make the content more accessible to mobile devices, and the same for Braille devices.
Let's take a look now at how we might add CSS to our HTML content. Now what you're looking at here, you've seen before, at least the first item on the top left, we've seen that before, where we added a style to the pair of <div> tags, but also we're able to add styles by adding it in as a separate "stylesheet". [Video description begins] The host highlights: <link rel="stylesheet" href="style.css">. [Video description ends] Usually it will have an extension of .css.
So here in our <head> tags of the HTML document, we are linking a "stylesheet" called "style.css". So in this way, we can add that "style.css" template or, or style to all of the various web pages that we have in our website. Also, if you want it to have styles just specifically for one particular page, well, then you can add that style into the <head> tags of the HTML document. [Video description begins] Under the <title> tag, the host highlights: <style> body { background-color: linen; } </style>. [Video description ends]
As you can see here, we have a pair of <style> tags, and inside of that, we have a style that will affect just the body of this web page. So there are three ways, three main ways, of applying styles to your HTML documents.
