Before we get too far into the details, let's talk about where you stick your CSS.
CSS is all about separating content from presentation. Take me for example, my hotness is my presentation, or the CSS, my personality, is the content, the HTML. When you put together great content and great presentation you end up with a pretty bangin’ website, or this hotness.
First, the best practice way to add CSS to a web page is to create a separate CSS file, or an external stylesheet. Let’s take a look at the site directory on our desktop. Inside is an HTML file and a CSS file. If we open the HTML file in a browser we see it is just plain text. Let’s open the HTML file in a text editor. Ok, so what we have to do is add the stylesheet to the HTML file with this line, link—rel-stylesheet then, href—equals—the the CSS file path within the site directory.
Let’s go back and refresh the page. Since we linked the CSS file, now the browser applies the external CSS and the content is styled. This method works great because one file can be applied to many pages.
But, if you like it quick and dirty, there are two other ways to add CSS. First, is an inline style where you add the style directly to an HTML element in the page. Let’s add a background color of gray. Inline styles aren’t good because it forces you to edit each page individually to change the style. This is known as tight coupling, and let me tell you, as good as that sounds, it isn’t.
Second is an internal style. You stick this right in the page, inside the head element. You add the style tag and then some CSS. Let’s make the paragraphs bold, by adding a p then font-weight, bold.
This method is slightly better than inline styling, but you still have the same problems, it’s attached to one HTML file.
In conclusion, external stylesheets are good because they can be applied to many HTML files and on a more advanced level it helps make page loads faster because once the browser loads this file, it remembers it and doesn't have to download it again. This is called browser caching.
Next we’ll talk about properties, specifically color and size options, and it might be a little hotter in here, if you know what I mean.
Questions or Comments?