Skip to main content

Defining an Embedded Style Sheet

A linked Style Sheet is a text file with the extension .css, for example the Style Sheet for this course is called tutorial.css, and is "linked" to from all the course's various Web pages. Linked Style Sheets are more flexible than embedded Style Sheets but we shall use an embedded Style Sheet as our first example.

As the name implies this particular type of Style Sheet is part of the Web page and its definition appears in the head of the Web page using the following tag elements:

<style type="text/css"> is the beginning element and

</style> is the end element.

Defining the Style Rules

Style Sheet Rules are made up of the selectors (basically the HTML tags to which the style will be applied), the declarations (the various properties, e.g. font selection) and values. A Style Sheet Rule is of the general form:

selector { property1: value1 ; property2: value2}

For example, suppose we want a black page with white text then a style sheet rule would be:

body {background:black; color:white}

body is the selector; background and color are properties and black and white are values. Note: the selector (body in this example) is used without the angle brackets and the property list is separated by semicolons.

Click here to see this page with this style applied.