Cascading Style Sheets For Beginners

Cascading Style Sheets or CSS gives the web designer more precise control over page details such as font point sizes, font attributes (italics, underline, etc), page margins, colours, spacing, positioning, visibility, and many others. This is an improvement over previously favoured HTML coding.

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 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; }
Here, the HTML tag P (for Paragraph) is the selector to which the style attributes will be applied. Curly brackets mark the start and end of the style declaration. You have to separate each declaration with a semi-colon.

In the basic HTML structure of a web page, CSS attributes for various HTML tags of general application can be declared in the <Head> section of the web page, usually under the Title and other meta tags as follows:
<STYLE TYPE="text/css">  </STYLE>

CSS also makes it easy to assign a style to a specific area of a web page 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 easily as for regular tags except classes always start with a period. The following is 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 advantage allows you to set up a CSS definition that defines the style for the various elements in your web page without having to hard-code each one in HTML code.

Another way is to put all your style declarations in an external file and link to them from your individual Web pages. This way you can update your entire Web site by modifying just one file.

You can create the same style declarations above by creating a style sheet file named "styles.css" which contains the following:

P { font-family: "ms sans serif" font-size: 12pt; background-color: yellow; }
H1 { font-family: "impact" font-size: 35pt; color: blue; }

Then link to this external file (placed in the same directory) by inserting the following reference within the <HEAD> portion of your web page:

<HEAD>
<TITLE>Web Site Design</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="styles.css">
</HEAD>

On the other hand, if you want to apply a style declaration to just a single HTML element, you can do that too, with an inline style declaration like so:

<font face="arial" style="background-color: yellow; font-size: 16pt;"> custom web design for you </font>

To summarize, the simplest way to use CSS is to apply them to existing HTML tags. You can do this by declaring a style inside the <HEAD> portion of the web page. If you want the style declarations to apply throughout your web site, then create an external style sheet file called "style.css" and link to it as discussed before. If you want the style declaration to apply only to a single eleement of a web page, then use the inline style declaration format above.

CSS Fundamentals