Jan's Cascading Style Sheets

The purpose of Cascading Stylesheets (CSS) is to make it easier to format your HTML pages consistently across your whole site.

Styles created with CSS work much like styles in word processing documents. A style is a named collection of font characteristics (like size, color, font-family, and weight) and also display properties (like alignment, margins, background, borders, and position). By changing a style's definition, all elements which use that style are automatically changed, too. Change once, update everywhere!

[These pages assume that you are familiar with the basics of writing HTML pages.]

Every browser has default styles for standard HTML elements like headings, paragraphs, and lists. You define styles to change those defaults. These pages will not try to show all of the properties that you can change. There are far too many of them!

Three Ways to Define a Style:

External linked style sheet <link>
Linked stylesheets demo.css and home.css (which are used by pages in this set of lessons) with the LINK in the HEAD of the page:
<head>
<link rel="stylesheet" type="text/css" href="../../home.css">
<link rel="stylesheet" href="demo.css" type="text/css">
</head>
Internal style sheet that is embedded in the HEAD of the page <style>...</style>:
<head>
<style type="text/css">
/*Example of a class*/
.example {background-color:azure;
font-family:Georgia, "Times New Roman", Times, serif;
width:300px;}

/*Example of a tag selector*/
h3 {text-align:center;}

</style>
</head>
Inline in a style attribute of an HTML tag. <...style="...">.
To format an expression like inline style , use SPAN tag with a style:

<span style="color:azure;background-color:darkgreen;">inline style</span>

Only a linked style sheet allows the global changes that are the power of CSS.

More on proper syntax on the next page, Terms and Syntax.

Home > Resources & Examples > Jan's CSS

Previous Next