Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cascading style sheets CSS

Similar presentations


Presentation on theme: "Cascading style sheets CSS"— Presentation transcript:

1 Cascading style sheets CSS

2 O VERVIEW 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

3 CSS S YNTAX  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

4 S ELECTOR S YNTAX S UMMARY 4 PatternMeaning *Matches any element. EMatches any E element (i.e., an element of type E). E FMatches any F element that is a descendant of an E element. E > FMatches any F element that is a child of an element E. E:first-childMatches element E when E is the first child of its parent. E:link E: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:active E:hover E: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 + FMatches 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.warningAny DIV with a class of 'warning' E#myidMatches any E element with ID equal to "myid".

5 U NIVERSAL S ELECTOR  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. 5

6 T YPE S ELECTORS  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; } 6

7 C LASS S ELECTORS  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; } 7

8 ID S ELECTOR  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. 8

9 C OMBINATORS  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. 9 NotationMeaningExample White spaceDescendent ofbody p >Child ofbody p +Sibling relationdiv.intro + div

10 C OMBINATOR : D ESCENDENT  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: Link 1 Link 2 Link 3  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; } 10

11 C OMBINATOR : C HILD S ELECTORS  Example of child selectors:  div > strong { color:#f00; }  Which elements are selected?   Text one  Text two  11

12 C OMBINATOR : A DJACENT S IBLINGS  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?   Paragraph one  Paragraph two  12

13 A TTRIBUTE S ELECTORS  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; } 13

14 P SEUDO C LASS S ELECTORS  Elements can be styled based on the dynamic state rather than the static document structure.  The following pseudo-classes are common. Others exist. 14 Pseudo nameDescription :activeAdds a style to an element that is activated :first-childAdds a style to an element that is the first child of another element :focusAdds a style to an element that has keyboard input focus :hoverAdds a style to an element when you mouse over it :langAdds a style to an element with a specific lang attribute :linkAdds a style to an unvisited link :visitedAdds a style to a visited link

15 C ASCADING 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


Download ppt "Cascading style sheets CSS"

Similar presentations


Ads by Google