What Style Is

Style refers to those properties of the document, which format it, such as color, margins, fonts, etc.

There are two ways of formatting a document:

Html provides many formatting attributes, e.g. align, color, bgcolor, leftmargin, topmargin, marginwidth and marginheight. Some are available for some tags; some for others. I still use some of these html attributes. However, I find it difficult to remember which attributes go with which tags.

It seems easier to use the CSS method of styling. Virtually all the CSS properties can be used with virtually all the html tags.

There are two ways to use CSS properties.

  1. The "style" attribute is useful when you wish to use a given style occasionally.
  2. The <style> tags permit you to compose style sheets. Style sheets are a better choice when you wish to adjust the styling of an entire webpage. Style sheets can be placed in the head of the document, or can reside in an external file.

Some CSS Properties

The following table lists many of the CSS properties. The "Style Property Name" is the name to use when setting the style attribute. The "DOM Property Name" is used by javascript and dynamic html to change the Document Object Model (DOM), i.e. to change style properties already set.

Style
Property Name
DOM
Property Name
Values Default Value Remarks
color color color names or units #hxhxhx or rgb(w,w,w) black text color
background-color backgroundColor color names or units #hxhxhx or rgb(w,w,w) white background color
font-family fontFamily a list of families; uses first available whatever .
font-style fontStyle normal, italic, oblique normal .
font-weight fontWeight lighter, normal, bold normal .
font-size fontSize in px, %, or small, medium, large, etc. medium .
text-decoration textDecoration underline, overline, line-through, none none Often used to remove underlines from links.
text-transform textTransform capitalize, uppercase, lowercase as written .
text-align textAlign left, right, center, justify left Centers text and images within their containing blocks.
text-indent textIndent in px or % no indent indents 1st line
line-height lineHeight normal, number, height, % normal Space between lines
letter-spacing letterSpacing normal,length normal Space between letters
word-spacing wordSpacing normal, length normal Space between words
vertical-align verticalAlign baseline, sub, super, top, middle, bottom
text-top, text-bottom
baseline relative to baseline
visibility visibility visible, hidden visible hidden text takes up space, unlike display:none
display display none, " ", block, inline, list-item " " changes display mode
margin-top
margin-right
margin-bottom
margin-left
marginTop
marginRight
marginBottom
marginLeft
px, pt auto Refers to the margin of an element, not the page.
position position relative, absolute, fixed, static static Establish position rule
top top length or % 0 Establish vertical position
bottom bottom length or % 0
left left length or % 0 Establish horizontal position
right right length or % 0
float float left, right, none none
clear clear left, right, both, none Clear elements from stated side.
overflow overflow visible,hidden,auto,scroll visible
height height length,% auto auto = calc'd by browser
width width length,% auto auto = calc'd by browser
padding px none within a cell, analogous to margins
border-style borderStyle hidden, solid, double, dotted, dashed, inset, outset, groove, ridge hidden .
border-width borderWidth thin, medium, thick, or px medium .
border-color borderColor color names or units #hxhxhx or rgb(w,w,w) black or shades of gray .
cursor cursor auto, crosshair, default,
pointer (a hand),
move,
e-resize, w-resize,
n-resize, s-resize,
ne-resize, nw-resize,
se-resize, sw-resize,
text, wait, help
default
list-style-type listStyleType none, etc. "none" removes list item markers
list-style-image listStyleImage none, url('filename') uses an image as the list item marker
list-style-position listStylePosition inside, outside outside "inside" indents the list a bit more
z-index zIndex a positioning property

Notes:

For a more complete list of CSS Properties see:

Setting Style with the Style Attribute

The style attribute was introduced in the section on Core Attributes. It can be applied to any html element.

In the following example, the style attribute is used to change a paragraph tag. The CSS code is highlighted in yellow. Any of the CSS style properties listed in the table above could have been used instead.

<p style="font-size:150%">
 This is a paragraph, whose font size is 150% larger than normal.  
</p>

This is a paragraph, whose font size is 150% larger than normal.

The style attribute can be used to change numerous style properties at one time. The style attribute is used only once, but is given multiple property:value combinations. The property:value combinations must be separated by semicolons.

Note: This differs from the punctuation for multiple attributes, where nothing but a space is used to separate the attributes.
<p style="color:blue; background-color:white; border:solid; 
 font-weight:bold; padding:10px">
 This is a paragraph, with blue text, white background, a solid border, 
 a bold font weight, and padding (space) around the text.
</p>

This is a paragraph, with blue text, white background, a solid border, a bold font weight, and padding (space) around the text.

Setting Style with the Style Sheet

Where to Place the Style Sheet

A style sheet is a list of style declarations that applies to the entire document. There are two ways to apply a style sheet to a document:

  1. Internal -- The style sheet can be placed in the head of the document between the <style> and </style> tags. When this is done, the "type" attribute is used within the opening style tag to tell the browser that we are using CSS.
    <style type="text/css">
     ...style sheet goes here... 
    </style>
  2. External -- The style sheet can be placed in a separate file with the extension ".css". This"style file" is called by a <link> tag in the head of the document.
    <link rel="stylesheet" type="text/css" href="blue2.css"> 
    
    There is no closing link tag.

Notice that the rel="stylesheet" statement in the link tag takes the place of the <style> tags in the internal style sheet.

Since the internal style sheet goes in the head of the document, it is a good choice for webpages of only one file. On the other hand, numerous html files may call the external style file. Then when changes in style need be made, only one file must be changed.

Contents of the Style Sheet

The style sheet is a list of style declarations. The syntax of a style declaration is thus:

entity,entity{property:value; property:value; property:value}
The entity (or entities) whose style is to be set is listed. It is followed by curly braces containing the style property:value combinations. The property:value combinations must be separated by semicolons.

Setting the Style of Elements

This example shows how the style of the elements for this page was set. The entire style sheet is CSS code; hence it is highlighted in yellow.

body{color     :#000000;
   background  :#d9e9ff;
   font-family :sans serif, arial;
   margin-left :40pt;
   margin-right:40pt
  }
h1,h2,h3,h4,h5,h6{font-family:sans serif, arial;
                color    :#0000ff;
                background:#ffffff;
                text-align:left
               }	
dt{font-weight:bold}
Setting the Style of Classes
Styles can be applied to classes as well as elements. The class is denoted with a . (a period).
div.caption{font-weight:bold; text-align:center}

.box{border-style:groove; padding:20px}
The code div.caption defines "caption" as a class of the <div> element.

The code .box defines "box" as a class which can be used with any element.

Setting Style with Id's
Styles can be applied not only to specific classes of elements, but to elements with specific id's. In this case, the style applies only to the first instance of that id (or element#id combination) on the page. They are thus useful for layout.

In the style sheet, id's are marked with a #, as follows:

#top   { position:absolute;top:0px; left:0px;  width:800px; height:80px; }
#menu  { position:absolute;top:80px; left:0px;  width:100px; overflow:hidden; }
#content{position:absolute;top:80px; left:100px;width:700px;} 
These can be made more specific by stating the element which is to be labeled with the id.
div#top   { position:absolute;top:0px; left:0px;  width:800px; height:80px; }
div#menu  { position:absolute;top:80px; left:0px;  width:100px; overflow:hidden; }
div#content{position:absolute;top:80px; left:100px;width:700px;} 
Setting the Style of Pseudo Classes
A few pseudoclasses are defined as part of the html specification. Thus "link", "visited", "hover", and "active" are pseudoclasses of the <a> element. They describe different states of the anchor object. Styles can be set for each state as follows.
a:link    { color: blue;   font-weight:bold}
a:visited { color: purple; font-weight:bold}
a:hover   { color: red;    font-weight:bold }
a:active  { color: red;    font-weight:bold }
The pseudoclass declarations must be made in this order to be effective.

Copyright July 2005, 2006 by Nancy E. Knox

Valid HTML 4.01 Transitional