CSS: Defining an embedded style sheet

ENBEDDED 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.

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just one file!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *