Doing It With Style Style Sheets: Separating Form from Function

Doing It With Style

Style Sheets: Separating Form from Function

First, A Little History …

When HTML was first developed, there were no GUI browsers; Result: no need for fancy formattingHTML was originally developed to distribute information – little attention was paid to the form of that information

As Time Went By …

More & more GUI browsers were invented

People wanted more from their web pages

HTML evolved to include formatting tags

RESULT: Bloated Pages!

HTML scripts became bogged down with tons of formatting tags

Extra tags required more disk space

Style Sheets to the Rescue!

Separated form from function

Reduced file size of HTML scripts

Introduced portable code

What can styles do for us?

Make our code portable (write once, apply everywhere)

Continuity: make pages across websites look the same

Reduce code!

Allow us some room for “customized” styles

Three Main Types of Styles

Used at the tag-level

Usually applied to individual tags or groups of tags

Similar to <font> container

Can “pollute” a script with extraneous code

Best used to override higher-level styles


Defined in the <head> container

Configures styles for a SINGLE web page

Generally used to override External Style Sheets or when a style is going to be used only on a single page


Defined in another document with an extension of “.css”

Configures styles for multiple web pages

Highest level of style

Style Rules

Styles are defined according to rules

The general* format is:

•- There are some exceptions to this. Inline styles

use a slightly different syntax

selector { property:value }

Declaration

Style Rules

selector { property:value }

The selector is usually the HTML tag to which a style will apply.Example: p

The property is the attribute being changed. Example: font-family

The value represents what the new look the property will take.Example: Arial

Style Rules - Example

p { font-size:14pt }

Style Rules - Syntax

p {font-family:”Arial Narrow”,Arial,Tahoma,sans-serif

}

Multiple values can be assigned using commas:


p { font-size:14pt;font-color:red }

You can apply many styles to the same selectorDeclarations are separated with semi-colons:


p,li { font-size:14pt;font-color:red }

You can apply styles to many different selectorsSelectors are separated by commas:


li em { font-size:14pt;font-color:red }

You can apply styles given certain conditions using contextual selectorsContextual selectors are separated by a space:

This means that <em> containers which are also encapsulated within a <li> container will have a font-size of 14 points and a font color of red.


li em, h2 b {font-size:14pt;font-color:red

}

You can group multiple contextual selectors using commas to separate:

Defining a Class

You can create “custom” styles to apply based on unique identifying attributes

These “custom” styles are called classes

Classes are referenced by attributes in HTML tags

Defining a Class

p.myClass {font-family:Arial;font-color:red

}

Classes can be defined for individual tags:

Defining a Class

.myClass {font-family:Arial;font-color:red

}

Or, classes can be defined for use in many tags:

Referring to a Class in HTML

<p class=“myClass”>This is a line of text to which a stylehas been applied.

</p>

References to a class are made in individual HTML tags:

Extending HTML for Style Sheets

<div class=“myClass”><h1>Hi There!</h1><p>This is a line of text to which a stylehas been applied.</p>

</div>

The <div>…</div> container is used to apply styles to block-level elements:

Extending HTML for Style Sheets

Mary had a <span class=“myClass”>little lamb, little lamb,</span> little lamb.

The <span>…</span> container is used to apply styles to groups of characters:

The External Style SheetA list of rules (no other syntax except for rules)

Saved with a file extension of “.css”

644 permissions (just like an HTML document)

Saved as a straight-text file (ASCII file)

Highest-Level Style

The External Style Sheet - Example

h1 { font-family:Arial;font-size:42pt }

p { font-family:Arial;font-size:12pt }

li { font-family:Verdana;font-size:10pt }

Referencing the External Style Sheet

<head><link rel=“stylesheet”

href=“css/myStyle.css”type=“text/css”>

</head>

External style sheets are linked to an HTML document in the <head> container:

The Embedded Style SheetA list of rules (no other syntax except for rules)

Defined in the <head> container of an HTML document

Embedded styles trump external styles, but are subservient to all other styles

Usually contained within an HTML comment

The Embedded Style Sheet - Example

<head><style type=“text/css”></style>

</head>

The Inline StyleRules applied to individual tags

Defined at the tag level

Inline styles trump external embedded styles, but are subservient to HTML tags

Use them sparingly!

The Inline Style - Example

<p style=“font-face:Arial;font-size:12pt;color:blue”>A style has been applied to this paragraph of text.</p>

InheritanceStyles are inherited from parent-level styles to child-level stylesExample: An inline style inherits the properties of an embedded style and an external style

External

Embedded

Inline

Inhe

ritan

ce F

low

s T

his

Way

Conflicting StylesWhen styles conflict, the more specific style will have more weight

Default Browser Settings

User-Defined Settings

External Styles

Embedded Styles

Inline Styles

HTML Tag Attributes Mor

e W

eigh

t

Questions?

Documents

Doing It With Style Style Sheets: Separating Form from Function