Cascading Style Sheets (CSS version 1) are a new featured implemented within version 4 of Netscape and Internet Explorer. Please note that these features only work with version 4 or newer of Netscape or Internet Explorer. This page may display strange if you are not using one of those browsers. The standard of CSS1 have been determined and are published by the W3C. Neither Netscape or Internet Explorer currently fully implement the CSS standards. In addition, each browser displays some features slightly differently. This tutorial does not explain the discrepancies, but only introduces the basics of CSS. Here is the source code for the style sheet associated with this page. If you have any questions feel free to send me an email.
Five Main Types of Information
Foreground and background colors and images
Font properties
Text properties
Boxes - margins and borders around block elements, floating elements, etc...
Classifications - control over list styles and the formating of elements
Using a Style Sheet in a Web Page
Using the tag in the of the page.
Example: >Link REL=STYLESHEET TYPE="text/css"
HREF="www.namehere.com"<
In the STYLE attribute of the specific element within the document.
Use the @import command to import one CSS style sheet into another.
Style Rules
A simple rule uses the following form: element-name { property: list } where the element-name is the name of an HTML tag and the property:list is the associated style command. To specify a specific occurance of a series of tags, assign more than one tag in the order they appear.
Example H1 I {properties}
Using the CLASS Element
When you need to treat elements in a different method, it is possible to use the CLASS feature. As an example f you wanted warnings or external links to be different you could use the class feature.
Add these specific styles to the style sheet with the class name attached to the element name separated with a period.
P.caution { properties }
A.externallink { properties }
Using the ID Subclass
When you have a special element that needs to be treated in a unique method use the ID. Please remember that for correct CSS use, this must be a unique case (only one use), although the current browser editions may support more than one use.
In the style sheet identify the ID as follows:
#Unique { properties }
Pseudo-Classes
When aspects of the web page are dependant on user interaction versus document structure you can use pseudo-classes. Psuedo-classes may be mixed with classes, but psuedo-clsses use : as the separator character. Here is an example:
A:visited { properties}
P.initial:first-letter {properties}
The first changes the visited links while the second changes the size of the first letter of te paragraph using the CLASS "initial".
Properties
Properties in CSS1 consist of the property name followed by the value. The name and value are separated by a : while additional values are separated by ;.
Here is an example which sets maroon on green text for headings and puts all blockquoted paragraphs in white italic font.
H1 {background: green ; color: maroon}
BLOCKQUOTE P {font-style : italic ; color: white}
Colors
There are two properties that specify colors: color and background.
Color controls the foreground of an element while background controls the background color or texture of an element. When using images, the position, scrolling aspect, and repeatability can be controlled.
Fonts
font-family
Identifies the font face to be used. There are also five classes of generic fonts also available. Serif, Sans-serif, monospace, cursive, and fantasy.
font-style
Identifies the style of the face: normal, italic, or oblique
font-variant
Identifies either small caps or normal font face.
font-size
Specifies the size of the font in px (pixels) pt (points) or +/-.
font-weight
Specifies the boldness of the font using either a keyword (bold or bolder) or using numbers 100, 200, 300, ..., 900, where higher numbers are bolder.
Text
word-spacing
Changes the default inter-word spacing.
letter-spacing
Changes the default inter-letter spacing.
text-decoration
Sets underlining, overlining, link-through, or blink.
vertical-align
Sets the vertical alignment.
text-transform
Sets the text to uppercase or lowercase.
text-align
Sets the alignment to left, right, center, or justified.
text-indent
Sets the indentation on the first line of a block of text.
line-height
Sets the distance between consecutive lines of text.
Boxes
In CSS every element is treated as a rectangle. Each element has a margin, an optional border within that margin, and padding within the border. The box feature allows you to set these features.
margin margin-top margin-bottom
margin-left margin-right
Sets the size of the top, bottom, left, and right margins. Margin sets all margins at the same time.
padding padding-top padding-bottom
padding-left padding-right
Sets the size of the top, bottom, left, and right padding. Padding sets all padding at the same time.
border-width border-top-width border-bottom-width
border-left-width border-right-width
Sets the size of the top, bottom, left, and right border. Border sets all border at the same time. You can specify the size, color, and style of the border.
width height
Sets the width and height of the rectangle.
float
Identifies an element to allow text to flow (float) to the right or left around the element.
clear
Sets where floating elements may be with respect to the element. For example: setting clear: right states that there will not be any floating elements to the right. This forces an element to start below an image located on the right.
Classifications
display
Allows you to specify the category of the object. Values include block (headings or paragraphs), inline (bold or anchors), list-item (list items), and none (don't display the contents of the element).
list-style
Allows you to set images to be as bullets. The value of inside allows the text to wrap under the bullet, while outside forces the bullet to remain outside of the text.
white-space
Sets the line breaking of an element. Values are normal, pre, and nowrap.
Layers
While not really a part of CSS, layers can be extremely useful. An example would be when you need text on an image, but don't want to make the text part of the image. Layering allows you to place the text on top of the image. Netscape first implemented layers using the tag. Netscape still supports this tag, but it does not work in Internet Explorer. Currently there is a large discrepancy between browsers on the implemenation of layers and how each browser will handle the code. The
or tags allows information to be layered. The main properties of the tags are as follows.
Position
Determines whether the layer is relative or absolute.
Left
Sets how far the layers is positioned from the left of the browser using px (pixels), pt (points), in (inches), or % (percentrage).
Top
Sets how far the layers is positioned from the top of the browser using px (pixels), pt (points), in (inches), or % (percentrage).
Overflow
Using clip, scroll, or none to determine how the content which is too big for the layer will be displayed.
Clip
Defines the part of the layer that is visible using clip:rect(Top, Right, Bottom, Left) only inserting numeric values for the positions.
Z-index
Determines which layers is on top.
Visibility
Determines whether the layer is visible or not.
Width
Sets the width of the layer.
Height
Sets the height of the layer.
Style Sheet Source Code
Here is the source code for the style sheet linked with this page.
