Style Syntax

	Style Syntax

Overview

Styles have their own unique syntax. Embedded (internal) style sheets and linked (external) style sheets follow the same syntax. A different syntax is used for inline styles.

Syntax for Inline Styles

The syntax for inline styles is slightly different than those of the other style types. Inline styles:

place the style information within the HTML tag. (The HTML tags are located in the BODY section of the web page.)
use quotation marks to enclose the style definition (or declaration).
affect a single element.

This is the syntax for inline styles:

Example:

<P STYLE="font-size: 10pt; color: green">Example of an Inline Style</P>

Syntax for Embedded and Linked Style Sheets

The syntax for embedded and linked style sheets are the same. These two style types:

use curly braces, i.e. { and }, to enclose the style definition (or declaration).

This is the syntax for embedded and linked style sheets:

Tag { property: value; property: value }

Here are a few variations of the above syntax:

Tag, Tag, Tag { property: value; property: value }

Tag.class { property: value; property: value }

Examples :

H1, H2, H3 { font-size: 20pt; color: red }

H4 { font-size: 16pt; color: navy }

H5.Indent { font-size: 12pt; margin-left: 50pt }

However, embedded and linked style sheets differ in several ways:

An embedded style sheet affects all identical elements within a single web page.
A linked style sheet affects all identical elements within a web site. (i.e. It affects those pages that are linked to the style sheet).
The style information is located within the web page for an embedded style sheet and in a separate file for a linked style sheet.

Location of Style Information for Embedded Style Sheets

The style information for an embedded style sheet is located within the web page. Further,

The STYLE tags, i.e. <STYLE> and </STYLE>, must be located between the opening and closing HEAD tags, i.e. <HEAD> and </HEAD>. (The HEAD tags are located in the upper portion of a web page.)
The style information is located between the opening and closing STYLE tags, <STYLE> and </STYLE>.
Place comment tags, , around the block of style information. The comment tags prevent older browsers (that don't support styles) from displaying the style information as text on a web page.
Example:

Location of Style Information for Linked Style Sheets

The style information for a linked style sheet is placed in a separate file. Further,

The file containing the style information must have an extension of .css.
The .css file must be saved as a plain text file.
Example of style information in a .css file:

H1, H2, H3 { font-size: 20pt; color: red }
H4 { font-size: 16pt; color: navy }
H5.Indent { font-size: 12pt; margin-left: 50pt }

The link between the web page and the .css file is established by placing the following code into the HEAD section of the web page:

The rel attribute specifies the relationship to the .css file.
The type attribute specifies the type of style sheet (i.e. cascading style sheet).
The href attribute allows you may specify the relative path or the complete web address of the .css file.
Examples of the code which is used to create a link from the web page to the .css file:

OR

Additional Syntax Notes

The tag, property, and value information may be typed as upper or lowercase letters.
- Only the class portion is case-sensitive. (Example of a tag with a class: H5.Indent)
If you have several tags that have the same properties and values, they may be grouped together.
Spaces may be used to make the style information easier to read.
The properties and values must be located within the pair of curly braces.
A colon is required after the property.
A semi-colon is required after each value except for the last one.
A tag may have more than one property and value.
Style information may be typed on multiple lines.
- Example:
H4 { font-family: serif;
font-size: 16pt;
color: navy }

Anatomy of a Style

Style sheets consist of rules.
A rule declares how a particular element is to be rendered on a web page. Each rule consists of a selector and a declaration.
- A selector is the element that is associated with a particular style (i.e. the part before the left curly brace).
- A declaration (or definition) is a style that is applied to the selector (i.e. the part within the curly braces). The declaration contains the property or series of properties and their associated value.
Example 1:
- This is a rule: H1 { font-size: 12pt; color: red }
- This is the selector: H1 (i.e. the heading tag)
- This is the declaration: font-size: 12pt; color: red
- The properties are: font-size and color
- The values for these properties are: 12pt and red
Example 2:
- This is a rule: P.INDENT { font-size: 10pt; margin-left: 50pt }
- This is the selector: P (i.e. the paragraph tag)
- This is the selector class: INDENT (case-sensitive)
- This is the declaration: font-size: 10pt; margin-left: 50pt
- The properties are: font-size and margin-left
- The values for these properties are: 10pt and 50pt
Example 3:
- For inline styles, such as < P STYLE="font-size: 12pt; color: red">, the style is inserted within the HTML tag.

Penn State Behrend Home | Computer Center Home

This page is maintained by Carolyn Dudas
Updated May 21, 2002