How to Use CSS - An Overview

Here's how to use CSS in your web pages.

First of all, you are reading this page because you already have some experience with HTML or, at the very least, you know what HTML elements are. If not then you should read my tutorials on Basic HTML.

Alright then, assuming that you've got a web page or two up and running, the deal now is you want to jazz up your act with some fancy CSS tricks, right? Well here's how to do it...

Essentially, CSS is applied to the HTML elements in your web pages and you can do this using any of three different methods:

Inline Styles ~ This applies CSS directly to each individual HTML element on your web page using the style attribute. This is the easiest CSS to learn and visualize. It's also handy for quickly testing out CSS properties you're not familiar with or for applying styles that you're not likely to repeat elsewhere.
Embedded Style Sheets ~ This applies CSS to the current page. It primarily consists of a list of CSS rule sets placed between a set of <style>...</style> tags which themselves are inserted in between the <head>...</head> tags of your web page. Here the real power of CSS starts to come in to play as you can apply the same styles to multiple HTML elements at once on the current page.
External Style Sheets ~ This is a list of CSS rule sets that are stored in an external file that carries the .css extension. It applies styling to all web pages that are linked to it using the link element in the <head>...</head> tags. This is the most powerful form of CSS as a single .css file can control the formatting of many web pages at once.

Any one or all three of the above methods can be applied to the same web page at the same time. Each method not only defines a manner of applying CSS but also carries with it a certain precedence which gives web authors some control over which style applies when more than one method targets the same HTML element.

Generally speaking, this CSS pecking order can be described as follows:

Inline styles are the boss ~ When more than one method applies to the same HTML element, the inline style wins and its style rules are applied to the HTML element.
Embedded style sheets are second in command ~ When no inline style exists for any particular HTML element, rule sets in the embedded style sheet which target that HTML element are applied.
External style sheets come up the rear ~ In the absence of any inline styles or rule sets in an embedded style sheet for any particular HTML element, rule sets in an external style sheet which target that HTML element are applied.

The precedence of each method thus 'cascades' down through this pecking order and hence you have Cascading Style Sheets.

* * *

Now let's get down to the nitty-gritty and start actually applying some CSS to your web page. We'll begin with a complete rundown on using inline styles...

Best Free Stuff
for webmasters

Free Text Editors
Free Graphics Editors
Website Analysis Tools
Free Website Templates