How to Use Inline, Embedded, and External CSS

As explained in the previous two parts of this tutorial series, there are three ways to implement CSS in your web design. The how-to of it is explained below. Any and all methods can be used on a web page, but there are "best use" practices that, if you follow them, will prove to be the most efficient for you. These best uses are as follows:

Inline Styles: Inline styles are best used sparingly. Use them where you want to override a style coded into your external or embedded styles. Also use them when you want a quick change where the style isn't going to be needed often.
Embedded Styles: Embedded styles are best used where you will be using the styles repeatedly on one page, but those styles aren't needed for most of your site.
External Styles: External styles are best used to define styles that will be used repeatedly across many pages of your web site. This allows you to make a change to the external style sheet and have that change reflected on all the pages that draw their styles from it.

Following those guidelines will help you make the most of using CSS. Here's how each of those styles are implemented:

Inline Styles

Using inline CSS is very much like coding an attribute and value into an HTML tag. Here's an example of an inline style rule.

<pre style="color: red; margin-left: 17px;">

The above style rule is the same style I used to show code examples, only I don't use it inline (so I don't have to repeat it each time I want to show a code example). It's a simple <pre> tag with a style rule added. To cancel that style rule, use the </pre> just as you know from standard HTML.

Using inline CSS only affects the HTML element that it's coded into. If you wanted to repeat that style at another place on your page, you'd have to code that style into each use of the element, in this case, another <pre> tag.

There are a multitude of different things you can do with CSS, it's just a matter of learning what the options are and how to code them. I have 31 different HTML and CSS reference charts in my members area and demonstrate dozens of different CSS uses there. It's the one place where it's all put together for you in plain English.

Embedded Styles

Embedded styles are placed in the HEAD section of a web page, placed between style declaration opening and closing tags. Unlike inline style rules where you have to code a style into each HTML element, embedded rules affect every usage of an HTML element on the page where it's embedded. Here's a example:

<style type="text/css">
div {font-family: Arial; font-size: 14px; margin-left: 30px;}
p   {border-left: 1px dotted gray;}
</style>

If the above style rules were placed in the HEAD section of a web page's source code, here's how it would affect the page display:

Each time you used a division tag (<div>) on the page the text within that division would be shown in the Arial font at 14 pixels high. The division would also have a margin of 30 pixels on the left side. Using the margin-left property is how I indent code examples.
Each time you used a paragraph tag (<p>) there would be a 1 pixel thick dotted gray line on the left side of the paragraph space.

You probably noticed that the formatting of style rules differs from HTML. Good job! Let's look a little closer at that.

As you know, HTML elements are enclosed between the < and > brackets. Confusion would abound for webmasters and browser programmers alike if CSS also used arrow brackets. Therefore, the opening <style type="text/css"> and closing </style> tags identify the code in between as CSS code.

The selector (the HTML element you wish to create a rule for) is listed without any brackets since it's already enclosed between the opening and closing style declaration. The selector is then followed by curly braces { ... } that enclose the property and value, which is the rule for the chosen selector.

The property and value are separated by a colon and space. Example:

color: red;

The semi-colon signals the end of a rule. Because each selector can have more than one rule, the semi-colon also serves as a rules separator. Example:

color: red; background-color: black; font-size: 18px;

You should always include the semi-colon after a rule, even if you're only creating one rule. Truth is, a single rule will work most of the time if you forget the semi-colon, but results can be unpredictable in some instances. It's also a good habit. If you always include the semi-colon for single rules, there's less of a chance you'll leave one out where it's needed as a rules separator when you create multiple rules for one selector.

External Styles

An external style sheet contains the style rules you create, saved in a plain text file, but with a .css file extension instead of a .txt file extension. To save a file with a .css extention, in most text editors you can simply place quotation marks around your file name as you save it. Example:

"MyStyles.css"

The contents of your linked style sheet is the same as you would place in an embedded style, minus the opening <style type="text/css"> and closing </style> tags. These are not needed because the browser knows it's a style sheet from the link to the style sheet.

To link to a style sheet, place the following line of code in the HEAD section of your page:

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

There is no closing tag for this link. To make the code XHTML compliant, I closed the tag with a space and forward slash just before the right arrow bracket. You needn't do that if you don't care if your pages are XHTML compliant.

Where I have css/sitewide.css, you'd change that to reflect the path to and name of your own style sheet. To see a real example of a simple external style sheet, try this one saved as a text file. You could save that file with a .css extension and link to it, and it would control the HTML elements that have rules created for them on all the pages you link to it from.

This tutorial continues...

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]