More Style Tips
By J. Mick
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
Style declarations are placed between the <Style > tag at the top of your document like so:
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:
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.
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:
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:
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.
Back to Style Index