CSS

1. CSS http://www.flickr.com/photos/baylorbear78/3406180116/ Cascading style sheets

2. Overview of CSS • HTML is about content and structure (semantics) • CSS is all about style (format) • Allows a separation between style and content • Easier to maintain consistent pages across one web application since one style can be applied to all html files • HTML pages become smaller and content focused

3. CSS Syntax • CSS works by • Select elements in a document and set their properties • These directives are collected into a 'stylesheet'. • General syntax • selector {property: value} • Specific example • body { color: black; font-size: 2em; }

4. Selector Syntax Summary

5. Universal Selector • The universal selector is represented by an asterisk, “*”, and matches all elements in the document. • General syntax: * { css-rules } • One use of the universal selector that has become quite popular is using it to set the margins and paddings of all elements to zero: • * { margin:0; padding:0; } • This is sometimes referred to as the Global White Space Reset.

6. Type Selectors • A type selector matches every instance of a particular element type. • General syntax: • tagname{ css-rules } • Examples • p { font-size : 2em; } • h1 { font-family : sans-serif; } • b { margin : 5px; }

7. Class Selectors • The class selector is represented by a period, “.” • General syntax: selector.classname{ css-rules } • Examples • p.info { background: #ff0; } • *.accept { color: green } • .accept{ color: green } • h1.accept{ color: green } • p.accept.uwl{ color: green; background-color:red; }

8. ID Selector • The ID selector is represented by a hash sign, “#”, and targets elements based on their id value. • General syntax: tagname#id { css-rules } • #info { background:#ff0; } • p#info{ background:#ff0; } • An id value must be unique within a document. Therefore an ID selector can only apply to a single element in a document.

9. Combinators • A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match. • A selector is a chain of one or more simple selectors separated by combinators. Combinatorsare: • A chain of selectors imposes additional constraints on the preceding selector. It is a filtering pipeline of sorts. • One pseudo-element may be appended to the last simple selector in a chain, in which case the style information applies to a subpart of each subject.

10. Combinator: Descendent • Examples of descendent selectors: • div p { color:#f00; } • div#myidli p.info { color:#f00; } • Descendant selectors allow you to target elements without giving them a class name or an id. Let’s assume you have a navigation list consisting of the following markup: • <ul id="nav"> • <li><a href="#">Link 1</a></li> • <li><a href="#">Link 2</a></li> • <li><a href="#">Link 3</a></li> • </ul> • To target only those list items and links that are contained within the navigation list you could use the following CSS: • #nav li { display:inline; } • #nav a { font-weight:bold; }

11. Combinator: Child Selectors • Example of child selectors: • div > strong { color:#f00; } • Which elements are selected? • <div> • <strong>Text one</strong> • <p><strong>Text two</strong></p> • </div>

12. Combinator: Adjacent Siblings • The selector matches an element which is the next sibling to the first element. The elements must have the same parent and the first element must immediately precede the second element: • p + p { color:#f00; } • What is selected? • <div> • <p>Paragraph one</p> • <p>Paragraph two</p> • </div>

13. Attribute Selectors • Attribute selectors match elements based on the presence or value of attributes. • There are four types of attribute selectors: • [att]: Matches elements that have an attattribute (regardless of value). • [att=val]: Matches elements that have an att attribute with a value of exactly “val”. • [att~=val]: Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces. • [att|=val]: Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc. • Examples: • p[title] { color:#f00; } • div[class=error] { color:#f00; } • td[headers~=col1] { color:#f00; } • p[lang|=en] { color:#f00; } • blockquote[class=quote][cite] { color:#f00; }

14. Pseudo Class Selectors • Elements can be styled based on the dynamic state rather than the static document structure. • The following pseudo-classes are common. Others exist.

15. Cascading SS • Cascading • Since an elements style can be specified using different selectors, it is possible for conflicting styles to be specified in those different places. • A set of rules is used in order of most specific to most general to select the style that is applied. • This is called a cascade (very similar to dynamic dispatching in OO programming) • The style sheet also forms a cascade • Browser default, user, external, internal, element-level http://www.csszengarden.com/