Style

A web developer today will use HTML for layout and styles for design. Styles provide tools to determine how each HTML tag will display and provides the ability to create custom styles that can be used anywhere in the document.

Styles provide precise measurements when placing information in a document. Styles can control how content, including blocks of text, images and sections of documents, are displayed on the page.

XHTML depends on Cascading Style Sheets (CSS) to format documents. Previously designers had limited ability to format documents. For example they had to rely on the <font> tag to change the look of text. If a designer wanted to change the 'look' of the web site they would have to change each tag in each document. Using CSS allows designers to create a template document or stylesheets with attributes that can be applied to HTML documents. The HTML tags then inherit their attributes from this document. This allows consistency across multiple documents on a website. It also allows designers to quickly change the look of the site by making changes to the stylesheet. These changes will immediately be applied to all the documents which use that style sheet.

They are referred to as "cascading" because of the way that they interact with other styles. Stylesheets are applied to a document in three ways. First, they can be attached to a document using a <link> tag. Second, they can be embedded in a document with a <style> </style> tag. Third, they can be applied to a specific tag by adding the styles attribute to that tag. Conflicts are handled by deferring to the closest style to the object. Styles applied to tags override embedded styles which override linked stylesheets. This way you can define a style in a stylesheet to be applied to many pages with the <link /> tag; redefine that style to be applied to the entire page with the <style> element and then change it again directly in the tag using the style attribute. For example all the paragraphs could be defined blue then on a single page all the paragraphs could be green and in one paragragh they could be red.

Stylesheets are plain text document containing the styles definitions that will be applied to the document. A stylesheet filename ends with a .css extension. A stylesheet is attached in the head section of a document.

Example:
<link rel="stylesheet" href="style1.css" type="text/css" />

The <style> tag can be embedded directly into the head of a document.

Example:
<style type="text/css">
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11pt;}
</style>

The style attribute can be added to any tag.

Example:

<p style="font-size: 10pt;"></p>

Styles contain formatting, positioning, padding, margin, border and other information to control the design of the document.

Applying a style to an HTML tag defines how that tag will display. For instance if the <p> tag has a style of "font-size: 10pt" every document that uses that style would display all paragraph text in a 10 point font size.

They can also be used to create new and unique specialized or custom tags which can be used to modify information throughout the site. For example a style could be created that would bold, italics, and change the font colour to green. This styles can then be applied to tags using the class attribute.

Example: In your style sheet create the 'bigrn' style:
.bigrn { font-style: italic; font-weight: bold; color: #006600; }
Then apply that style to a tag using the class attribute:
<p class="bigrn">Bold, italic and green text</p>
(note that a custom style begins with a dot)

Some very old browsers don't display styles properly. If an older browser encounters a style that it can't display it will ignore the styles and display the page using the default HTML definitions.

Not all browsers implement styles in the same way so it is a good idea to test your styles in a variety of browsers.

Stylesheet Example:
h1 { font-family: Arial, Helvetica, sans-serif;}
h3 { font-family: Arial, Helvetica, sans-serif; color: #005931;}
a :link { font-family: Arial, Helvetica, sans-serif; color: #007B53; text-decoration: none;}
a :visited { font-family: Arial, Helvetica, sans-serif; color: #990033; text-decoration: none;}
a :active { font-family: Arial, Helvetica, sans-serif; color: #FF6600; text-decoration: none;}
a :hover { font-family: Arial, Helvetica, sans-serif; color: #333399; font-weight: bold; text-decoration: none;}
p { font-family: Arial, Helvetica, sans-serif; font-size: 12pt;}
.sml { font-family: Arial, Helvetica, sans-serif; font-size: 10pt}
.tny { font-family: Arial, Helvetica, sans-serif; font-size: 8pt}

A good manual or reference is required to use styles effectively. Below is an alphabetical list of a few styles and their values:

color

RGB, hexadecimal, named

background

color
image : url
repeat : repeat-x, repeat-y, no-repeat
position : left, center, right, top, bottom, length, percent
attachment : fixed, scroll

border

type, size, color

clear

left, right, both

clip

rect(t, r, b, l), auto

cursor

pointer, crosshair, move, e-resize, ne-resize, nw-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, progress

float

left, right, none

list-style

type : disc, circle, square, decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman, lower-roman, none
image : url()
position : inside, outside

margin

top, right, bottom, left (remember TRouBLe)

media

print, screen, projection, handheld, aural, braille, embossed, tv, tty

overflow

visible, hidden scroll, auto

padding

px, pt, in, mm, cm, em, en, %

position

static, relative, absolute, fixed
top, right, bottom, left

text-align

left, center, right, justify

text-decoration

none, underline, overhang, line-through, blink

text-direction

ltr, rtl

text-transformation

uppercase, lowercase, capitalize, none

vertical-align

baseline, sub, super, top, text-top, middle, bottom, text-bottom

visibility

visible, hidden, collapse

white-space

normal, nowrap, pre, pre-wrap, pre-line

word-spacing

px, pt, in, mm, cm, em, en, %

z-index

int

 

Correction form

Enter the error in this field
Enter the correction in this field