So, you are sold on using CSS to style your HTML elements? First, we need to figure out how to tell the browser we are using CSS. We can do this by referencing the CSS as a separate file or we can place it inside our HTML document.

Referencing a Cascading Style Sheet

There are three ways to define CSS:

• Inline/element Styling (Not so great)
• Internal Style Sheet (Not bad)
• External Style Sheet (The best way)

Inline or Element Styling

Inline/element styles are the worst because if you ever want to change a style later, you will have to drill down through your HTML to find the element and change its style tag. Please don't do this unless you never want to change that element later.

Example

<p style="color:#900;">Sample Styled Text</p>

Result

Internal Style Sheet

The reason I am not too fond of this way to utilize CSS is that it doesn't permit other HTML files to use it. Yes, it still does permit you to change multiple items in a class, but why not just make it to where all HTML pages can use that class? However, if you argue that it might crowd your external style sheets, I completely understand. Just make sure that your internal styles aren't going to be repeated somewhere else.

Example

<style type="text/css">
p.special_p {
color:#900;
}
</style>
<p class="special_p">Sample Styled Text</p>

Result

External Style Sheets

Take everything from the p.special_p to the '}' and put it into its own separate file with an extension of .css to declare it as a CSS file. We can reference this file to do exactly what happened above, but now we can use the class="special_p" in every new HTML document we create. All of those new files with a paragraph tag that has that specific class will be colored red. Linking to the file is really easy. Somewhere toward the bottom of your HTML head tag, put the following:

Example

 <a rel="stylesheet" type="text/css" href="mystyle.css" media="screen"/>

A few of these are standard for referencing a style sheet. The rel attribute will always be set to "stylesheet" and type will always be set to "text/css". The href will be the set to the path to your stylesheet. Finally, the media tag is the most complicated. It is most often set to screen because that is a reference to the computer's screen. However, there a couple other references, such as "print" for whenever users try to print your page, "handheld" for phones, etc. Can we finally learn some CSS? Of course!