Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3.

Cascading Style Sheets

CSS

CSS

Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties

(positioning) CSS3 (in development)

CSS2 Well supported by most modern browsers

CSS

Allows you to separate the structure of a page

from the presentation

Presentation = displayed/delivered

Presentation and formatting of content is defined

by the CSS rules

Structure & meaning is handled by XHTML

Before CSS, if you wanted all of your text to be

blue, you might assign a blue value to all of the

color tags one-by-one in the XHTML.

CSS - Benefits

Offers more control Type: control line spacing, and type size;

Rollovers: create rollover effects that don’t require images and javascript; Layout: you can layout entire pages

Less work: one css file can style an entire site (100s of pages)

Smaller files / faster downloads (no redundant styling tags & nested tables)

More accessible (meaningful content) Improved browser support

CSS

Structural Layer - Meaningful markup (XHTML)

accurately describe the meaning of content with XHTML tags

Presentation Layer - CSS Style Rules

describing how an element should look (selectors &

declarations)

Attach them: Structural Layer + Presentation Layer

External, Embedded, Inline

CSS - Rule Structure

Separate language with its own syntax

2 Parts

Selector: Selects the element to be affected

Declaration: “declares” a style for an selected element

Declaration block: property & value

CSS - Structure

Declaration block

Property: identifies what to change

Value: how to change it

Selector – example

h1{

font-size: small;

font-family: Georgia, ‘Times New Roman’, Times, serif;

color: #CC3300;

margin-top: 4em;

margin-bottom: 10em;

}

Types of Style Sheets

External (linked) Most powerful

A single style sheet can format hundreds of pages

(linked to each page)

To make changes – update the external style sheet

all page that are linked to it are updated.


External

Not part of the XHTML document

Saved in a separate .css file

You create a link from your XHTML

document to the .css file

<link rel = “stylesheet” href=“mystyles.css” type=“text/css”/>


Embedded

Embedded into the XHTML document (an internal

part of the XHTML)

All code placed inside the <head> tag

Affects only the one page its embedded in

<style type = “text/css”>



</style>


Inline Used when you need to override some other style

defined in an embedded or external style sheet

Part of the XHTML document

Less powerful

Usually used only to override other styles or when

you have an exception to a rule


InlinePart of the XHTML document

Written as an attribute of the tag

<body>

<h1 style=“color:red; font-family:arial”> Text is here.

</h1>

</body>

CSS - The Cascade

Inheritance (parents, children, ancestors, siblings)

All XHTML elements are contained within one another

Children inherit properties from a parent (Ex: if font-family:

“helvetica” is applied to the <body> tag, all children (<p>,<h1>,

<em>, etc) will be helvetica as well.

CSS - The Cascade

Cascade

System of hierarchy that determines which rules will be followed when

several sources of style info is assigned to the same elements

Style Sheet Hierarchy (the closer the style is to the content the more

weight it is given)

Browser default

User Settings (reader style sheets)

External Style Sheets (linked, then imported)

Embedded Style Sheets

Inline Style Sheets

Author !important

Reader !important

CSS - The Cascade

Cascade

System of hierarchy that determines which rules will be followed when

several sources of style info is assigned to the same elements

Style Sheet Hierarchy (the closer the style is to the content the more

weight it is given)

Browser default

User Settings (reader style sheets)

External Style Sheets (linked, then imported)

Embedded Style Sheets

Inline Style Sheets

Author !important

Reader !important

Meaningful Markup

<div>…</div>

Generic Elements

<div>…</div>

Generic block-level element

<span>…</span>

Generic inline element

Name them using id or class

div

<div>…</div>

Used like a container to group content

Gives context to the elements in the grouping

Give it a descriptive name with id or class

Ex: <div class=“products”> can be used to group an

<img> with <p> to show they are conceptually related

Ex: <div id=“news”> can be used to group a section of

content for context, structure or layout purposes.

span

<span>…</span>

Generic inline element

Used to add meaning to content

Ex: <ul>

<li> Andy: <span

class=“phone”>123.4567</span></li>

<li> Joe: <span

class=“phone”>101.0101</span></li>

</ul>

Element identifiers - id

Id identifier

Used to identify a piece of data

Unique element in the document

Value of id must be used only once in a document

<div id=“header”> (masthead & navigation here)</div>

<div id=“main”> (main content elements here) </div>

<div id=“links”>(list of links here)</div>

<div id=“news”>(news sidebar items here)</div>

<div id=“footer”>(copyright info, etc)</div>

Element identifiers - class

class identifier

Used to group similar elements

Multiple elements may share a class name

<div class=“listing”>

<img src=“book.gif” alt=“name” />

<p><cite>The Complete Manual of

Typography</cite>, James Felici</p>

<p>A combination of type history and examples of

good and bad type.</p>

</div>

<p class=“description”>A combination of type history and examples of good

and bad type.</p>

Type Selectors

Used to redefine a specific XHTML tag

body, td, th{

font-family: Verdana, Arial, Helvetica,

sans-serif;

font-size: 2em;

color: #33CCFF; }

Descendant Selectors

Targets elements that are contained within

another element

Ex: li em { color: silver; }

targets emphasized text only when it appears in a list

item (li)

Ex: ol a em { font-varient: small-caps; }

ID Selectors

Targets elements by their id value

Used to style a specific element in a site or group of pages

#divSidebar{

margin-left: 10 px;

text-align: center;

}

In your XHTML document you’d need the following:

<div id=“divSidebar”> This is the sidebar area of the page. </div>

Ex: In the xhtml file: <li id=“nameofstyle”> Item #1 in list </li>

In the .css - #nameofstyle {color:red;}

Class Selectors

Used to “classify” elements into a conceptual

group

Multiple elements can share a class name

Used to specify a custom selector name and

apply that style to an XHTML element

Ex: In your .css file:

.smallprint {font-size: 10px;}

In your XHTML document:

<p class=“smallprint”> This is small

text. </p>

Hierarchy of Selectors

Most to least specific

ID Selectors

Class Selectors

Contextual Selectors

Individual Element Selectors (type selectors)

Pseudo-Class Selectors

Used to describe the state of an

element. Assigns a style that happens

when an object is a certain state

A:hover{

text-decoration:none;

color: #33CC33

Pseudo-Class Selectors

Common Pseudo-Classes

:link- A style applied to an element that has not

yet been visited

:visited – A style applied to an element that has

been visited

:hover – A style applied to an element when a

mouse hovers over it (link)

:active – A style applied to an element when the

user clicks or activates the element

Resources

Niederst, J. (2007). Learning Web Design. O'Reilly Meida, Inc.Chapter 11: Cascading Style Sheets Orientation

Andrew, R. (2007). CSS Anthology. Sitepointhttp://www.sitepoint.com/books/cssant1/

Meyer, E. (2006). CSS Web Site Design. PeachpitPress

Eric Meyer: http://meyerweb.com/eric/writing.html

Let’s see how this works…

Cascading Style Sheets CSS. Standard defined by the W3C CSS1 (released 1996) 50 properties CSS2 (released 1998) 150 properties (positioning) CSS3.

Documents