MCCC CIS177 Markup Languages

Introduction to CSS

A style sheet is made up of style rules that tell a browser how to present a document. There are various ways of linking these style rules to your HTML documents, but the simplest method for starting out is to use HTML's STYLE element. This element is placed in the document HEAD, and it contains the style rules for the page.
Note that while the STYLE element is a good method of experimenting with style sheets, it has disadvantages that should be considered before one uses this method in practice. The advantages and disadvantages of the various methods are discussed in the section on linking style sheets to HTML.

Each rule is made up of a selector--usually an HTML element such as BODY, P, or EM--and the style to be applied to the selector.

There are numerous properties that may be defined for an element. Each property takes a value, which together with the property describes how the selector should be presented.

Style rules are formed as follows:

selector { property: value }
Multiple style declarations for a single selector may be separated by a semicolon:

selector { property1: value1; property2: value2 }

As an example, the following code segment defines the color and font-size properties for H1 and H2 elements:

<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">
h1 { font-size: x-large; color: red }
h2 { font-size: large; color: blue }
</STYLE>
</HEAD>

The above style sheet tells the browser to show level-one headings in an extra-large, red font, and to show level-two headings in a large, blue font. The CSS1 Specification formally defines all properties and values available.

Inline and Embedded Style

The above is an example of an embedded style. You can optionally use inline styles, or external styles, which are discussed in the next section. To create an inline style, you use the style attribute in a tag such as the following:

<h1 style="color:gold; font-family:sans-serif">

Use Inline and Embedded Styles

Start a new HTML document and type the following:

<h1 style="color:red; font-family:sans-serif">Hello World</h1>

Save the file as css.html and view it in the browser.

Add the following code in the <head> section.

<style>
h1 { font-size: x-large; color: green }
h2 { font-size: large; color: blue }
</style>

Save the file and view in the browser.

External Styles

External style sheets are an advantage because you can link multiple pages to the same style definitions make it easy to update all the page simultaneously when you want to change a style. To link a page to the style sheet, use the following syntax in the <head> section:

<link href="cssname.css" rel="stylesheet" type="text/css">

Create an External Style Sheet

Open Notepad and type the following code:

h1, h2, h3, h4 {color:gold; font-family:sans-serif}

Save the file as style.css

Start a new HTML document. In the <head> section type:

<link href="style.css" rel="stylesheet" type="text/css">

Add h1-h4 tags in the <body> section typing the text of your choice.

Save the file in the same location as the style sheet and view it in the browser.

Style Precedence and Inheritance

Precedence

It's important to understand the order in which the browser will apply the styles when a conflict exists. The precedence is as follows:

Inline styles override embedded and external.

Embedded styles override external.

External override the browser defaults.

Any undefined style attributes are handled by the browser.

Inheritance

An element contained within another element is a descendant. An element that contains another element is a parent. An example is <h1> within the <body> tag, with the former being the descendant and the latter being the parent.

Descendants inherit the styles of their parents. You can override this behavior by specifying a style for the descendant as follows:

body {color:green}

h1 {color:blue}

All descendants of the <body> tag will be green, exept for <h1>, which will be blue.

Work with Precedence and Inheritance

Download a stylesheet here. (right-click and save target as)

Using the HTML document you previously created. Experiment by adding elements to the page and changing the styles of the elements in the style sheet.