Cascading Style Sheets Orientation

Learning Web Design: Chapter 11

Lesson Overview

Learn the benefits and power of using Cascading Style Sheets (CSS)

Understand how (X)HTML markup creates a document structure

Learn how to writing CSS Style Rules Understand when and how to use the

three types of style sheets Use inheritance, cascading,

specificity, and rule order to predict how rules are applied

Cascading Style Sheets (CSS) The first implementation was

known as CSS1 The next implementation was CSS2

Allows specifying of font colors, background colors and graphics, margins, spacing, type style and more

A new implementation is on the horizon: CSS3

Benefits of CSS Separates content of a page from its

presentation creating smaller documents and faster downloads

Better control over type and layouts Less work – style rules can effect selected

text, a whole page, or an entire site Your site will be more accessible Reliable browser support for CSS1 and CSS2

The Power of CSS CSS has the potential for

being a powerful design tool Design of a site can be managed and

controlled by an organization with CSS The CSS can be swapped for a

completely different look and feel and the content remains the same

See examples at http://www.csszengarden.com

How Style Sheets Work Just follow these steps:

1. Start with a document of marked up (X)HTML content

2. Write style rules for how you want certain elements to appear

3. Attach the style rules to the document When the page is displayed, the

browser will follow these rules

Marking Up Content

Marking up text provides a structure for a document and is sometimes called the structural layer

Choose (X)HTML elements that most closely describe the meaning of the content : i.e. blockquote, p, h1

Once the structural layer is in place, CSS is used to add on the presentational layer

Writing the Rules A style sheet is made up

of style instructions called rules Each rule describes how an element

or group of elements will be displayed There are two parts to a rule:

The selector that identifies the element affected by the rule

The declaration provides the instructions

Selectors – Choose Wisely The most basic type of selector

is called an element type selector Every (X)HTML element can have one or

more associated style rules The p selector is applied to all <p> elements The h1 selector is applied to all <h1>s

Mastering CSS requires choosing wisely the best selector and using it strategically

Declarations A declaration is made up of a

property/value pair separated by a colon : font-size: small; font-weight: bold;

Each declaration must end in a semi-colon to separate it from others font-size: small; font-weight: bold;

Declaration Block A set of declarations can be

grouped together into a block by enclosing them in curly brackets { }

CSS will ignore whitespace, so you can make the declaration block more readable by putting each declaration on its own line

Last Declaration in a Blockand the Semi-Colon

The semi-colon for the last declaration in the block can be omitted body { font-family: Arial; font-size: 110% }

It is recommended you get into the habit of always including the semi-colon

This will make adding new declarations later on much easier

No final semicolon-

is okay

3 Approaches to Style Sheets External Style Sheets –

separate file for style rules Embedded Style Sheets –

placed within a page Inline Styles – applied on a given

element or group of text (very rarely used)

Later in the semester we will focus exclusively on External Style Sheets

When to Use Inline CSS A disadvantage of using inline CSS is that

it intermingles presentation of text with the actual content. This is sometimes referred to

spaghetti coding Inline CSS formatting is can be used to

temporarily tryout a combination of styles Inline CSS should be reserved only for

special case text formatting

Applying Inline CSS Inline CSS allows the attachment of

style rules to an individual element instead of across the entire page or the entire site

Use the style attribute to apply the inline CSS to block-level elements like <p>, <ul>, or <h3>.

<p style=“font-weight: bold;”> This entire paragraph will be bolded. </p><p style=“font-weight: bold;”> This entire paragraph will be bolded. </p>

Creating an Inline Style Rule

An inline CSS style rule is a list of one or more CSS properties

The colon character separates the name of the style property from its value Ex. font-size: x-large;

The semicolon character is used to separate individual CSS properties in a style rule list Ex. <h1 style =“ font-family: Arial; font-size:

14px; font-weight: bold;>My Heading </h1>

Applying CSS to Text Inline CSS can also be applied over

a selected group or span of text The <span> tag provides the

starting and stopping place for the style rule to be applied Ex. <p> This is my <span

style=“font-weight: bold;”>big</span> word. </p>

Embedded CSS - These style rules apply over a given page Embedded CSS should be reserved for

pages that need a special appearance within your Web site, otherwise External style sheets should be used

Use the <style> and </style> tag placed in the <head> of the page

Needs the type attribute type=“text/css”

Example of Embedded CSS

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

body { background-color: lightgreen; font-family: Arial, Helvetica, sans-serif; } p { font-size: medium; } h1 { font-size: xx-large;} h2 { font-size: x-large;} </style></head>

The body Selector An embedded style sheet should always

contain a selector for the body Use this selector to set defaults for the

entire page like font-family, and font-size Ex. body {

font-family: Arial, Helvetica; font-size: medium; }

Setting text color, link colors, and background-color will be covered later

Example: h1 selector Ex. h1{ font-size: 300%;

font-weight: bold; font-variant: small-caps; }

Uses the name of the HTML tag you are selecting and { } characters

Each property is separated by a ; This style rule will be applied to all

occurrences of <h1> tags on this page

Applying Embedded Styles Simply use the HTML tag associated

with a selector or the class attribute within the page

These styles apply only within the page Ex. <body> </body> - The body will have

a background color set and font-family set Ex. <p> Paragraph has medium size </p> Ex. <h1>Heading will have bold text </h1> Ex. <p class=“bigger”>Large text</p>

Inheritance In real life, human children often

inherit traits like eye color from their parents

(X)HTML elements also pass down certain style properties from parent elements to child elements

Understanding inheritance rules will help you to better organize and plan your style sheets

Document Tree Structure

The page structure is like an upside down tree branching out from the <html> tag

html

head body

title style meta h1 p p h2 p p

em img

p

em em

Parents and Children A document tree of elements

can seen as a kind of family tree Elements nested within a

given element are its descendents i.e. h1, h2, p, em, img are descendents

of the body element An element nested within another element

without other levels in between is a child The containing element is the parent

Pass It On When you write a font-related style rule

using an element type selector like a p: the rule will apply to all <p> elements on

the page as well as all children of <p> elements

Child elements inherit properties of their parent element

Some elements like <img> do not inherit font-related properties

What Can Be Inherited? Font-related properties used to style text

are usually inherited Properties related to the box-like structure

of an element are usually not passed down i.e. border, margin, background would not

make sense on all child element Use inheritance to keep from repeating

properties in a child when they will be inherited anyway

Inheritance Example

body { font-size: small; font-family: sans-serif;} Styles are passed on to all text elements of the

page

html

head body

title style meta h1 p p h2 p p

em img

p

em em

Overriding Inherited Properties Any property applied to a specific

element will override an inherited style

p style rules will override body style rules

em style rules will override p style rules

Inline styles will override all else

What is Cascading?

CSS allows applying several style sheets to a document

The cascade refers to the orderly application of styles to an element

If no styles are applied, the default styles of the browser are applied

Style information is passed down until it is overridden with a style command with more weight

Conflicting Style Rules?? The closer the style rule

is to the element, the more weight it has!

Inline styles have the most weight

Next embedded styles on the page are used

Finally, external styles are applied

Specificity Once cascading of style

sheets has been applied, there may still be conflicts at the rule level

If two rules conflict, the type of selector is used to determine the winner

The more specific the selector the more weight it is given

Assigning Importance If you want a rule to not be

overridden by a conflicting rule, use the!important indicator just before the semi-colon p { font-size: medium !important; }

Even if an inline style rule is encountered later with a different property value, the important property will hold

The only thing that can override this is a reader style set with !important

Reader Style Sheets Users may write their own

style sheets and apply them to pages within their own browser

These are called reader style sheets Normally author style sheets (inline,

embedded or external) will override reader style sheets unless the reader style is marked with !important.

A user with impaired vision might create special style rules to help them read a page

The Last Shall Be First

If there are conflicts within style rules of the same weight, the last-one wins rule applies.

The style rule closest to the content in the document will override earlier style rules.

And the winner is… All style rules are

weighted the same green wins, it was the

last style rule

<style type=“text/css”> p { color: red;} p {color: blue;} p {color: green;}</style>

Sources for CSS Info

W3C’s CSS Schools – Great CSS Tutorials http://www.w3schools.com/css/ W3C Web site on CSS-

http://www.w3.org/Style/CSS/ Info on how web browsers implement CSS-

http://www.webreview.com/style/index.shtml

Insight from the Web Design Group-http://www.htmlhelp.com/reference/css

Lesson Overview The benefits and power of Cascading Style

Sheets (CSS) are without question You must understand the (X)HTML

document structure before applying CSS CSS Style Rules add a presentational layer Understand the three types of style sheets:

Inline, Embedded and External Inheritance, cascading, specificity, and rule

order determine how styles are applied