In Style:

In Style:
Cascading Style Sheets
CSS in Under a Minute

Using CSS you can apply different attributes to every tag you use in your pages. These attributes are expressed in "rules"; a rule is made up of a selector (the tag to which it applies) and a declaration (the attributes to be applied). For example, if we wanted to set your <p> tags to display 12-point Ms Sans Serif with a yellow background, we would create the following rule:

P { font-family: "ms sans serif";

font-size: 12pt; background-color: yellow; }

In the above rule, P is the selector -- the HTML tag to which the style attributes will be applied. Curly braces mark the start and end of the style declaration that apply to the selector. It's important to remember to separate each declaration with a semicolon.

Let's start with a basic HTML file.

<html>

<head>

<title>Welcome to my Web Page</title>

</head>

<body>

<h1>Welcome to my Web Page</h1>

<p>Today I'm going to learn CSS</p>

</body>

</html>

Now let's add some style! We'll change the attributes of the <H1> tag for our header and <p> for our page content by inserting the following code into the <HEAD> of our HTML document.

<STYLE TYPE="text/css"><!--

P { font-family: "ms sans serif";

font-size: 12pt;

background-color: yellow; }

H1 { font-family: "impact, arial";

font-size: 35pt;

color: blue; }

--></STYLE>

In Style:
Cascading Style Sheets
Using Class as a Selector

Being able to attach attributes to specific tags can be useful, but if you're like most people you probably don't think of your pages in terms of where the <H1> and <P> tags are. You probably break the page down into content areas such as "header," "content," "nav bar," etc. CSS makes it easy to assign a style to a specific area by using classes. Classes let you identify a content area regardless of the tags used to create it and assign a style to it. For example, a <p> tag with header class would look like this:

<p class="header">This is the header</p>

You can define rules for classes just as easy as for regular tags except classes always start with a period. Here's an example of a class declaration.

.header { font-family: "ms sans serif";

font-size: 24pt; }

.content { font-family: "arial";

font-size: 12pt;

color: blue; }

This makes it easy to set up a CSS definition that defines the style for the various elements in your page without having to hard-code each one. It's easier, saves time, and makes for smaller HTML files.

In Style:
Cascading Style Sheets
Different Ways of Adding CSS

CSS lets you add styles to your pages in several ways. As we saw above, you can use the <STYLE> tag to add your style declarations at the top of each individual page. This is great when you only want to modify one page but a better solution is to put all your style declarations in an external file and link to them from your Web page. This way you can update your your entire Web site by modifying just one file. Using the first example we could create a style sheet file named "styles.css":

P { font-family: "ms sans serif";

font-size: 12pt;

background-color: yellow; }

H1 { font-family: "impact";

font-size: 35pt;

color: blue; }

and link to it by inserting the following within the <HEAD> of your Web page.

<HEAD>

<TITLE>Page Title</TITLE>

</HEAD>

Finally, if you want to apply a style declaration to just a single HTML element, you can do that too. Here's an example.

<font face="arial" style="background-color: yellow;

font-size: 16pt;">

Inline Style Declaration

</font>