Introduction to CSS Part 3: How to use CSS

Introduction to...

Cascading Style Sheets

How to Use CSS

ť Inline

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.

<font style="color: red; font-size: 13px; font-weight: bold; text-indent: 15px;">

The above style rule is the same style that I use to show code examples throughout this site. It's a simple <font> tag with a style rule added. If you used it inline as shown in the example, to cancel the style rule you only need to code the </font> 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 another font 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. You can learn some of them from the CSS Reference Chart on this site.

ť Embedded

Embedded styles are coded into the <HEAD> section of the page, between a style declaration tag and style closing tag. Unlike inline style rules where you have to code a style into each HTML element, embedded style 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: 12px; margin-left: 30px;}
p   {border-left: solid red 1px; padding-left: 5px;}
</style>

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

Each time you used a division tag (<div>) on a page with that style rule, the text within that division would be shown in the Arial font at 12 pixels high.
The division would have a margin of 30 pixels on the left side. That's how I indent code examples.
Each time you used a paragraph tag (<p>) there would be a 1 pixel thick solid red line on the left border.
There would be 5 pixels of padding between the red line and the text.

In other words, if you used a paragraph like that within a division like that, it would look like this paragraph of text.

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 > signs. 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 make a habit of always including the semi-colon, there's less of a chance you'll leave one out where it's needed as a rules separator.

ť Linked

A linked 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 extension, 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> declarations. 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 this 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. 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 linked style sheet, try this one saved as a text file (because not everyone will have a program associated to read .css files). You could save that file with a .css extension and link to it, and it would control the HTML elements that have rules on all the pages you link to it from.

This concludes the introduction to CSS. You may want to re-read it a time or two to solidify your understanding of the basics of CSS. After that, it's just a matter of applying various style rules to the HTML elements you wish to effect.

For a chart of various CSS selectors and values, you may want to purchase the latest edition my web design book, which includes a CSS reference chart and a complete chapter on CSS; or you may want to join my members-only site for the handy CSS reference chart and more css tutorials, as well as many online utilities such as my colored scrollbar code generator; along with freebies, software discounts, and much more.

Back | CSS Tutorials Index

Web Design

Site Information

More Boogie Jack Sites

Introduction to...

Cascading Style Sheets

How to Use CSS