Cascading Style Sheets 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.

Types of Style Sheets 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

Types of Style Sheets Embedded Embedded into the XHTML document (an internal part of the XHTML) All code placed inside the tag Affects only the one page its embedded in <!-- h1{color:red; font-family: Arial;} -->

Types of Style Sheets 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

Types of Style Sheets Inline Part of the XHTML document Written as an attribute of the tag Text is here.

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 tag, all children (,,, 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 …

Generic Elements … Generic block-level element … Generic inline element Name them using id or class

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: can be used to group an with to show they are conceptually related Ex: can be used to group a section of content for context, structure or layout purposes.

span … Generic inline element Used to add meaning to content Ex: Andy: Joe:

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 (masthead & navigation here) (main content elements here) (list of links here) (news sidebar items here) (copyright info, etc)

Element identifiers - class class identifier Used to group similar elements Multiple elements may share a class name The Complete Manual of Typography, James Felici A combination of type history and examples of good and bad type. A combination of type history and examples of good and bad type.

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: This is the sidebar area of the page. Ex: In the xhtml file: Item #1 in list 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: This is small text.

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. Sitepoint  Meyer, E. (2006). CSS Web Site Design. Peachpit Press  Eric Meyer:

Let’s see how this works…