Upload
finn-theroulde
View
217
Download
0
Embed Size (px)
Citation preview
Cascading style sheets
CSS
http://www.flickr.com/photos/baylorbear78/3406180116/
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
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
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".
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.
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. 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
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; }
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>
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>
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; }
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
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/