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

Cascading style sheets CSS

Embed Size (px)

Citation preview

Page 1: Cascading style sheets CSS

Cascading style sheets

CSS

http://www.flickr.com/photos/baylorbear78/3406180116/

Page 2: Cascading style sheets CSS

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

2

Page 3: Cascading style sheets CSS

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; }

3

Page 4: Cascading style sheets CSS

4SELECTOR SYNTAX

SUMMARY

Pattern Meaning* Matches any element.E Matches any E element (i.e., an element of type E).E F Matches any F element that is a descendant of an E element.E > F Matches any F element that is a child of an element E.E:first-child Matches element E when E is the first child of its parent.E:linkE:visited

Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).

E:activeE:hoverE:focus

Matches E during certain user actions.

E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined).

E + F Matches any F element immediately preceded by a sibling element E.E[foo] Matches any E element with the "foo" attribute set (whatever the value).E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning".

E[foo~="warning"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".

E[lang|="en"] Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".

DIV.warning Any DIV with a class of 'warning'E#myid Matches any E element with ID equal to "myid".

Page 5: Cascading style sheets CSS

5UNIVERSAL 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.

Page 6: Cascading style sheets CSS

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; }

Page 7: Cascading style sheets CSS

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; }

Page 8: Cascading style sheets CSS

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.

Page 9: Cascading style sheets CSS

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. Combinators are:

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.

Notation Meaning ExampleWhite space Descendent of body p> Child of body p+ Sibling relation div.intro + div

Page 10: Cascading style sheets CSS

10COMBINATOR: DESCENDENT

Examples of descendent selectors: div p { color:#f00; } div#myid li 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; }

Page 11: Cascading style sheets CSS

11COMBINATOR: 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>

Page 12: Cascading style sheets CSS

12COMBINATOR:

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>

Page 13: Cascading style sheets CSS

13ATTRIBUTE

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 att attribute (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; }

Page 14: Cascading style sheets CSS

14PSEUDO 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.

Pseudo name Description

:active Adds a style to an element that is activated

:first-child Adds a style to an element that is the first child of another element

:focus Adds a style to an element that has keyboard input focus

:hover Adds a style to an element when you mouse over it

:lang Adds a style to an element with a specific lang attribute

:link Adds a style to an unvisited link

:visited Adds a style to a visited link

Page 15: Cascading style sheets CSS

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

15

http://www.csszengarden.com/