External, Internal and Inline CSS Styles

There are three different ways we can implement styles into our web pages - inline styles, internal stylesheets, and external stylesheets.

Inline styles

Inline styles are the least flexible type of style to implement. They also break the cardinal rule of never using HTML to add style to your pages. You can apply inline styles to any tag, for example:

<p style="color: red">
Paragraph text goes in here
</p>

This code will color the paragraph text red. However, you would be much better off separating this style into a stylesheet and then just assigning the paragraph tag a relevant attribute, such as <p class="red">.

From this example it should be clear that inline styles are far from ideal. They are essentially no different from the old way of affecting style using HTML code, and it suffers the same major drawback - that if you wanted to change the style properties, you would have to edit each and every instance of the style on every single page of your website. Therefore inline styles should be avoided at all costs.

Internal stylesheets

With internal stylesheets, a web page's styles are all specified at the top of the page code, within the <head> tag for the page. For example you might use the following code to specify properties for your <h1> and <p> tags:

<head>

<style type="text/css">
h1 {color: blue; font-weight: bold}
p {color: gray}
</style>

</head>

You could then apply these styles to any text within your page, and they will all take on the appearance specified. The problem with this type of style is that you still need to declare all of your styles on every single page of your website. Again, this makes it very time-consuming to make large-scale changes to multiple web pages.

External stylesheets

External stylesheets are really the holy grail of styles. They allow you to put all of your styling information into a completely separate CSS file. You can then simply reference this file from within each web page, and the page's content will then be styled accordingly. The obvious huge advantage of this method is that you need only change a style in your stylesheet file, and the changes will cascade through the rest of your website.

CSS files can be creating using any text editor, in much the same way as you would create an HTML file. The only difference is you must save the file with the .css extension. Your stylesheet can contain as many style declarations as you want, written in the form we have already discussed (don't worry about the fact that we haven't covered many specific examples of style properties, we'll come to those soon).

To include an external stylesheet in one of your web pages you need to add a <link> tag within the <head> tag of your page. The following example would link to a stylesheet called stylesheet.css:

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

You would then mark up your HTML as normal with tags such as <p> and <h1>, and the stylesheet will provide the styles.

It should be clear that external stylesheets offer the most in terms of flexibility and ease of use, and they also provide the fullest separation of HTML and CSS of all three options. You should always use external stylesheets unless you have a very good reason not to.