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 formatting HTML 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 container Can “pollute” a script with extraneous code Best used to override higher-level styles

Three Main Types of Styles Defined in the 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

Three Main Types of Styles 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:

Style Rules - Syntax p {font-size:14pt; font-color:red } You can apply many styles to the same selector Declarations are separated with semi-colons:

Style Rules - Syntax p,li {font-size:14pt; font-color:red } You can apply styles to many different selectors Selectors are separated by commas:

Style Rules - Syntax li em {font-size:14pt; font-color:red } You can apply styles given certain conditions using contextual selectors Contextual selectors are separated by a space: This means that containers which are also encapsulated within a container will have a font-size of 14 points and a font color of red.

Style Rules - Syntax 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 This is a line of text to which a style has been applied. References to a class are made in individual HTML tags:

Extending HTML for Style Sheets Hi There! This is a line of text to which a style has been applied. The … container is used to apply styles to block-level elements:

Extending HTML for Style Sheets Mary had a little lamb, little lamb, little lamb. The … container is used to apply styles to groups of characters:

The External Style Sheet A 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 External style sheets are linked to an HTML document in the container:

The Embedded Style Sheet A list of rules (no other syntax except for rules) Defined in the 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

The Inline Style Rules 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 A style has been applied to this paragraph of text.

Inheritance Styles are inherited from parent-level styles to child-level styles Example: An inline style inherits the properties of an embedded style and an external style External Embedded Inline Inheritance Flows This Way

Conflicting Styles When 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 More Weight

Questions?