Style Sheet Methods

There are three ways to use CSS. You can declare the styles in a separate css file, in the header of your HTML document, or in the element that you working with. What is the best way? There really is not one way that is better than the other. Most of the time it is based on personal preference. There are suggestions that designers use, and reasons why designers choose one way over the other.

When you have a style that is going to be used on multiple pages, like for a template for example. You should create a separate css file for the styles. This will make for sure that each HTML element has the same style on each page. This also makes changing the template very easy. You only have to make the change in one location rather then multiple locations. When using an external style sheet, you have to declare so in the header of you HTML document. To do this you have to use the link element. Below is an example of that element.

<link rel="stylesheet" type="text/css" href="style.css" />

This tells the HTML document where to reference the style sheet, declares it's type, and defines it's relationship with the HTML document.

There are times that you may have a style that you only want to apply to one page. If this is the case, then you may want to create a style just for that HTML document. An example of this maybe if you are creating a FAQs page, and you want to make a list of FAQs. This is the only place on your site that you will need to use a style for the list of FAQs. You can then create a style for the list in the page's header file. To do this you will use the style element inside of the header of the HTML document.

<style>
li {
 color: blue;
 font-size: 14px;
}
</style>

By using a style sheet in the header of your page, you allow your external style sheet to become smaller. This helps with users with a slower Internet connection, since they do not have to load all of the unused styles each time the they navigate to a new page.

The last way to change the style of an element is by using the style attribute inside of the HTML element itself. This if useful if you want to align an element, change the color for the element, or something similar. This also process also makes your code a little harder to read it you are not use to it. Below is an example of how to use this method.

<span style="color: red">This is red text</span>