Web Site Building · Advanced Topics · Cascading Style Sheets 2

What this is about:

CSS, or Cascading Style Sheets, is a technology that gives site builders enhanced control over the look of elements on a web page. Objects once considered unchangeable, such as the underline beneath links, the color of form elements, the spacing between text, and more, can now all be altered, thanks to CSS. Before proceeding with this tutorial, it is recommended you have a firm understanding of HTML tags, elements, and properties.

Incorporating CSS Into Your Web Pages

Cascading Style Sheets Style sheets allow you to adjust the traits that define how text, tagged with a given HTML element, is displayed. Say, for example, you wanted your normal paragraphs — those defined by the <P> tag — to be rendered in a bold, navy, 12-point Arial or Helvetica font. Here's how the Cascading Style Sheet (CSS) definition for that would look:

p {
font-family: Arial, Helvetica;
font-weight: bold;
font-size: 12pt;
color: navy;
}

The <STYLE> element, as defined by the <STYLE> and </STYLE> tags, allows you to incorporate CSS style-specification information into an HTML document. This element goes in the <HEAD> section of your document and here is what it looks like:

You can use CSS to define the characteristics associated with multiple tags at once. Nothing to it, really. Just list the tags to be defined, separated by commas, at the beginning of the definition block. Notice the H1 and H2 definitions.

Here is what it looks like.

Defining An External Style Sheet

It's sometimes handy to isolate your styles in a separate file, particularly if you have a lot of them. This approach makes it relatively easy to standardize the appearance of your web pages site-wide. To create a CSS file, just type the style definitions in a separate document, making sure you type only the style definitions, not the <STYLE> tags or anything else. Save the file with an extension of .css. For example, yourcssfile.css.

The trick to referring to an external CSS is this line:

<LINK REL=STYLESHEET TYPE="text/css" HREF="yourcssfile.css">

The <LINK> tag provides a connection between the document being displayed and the external file. You can put a complete URL in the quotes following the HREF attribute — this example assumes the file is in the same directory as the document that refers to it.

Here's a trick that makes it easy to apply a style to any passage of code you like. Define a style class that looks like this:

Put them to use by applying them in an HTML document. Here is an example:

<html>
<head>
<title>CSS Style Classes</title>
<STYLE TYPE="text/css">
.blue {color:blue}
.brown {color:brown}
</STYLE>
</head>

<body>
<P>This document illustrates style classes.

<SPAN CLASS=blue>
<P>Am I blue?
</SPAN>

<P>Mud is <SPAN CLASS=brown>brown</SPAN>.

</body>
</html>

Use your favorite search engine to find more about Cascading Style Sheets. Has this tutorial been helpful to you? Please let us know with the email link below. Thanks for selecting Internet Brothers as your choice for web page tutorials.

Return to Cascading Style Sheets Page 1.