HTML Learning Package - CSS © Nigel Martin 2000

Cascading Style Sheets

Contents

Brief Introduction

Cascading Style Sheets provide a means of associating presentational information with the structural elements of a document in a way that does not corrupt the underlying structure of the document. A style sheet is a set of guidelines for the browser indicating how the various elements of a document should be presented. For example, the following set of instructions constitute a style sheet for web documents:

The background of the page should be green.
Top-level headings should be in 14 point bold Arial.
Body Text should be 12 point Times New Roman.
Block Quotations should be set in 8 point Times Italic.

TRY CODING

Basic Syntax

Style sheet syntax is made up of three parts: a selector, a property and a value in the following way:

selector {property1: value1; property2: value2}

The selector is normally the element or tag you wish to define, the property is the attribute you wish to change, and each property takes a value. The property and value are separated by a colon and contained in curly braces. If you wish to specify more than one property than you should separate each one by a semi-colon. The example below shows how you would define level 1 headings to be shown centered and coloured blue.

H1 {text-align: center; color: blue}

General Usage

You can store style definitions internally i.e. in the HTML file or as a file stored as filename.css (where filename is anything) or inline to only affect say a block of text in your file.

INTERNAL (EMBEDDED) OPTION (placed before the </HEAD> tag)

This means you include the style sheet at the beginning of a specific web page. It will define the look of a single page.

EXTERNAL (LINKED) OPTION

This means you create a single style sheet that each page of your web site links to, thus creating a consistent look to your entire site. This is the preferred choice where you have more than one HTML file requiring the same format.

Create a file called say 'mine.css' and then copy the text from <!... to --> into it. You then require one link to the CSS file from the HTML file :

<LINK href="nm.css" rel=stylesheet type=text/css> (which is again placed before the </HEAD> tag.)

INLINE OPTION

This allows you to apply styles to a section or group of tags on a page in the <BODY> using the STYLE attribute in the relevant element tag. The STYLE attribute can contain any number of CSS properties. The following example shows how to change the colour of a paragraph inline. Inlining styles loses many of the advantages of style sheets by mixing content with presentation. This method should be used sparingly, such as when a style is to be applied to a single occurrence of an element.

Example

HTML Code Needed	What gets displayed
<P STYLE="background-color:#FFFA2A; color:#553333">CSS, <B STYLE="font-size:150%">Hello</B> <I>This is an example of in-line styling </I></P>	CSS, Hello This is an example of in-line styling

Font Properties

font-family

Identifies the font family (typeface) to use. A series of names may be requested; the first available font will be used.

font-style

Identifies the style of the font. Choices are normal, oblique or italic.

font-variant

Identifies another variation on the face - either normal and small-caps.

font-size

This specifies the size of the font. It may be specified in units or relative to the current size.

font-weight

This specifies the weight or boldness of the font, specified with either a keyword ( bold or bolder for example) or as a member of the ordered series 100,200, ..., 900, where higher numbers are correspondingly higher.

Example (using the Style shown)

.copexample { font-family: "Times New Roman", Times, serif; font-size: large; font-style: normal ; font-weight: bolder; font-variant: normal}

TRY CODING

Text Properties

There are several text properties available:

word-spacing

Modifies the default inter-word spacing.

letter-spacing

Modifies the default inter-letter spacing.

text-decoration

Selects underlining, overlining, link-through, or blink attributes.

vertical-align

Adjusts the vertical alignment of an element.

text-transform

Shifts text to upper or lowercase.

text-align

Specifies left, right, centre, or justified alignment.

text-indent

Determines the amount of indentation on the first line of a block of text.

line-height

Specifies the distance between the baselines of consecutive lines of text.

Example (using the Style shown)

.copexample { font-family: "Times New Roman", Times, serif; font-size: large; font-style: normal; line-height: normal; text-transform: capitalize; letter-spacing: normal; text-indent: 3pt}

TRY CODING

Boxes

Boxes in Cascading Style Scripts allow you to specify the nature of the rectangles and determine how the content of the element is formatted to fit in the space provided. The following are available:

margin, margin-bottom, margin-left, margin-right

Determines the size of the top, bottom, left and right margins. Setting margin adjusts all of the margins simultaneously.

padding, padding-bottom, padding-left, padding-right

Adjusts the amount of padding on the top, bottom, left and right sides of the element. Setting padding adjusts all of the borders simulataneously.

border, border-bottom, border-left, border-right

Selects the nature of the border on the top, bottom, left and right sides of the element. Setting border sets all the borders.

width, height

Identifies the width and height of the rectangle that contains the formatted content.

float

Identifies an element that should float to the left or right of a flow of text, allowing the text to flow around it.

clear

Specifies where floating elements may occur with respect to the element i.e. selecting clear : left indicates that there may be no floating elements to the left of the element; this will force the element to start below an image floating on the left side of the display.

TRY CODING

Classifications

There are three classification properties:

display

Allows you to specify what category of object an element belongs to, i.e. is it a block element, like a heading or paragraph; an inline element, like emphasis or anchors; or a list-item block element, like LI.

list-style

This influences the selection of numbers or bullets for lists. In addition to selecting one of the built-in enumeration or bullet styles, you can specify an image for use as the bullet character. You can also influence the position of the list mark with respect to the flow of the text. An outside list mark occurs to the left of the entire list item, whereas text wraps under an inside mark.

white-space

Identifies how the line breaking of an element is to be accomplished. Possible values are normal, where white space serves merely to delimit elements that are formatted according to the alignment of the surrounding element; pre where all white space is significant; and nowrap where white space serves primarily as a delimiter, but no wrapping is done except where <BR> elements occur.

TRY CODING

--> CGI Scripts Lesson