1. CSS Syntax & Selector Mark Chen2/13/20141

2. CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations:The selector is normally the HTML element you want to style.Each declaration consists of a property and a value.The property is the style attribute you want to change. Each property has a value.2/13/20142 3. CSS Selectors SelectorExampleExample descriptionCSS.class.introSelects all elements with class="intro"1#id#firstnameSelects the element with id="firstname"1**Selects all elements2elementpSelects all

elements1element,elementdiv,pSelects all

elements and all

elements1element elementdiv pSelects all

elements inside

elements1element>elementdiv>pSelects all

elements where the parent is a

element2element+elementdiv+pSelects all

elements that are placed immediately after 2

elements2/13/20143 4. Attribute Selectors SelectorExampleExample descriptionCSS[attribute][target]Selects all elements with a target attribute2[attribute=value][target=_blank]Selects all elements with target="_blank"2[attribute~=value][title~=flower]Selects all elements with a title attribute containing the 2 word "flower"[attribute|=value][lang|=en]Selects all elements with a lang attribute value starting 2 with "en"[attribute^=value]a[src^="https"]Selects every element whose src attribute value begins with "https"3[attribute$=value]a[src$=".pdf"]Selects every element whose src attribute value ends with ".pdf"3[attribute*=value]a[src*="w3schools"] Selects every element whose src attribute value contains the substring "w3schools"32/13/20144 5. CSS Selectors SelectorExampleExample descriptionCSS:beforep:beforeInsert content before the content of every

element2:afterp:afterInsert content after every

element2:first-childp:first-childSelects every

element that is the first child of its parent2:last-childp:last-childSelects every

element that is the last child of its parent3:nth-child(n)p:nth-child(2)Selects every

element that is the second child of its parent3:nth-last-child(n)p:nth-last-child(2)Selects every

element that is the second child of its parent, counting from the last child3:nth-of-type(n)p:nth-of-type(2)Selects every

element that is the second

element of its parent3:nth-last-of-type(n)p:nth-last-of-type(2)Selects every

element that is the second

element of its parent, counting from the last child32/13/20145 6. The CSS Box Model250px (width) + 20px (left + right padding) + 10px (left + right border) + 20px (left + right margin) ---------------------------------= 300px 2/13/2014The margin property can have from one to four values. margin:25px 50px 75px 100px; margin:25px 50px 75px; & margin:25px 50px; & & margin:25px; &&&6 7. div ol, ul, li Can work on IE, Chrome2/13/2014But not work on firefox7 8. :after or :before - content Can work on Chrome, firefox, IENote: For :before or :after to work in IE8, a must be declared. 2/13/20148 9. Reference W3Schools - CSS Syntax W3Schools - CSS Selector Reference http://www.w3schools.com/css/css_syntax.asp http://www.w3schools.com/cssref/css_selectors.aspW3Schools - The CSS Box Model http://www.w3schools.com/css/css_boxmodel.asp2/13/20149