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 - Benefits  Offers more control  Precise type and layout control: 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)

CSS Allows you to separate the structure of a page from the presentation Structural Layer – Defines document structure/meaning(HTML) accurately describe the meaning of content with HTML tags Presentation Layer - CSS Style Rules Presentation = displayed/delivered (screen, mobile, print) Describes 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 HTML document Saved in a separate.css file You create a link from your HTML document to the.css file

Types of Style Sheets Embedded Embedded into the HTML document (an internal part of the HTML) 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 HTML 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 HTML document Written as an attribute of the tag Text is here.

CSS - The Cascade Inheritance (parents, children, ancestors, siblings) All HTML elements are contained within one another Descendants: = descendants of Element contained directly within another element is child child of Inherit certain properties from their parent element Children inherit properties from a parent (Ex: if font-face: “helvetica” is applied to the tag, all children (,,, etc) will be helvetica as well. If p{font-size: small; font-family: sans-serif’} any em elements contained within the paragraph will inherit these properties

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/User Agent default (user agent style sheet) User Settings (reader/user style sheets) External Style Sheets (linked link, then Embedded Style Sheets (style) Inline Style Sheets (style attribute in an opening tag) Author !important Reader !important

Specificity & Rule Order Rule Order – conflicts within style rules of identical weight, whichever come last “wins” p { color: red; } p { color: blue; } p { color: green; }  Specificity: When two rules in a single style sheet conflict – the type of selector is used to determine which rule is followed (the more specific the selector, the more weight it is given to override conflicting rules). p { color: red; color: blue; color: green; }

CSS Selectors

Element Type Selectors Used to redefine a specific HTML tag body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 2em; color: #33CCFF; } p {color: blue;}

Grouped Selectors Apply the same style property to a number of elements Ex: h1, h2, p, em, img { border: 1px solid blue; }

Descendant Selectors (contextual selector) 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; } Ex: h1 em, h2 em, h3 em { color: red; } Other contextual Selectors p > em {font-weight: bold;} child selector (any with the rule applies; if you have an within an in this same paragraph rule does not apply) h1 + p {font-style: italic;} adjacent sibling selectors (targets element directly after) h1 ~ h2 {font-weight: normal;} general sibling selectors (targets any that appears after an within the same parent element).

Element identifiers - id ID selectors Targets an element by a unique identifying name Can be used with any HTML element (commonly used to give meaning to generic div and span elements) Allows you to target elements by their id attribute value The # symbol identifies an ID selector Unique element in the document

ID Selectors Targets elements by their id value Used to style a specific element in a site or group of pages Hello World! This paragraph is not affected by the style. #para1{ color: red; text-align: center; } 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)

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 HTML element Ex: In your.css file:.smallprint {font-size: 10px;}.special { color: orange; } In your HTML document: This is small text. This is orange text.

Hierarchy of Selectors ID selectors are more specific than (and will override) Class selectors, which are more specific than (and will override) Contextual selectors, which are more specific than (and will override) Individual element selectors Ex: strong {color: red; } h1 strong {color: blue; } – contextual selector p {line-height: 1.2em; } blockquote p {line-height: 1em; } – contextual selector p.intro {line-height: 2em; } – class selector

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

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:

Resources  Niederst, J. (2012). Learning Web Design. O'Reilly Meida, Inc.Chapter 11/12: CSS for Presentation  Andrew, R. (2007). CSS Anthology. Sitepoint  Meyer, E. (2006). CSS Web Site Design. Peachpit Press  Eric Meyer: