A Little Style with CSS

A Little Style with CSS1

Cascading Style Sheets are a stylish way to create an effective and unique web design. Headers, paragraphs, lists and links can be controlled by a main document for the entire site through Linked Style Sheets ,or applied to individual pages, Embedded Style Sheets, or to just a few tags, Inline Style Sheets. Creating special effects like over-sized headings, justified paragraphs, and shadowed text (without graphics)is now a designer's possibility. And since Cascading Style Sheets can be paired with JavaScript to create Dynamic HTML , it is well worth learning. This article offers a light tutorial on getting started with Embedded Styles that will soon have you styling the web.

The Basics

To set the layout of an entire page or more, designers will use Embedded Style Sheets to control a variety of tags. You can apply this, for example, to create all Headings in dark blue, paragraphs centered and justified, and links without underlines.

Style declarations are placed between the <Style > tag at the top of your document like so:

<HTML>
<HEAD>
<TITLE>Style Sheets</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>

To begin, we will set the Body properties of the document. Since the BGCOLOR, TEXT, and LINK color tags normally set within the BODY tag have been deprecated in HTML 4.0, these can now be defined instead in the HEAD of the document within the STYLE tags like so:

BODY {color: blue; background-color: black; font-family: Arial }

And our links without underlines will be set as follows:

A:link {color: blue; text-decoration: none; font-weight: ;bold }
A:visited {color: red; text-decoration: none; font-weight: bold }
A:active {color: green; text-decoration: none; font-weight: bold }

Now you can add extra dimensions (properties and values) to most every HTML Tag (selector). First defined within the Style tags, you will call for these style rules within the Body of your document.

For our first example, we will set our Heading 1 to 50pt; Verdana, red, centered; the paragraph is 13 pt. with 16pt. leading and justified.. Links are bold, without underlines. As well, we will also set the body background- color and text.

<HTML>
<Head>
<Title>Style</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY ;>
<H1>A New Style</H1>
<P>This is our new paragraph which includes a link back to <A Href="http://www.ppn.org/net98/index.html">PPN</A>
</Body>
</Html>

View Example 1

In the previous example, we have generic paragraphs and, therefore, each paragraph will have the same setting or appearance. To apply a different style to a specific paragaph or Heading tag, we can use the Class attribute. In our next example, we will apply a new set of rules to our paragraphs and Headings by naming the element , following it with a period and then a descriptive name describing its style. This H2 will be bold and have a black background, while our paragraph will be aligned left on a black background. In order to have the background color completely justified around the P we should add a border-width. For more information on background-color read the section at the Webreference DHTML series: Here is the code:

<HTML>
<Head>
<Title>Style</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
<H2 CLASS="bold">A Bit of Style</H2>
<P Class="black"> In our second example, we have added a newly formatted paragraph that has a specific style which will only be used occasionally in our document . As well, we have stretched the background-color to display completely around the Paragaph.</P>
</BODY>
</HTML>

To view the results, go here.View Example 2

For our next example, we are going to use Absolute Positioning to create a headline with a shadow effect. We can choose the top and left position of our first headline, position it on the screen or canvas and then create a second headline which will be offset by a few pixels from the first to create some depth or a shadow. To create even more depth, we can offset the second even more or add a third headline. We will be using ID which is assigned a single or specific instance of a tag in a document. This is coded as follows:

<HTML>
<Head>
<Title>Style</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>
<Div ID="header1">Style Tips</DIV>
<Div ID="header2">Style Tips</DIV>
</BODY>
</HTML>

To view the results, go here.View Example 3

The above examples are just a few of the many features to Cascading Style Sheets. To get a first-rate view of Style possiblities, readers can visit the Microsoft CSS Gallery for some exciting designs. For more-in-depth articles, visit Builder.Com and try their online Style-O-Matic tool for instant results or read Web Review's Style Reference Guide for some of the most up-to-date reference material, articles and reviews.

J. Mick
Copyright 1998. No reproduction without permission.

Back to Style Index