• Font Properties
• Color and Background Properties
• Text Properties
• Classification Properties
• Border Parameters
• Margin Parameters
• Padding Parameters
• Other Parameters

Cascading Style Sheets are used to set the appearance of many different aspects of a web page, without setting them in each individual element. Provided below are different stylesheet operations, and their respective options. At the end of the article there will also be a number of different examples.

Following is a basic example of how to insert a CSS style for an entire page.

<style> <!--P {font: oblique 650 10pt/12pt Verdana;}-->
</style>

That style changes the properties for all elements inside P (or paragraph) tags to being oblique, having a weight of 650, being 10 points large, having line height of 12, and being in the font face Verdana. One more example to follow:

<style> <!--BODY {background: white url(background1.gif)no-scroll no-repeat top center;}-->
</style>

This sets the BODY background to be white, using the image background1.gif as the tiled background, with no-scroll, no-repeat, and being aligned at the top page in the center.

CSS Parameters >> Font Properties

font-family
Used to declare a specific font, a font family, or both at the same time.

a {font-family: Verdana, sans serif;}

font-style
Define whether the font will be italicized, oblique, or just normal.

a {font-style: italic;}

font-variant
Changes the way the font is presented, currently can be Small Caps, or normal.

a {font-variant: small-caps;}

font-weight
This operation sets the weight of the font (for example, you can set the weight of the bold tag in HTML).

B {font-weight: 500;}

font-size
Sets the size of the font, in absolute, relative or percentage-wise.

a {font-size: 150%;}

font
Allows you to set all the previously mentioned properties much quicker. However, it does require that you do everything in a specific order (you can leave out individual settings, just don't place them out of order).

a {font: font-style font-variant font-weight font-size/line-height font-family;}

CSS Parameters >> Color and Background

color This element will set the colour of any given tag. e.g. - for text it will define the text color, for form elements it will set the foreground color. You can use proper names for colors (e.g. red) or hex codes (e.g. FFFFFF - for white). a {color: FFFFFF;)

background-color
This will set the color of the background of any given element. This, also, can be defined using proper names, or hex codes.

a {background-color: 000000;}

background-image
This allows you to set an image to be the background image.

BODY {background-image: url(background.jpg);}

background-repeat
Allows you to change the way in which the background is tiled.

BODY {background-repeat: no-repeat;}

background-attachment
Allows you to define whether or not the element scrolls with the background image.

BODY {background-attachment: no-scroll;)

background-position
Allows you to set the starting position of the background.

BODY {background-position: middle right;}

background
Allows you to set all the previously mentioned background properties much quicker. However, unlike the font function, you do not have to specify everything in a given order.

BODY {background: black no-repeat no-scroll middle right;}

CSS Parameters >> Text Properties

word-spacing
This command sets the amount of white space between words.

H1 {word-spacing: 0.3em;}

letter-spacing
Much the same as the word-spacing command, however it sets the spacing between letters.

H1 {letter-spacing: 0.3em;}

text-decoration
Allows you to set the font's effect, like underline and strike through.

P {text-decoration: underline;}

vertical-align
This commands allow you set the vertical alignment of an object.

P {vertical-align: super;}

text-transform
Allows you to change the case of the words.

H1 {text-transform: lowercase;}

text-align
Sets the horizontal alignment of any set of words within a certain element.

H1 {text-align: justify;}

text-indent
Allows you to define the indentation of the first line of each paragraph of text within any block-level element.

P {text-indent: 30px;}

line-height
Allows you to set the vertical difference between the two baselines.

P {line-height: 25px;}

CSS Parameters >> Classification

display
Most often used to classify elements into categories.

H1 {display: none;}

white-space
Allows you to define how all whitespace in an element is treated.

TABLE {white-space: nowrap;}

list-style-type
Permits you to define the unordered or ordered list type of display.

OL {list-style-type: oval;}

list-style-image
Same type as list-style-type, except for it allows you to define an image to display instead of the normal options available.

UL {list-style-image: url(small_bullet.gif);}

list-style-position
This will allow you to define the positioning of the ordered or unordered group in relation to its position within the element.

LI {list-style-position: outer;}

list-style
This is the quick way to define all the different properties available for the list-style command.

UL {list-style: oval url(small_bullet.gif) outer;}

CSS Parameters >> Border Parameters

border-top-width
Allows you to set the width of the top border of the element. This parameter has the same background as its parent element, but can have its own foreground as specified by the border-color, or border-style parameter.

H3 {border-top-width: 2px;}

border-right-width
Allows you to set the width of the right border of the element. This parameter has the same background as its parent element, but can have its own foreground as specified by the border-color, or border-style parameter.

H3 {border-right-width: 2px;}

border-bottom-width
Allows you to set the width of the bottom border of the element. This parameter has the same background as its parent element, but can have its own foreground as specified by the border-color, or border-style parameter.

H3 {border-bottom-width: 2px;}

border-left-width
Allows you to set the width of the left border of the element. This parameter has the same background as its parent element, but can have its own foreground as specified by the border-color, or border-style parameter.

H3 {border-left-width: 2px;}

border-width
Allows you to set the width of the general border width of the element. This parameter has the same background as its parent element, but can have its own foreground as specified by the border-color, or border-style parameter.

H3 {border-width: 2px;}

border-color
Allows you to set the foreground of the general border of the element. This parameter has the same background as its parent element.

H3 {border-color: 000000; border-style: solid;}

border-style
Allows you to set the style of the border using the color set by the border-color parameter.

H3 {border-style: solid; border-color: 000000;}

border-top
The quick method to setting the style, width, and color of the top border of the parameters element.

H3 {border-top: 2px dotted 000000;}

border-right
The quick method to setting the style, width, and color of the right border of the parameters element.

H3 {border-right: 2px solid 000000;}

border-bottom
The quick method to setting the style, width, and color of the bottom border of the parameters element.

H3 {border-bottom: 2px dashed C0C0C0;}

border-left
The quick method to setting the style, width, and color of the left border of the parameters element.

H3 {border-left: 2px grooved 999333;}

border
The quick method to setting the style, width, and color of the overall border of the parameters element.

H3 {border: 2px dashed 669966;}

CSS Parameters >> Margin Parameters

margin-top
Allows you to set the spacing at the top of an element. You can have negative values (e.g. - 2px), however, please be careful using this one, because if you specify a high negative value (or rather really low) you can cause the visitors browser to crash.

P {margin-top: 15px;}

margin-right
Allows you to set the spacing to the right of an element. You can have negative values (e.g. - 2px), however, please be careful using this one, because if you specify a high negative value (or rather really low) you can cause the visitors browser to crash.

P {margin-right: 15px;}

margin-bottom
Allows you to set the spacing at the bottom of an element. You can have negative values (e.g. - 2px), however, please be careful using this one, because if you specify a high negative value (or rather really low) you can cause the visitors browser to crash.

P {margin-bottom: 20px;}

margin-left
Allows you to set the spacing to the left of an element. You can have negative values (e.g. - 2px), however, please be careful using this one, because if you specify a high negative value (or rather really low) you can cause the visitors browser to crash.

P {margin-left: 15px;}

margin
Allows you to set the general spacing that will be used on all sides of an element. You can have negative values (-2px), however, please be careful using this one, because if you specify a high negative value (or rather really low) you can cause the visitors browser to crash.

P {margin: 10px;}

CSS Parameters >> Padding Parameters

padding-top
This parameter lets you specify the padding (like cellpadding with normal tables) at the top of an element. The padding will have the same background colour as the element does.

H1 {padding-top: 5px;}

padding-right
This parameter lets you specify the padding (like cellpadding with normal tables) to the right of an element. The padding will have the same background colour as the element does.

H1 {padding-right: 5px;}

padding-bottom
This parameter lets you specify the padding (like cellpadding with normal tables) at the bottom of an element. The padding will have the same background colour as the element does.

H1 {padding-bottom: 5px;}

padding-left
This parameter lets you specify the padding (like cellpadding with normal tables) to the left of an element. The padding will have the same background colour as the element does.

H1 {padding-left: 5px;}

padding
This parameter lets you specify the general padding (like cellpadding with normal tables) on all sides of the element. The padding will have the same background colour as the element does.

H1 {padding: 10px;}

CSS Parameters >> Other Parameters

width
This parameter is used to define the width of any block level element.

P {width: 100%;}

height
This parameter is used to define the height of any block level element.

P {height: 300px;}

float
This parameter sets the float for any block level element. Floats are used to allow text flow around them.

TABLE {float: right;}

clear
This parameters allows you to set which floating elements are allowed on either side of the parent element.

P {clear: both;}

CSS (Cascading Style Sheets) is an extension of HTML/DHTML. It allows for you to format an entire element by defining all of its properties just once, instead of every time the element appears on your page. This is useful for two reasons, one, you can drastically reduce the size of your HTML file if you have a lot of text or table formatting, and two, it makes life a whole heck of a lot easier to just write STYLE=INTTABLE instead of BGCOLOR=336699 VALIGN=TOP and then also defining the intererior text.

In this article I will introduce you to how to use basic Cascading Style Sheets in your pages to make your life easier. Please note however that CSS is only heavily supported in the newer browsers (4.0 and higher). There is very limited to no support in previous versions of browsers.

Introduction to CSS >> An Example

The best way to start off any lesson, I believe, is to provide an example, and then teach you how to do the same thing. So here is your example:

 INPUT.TEXT  {
    font-family : Trebuchet MS;
    font-size : 9pt;
    font-weight : bold;
    background-color : 336699;
    border-color : 336699;
    border-style : inset;
    border-width : 2px;
    color : FFFFFF;
}

 A {
    text-decoration : underline;
    color : 8B0000;
}
 
 A:HOVER {
    font-weight : bold;
    color : 8B0000;
}

 A.SUBNAV {
    text-decoration : none;
    color : 000000;
    font-size : 10pt;
}


Introduction to CSS >> INPUT.TEXT

 INPUT.TEXT  {
    font-family : Trebuchet MS;
    font-size : 9pt;
    font-weight : bold;
    background-color : 336699;
    border-color : 336699;
    border-style : inset;
    border-width : 2px;
    color : FFFFFF;
}


There's your code for this classification of all text form inputs (text boxes). We will go through this a line at a time, and I will explain each part.

This is the first line in your definition of this sub-class (a part of a css style for an entire page). The INPUT.TEXT tells the browser that it is defining the properties for all text form inputs. The bracket ({) tells the browser to start reading the following as specific definitions for the text form inputs.

The font-family property is basically the same as the font FACE property in HTML. It tells the browser what font type the text is to be shown in. As in HTML, you can also have more than one font type seperated by a comma (,).

The font-size property is self-explanatory, it defines the size of the text for that element. 9pt is the same as how you would format text in a program like Microsoft Word. There are also a number of other ways to define font-size using CSS.

• larger
• smaller
• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large