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.
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:
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.
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:
<style type="text/css">...style sheet goes here...</style>
<link rel="stylesheet" type="text/css" href="blue2.css">
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.
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.
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}
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.
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;}
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