Today’s objectives  Review  CSS | Rules | Declarations  HTML Structure document  Class asignment

TYPES OF SELECTORS CSS

Types of selectors  The Universal Selector* { }  Tag or HTML Selectorsh1 { } p { } body { }  Class Selectors.imageframes { }  ID Selectors#main-navigation { }  Selecting in contexth1 strong { }  Attribute Selectorsli img[title] { }

 Can put a collection of rules in a file and refer to it from within an HTML document  link element with href attribute points to stylesheet, rel="stylesheet", type="text/css“ External Stylesheets External styles are preferred over inline and embedded styles

5 The Element  A self-contained tag  Placed in the header section  Purpose: associates the external style sheet file with the web page.  Example:

CSS Guidelines  Review the design of the page  Configure global font and color properties for the body selector  Identify typical elements (such as,, and so on) and declare style rules for these if needed.  Identify page areas such as logo, navigation, footer, and so on – configure an appropriate class or id for each.

HTML TREE: RELATIONSHIP OF ONE ELEMENT TO ANOTHER.

HTML Tree My Web Page Main Topic A web page about the days of the week, specifically Tuesday.

HTML Tree

HTML Tree Ancestor to all tags Ancestor to h1, p, strong Siblings Child of Descendent of Descendent of and

HTML Tree  Ancestor: tag that wraps around another tag. ancestor of all other tags  Descendent: A tag inside one or more tags.  Parent: tag’s closest ancestor HOME  Child: tag directly enclosed by another tag. HOME…

HTML Tree  Sibling: tags that are children of same tag. Siblings

HTML Tree  Sibling: tags that are children of same tag. Siblings h1+p {color : green;}

Selectors | Context | Descendent Descendent selector - context  h1 strong { color: red; } Any tag inside a level 1(h1) is red, but other instances of the tag on the page aren’t affected. Hello World  li a { font-family: Arial; }  Any tag inside a line item is Arial font, but other instances of the tag on the page aren’t affected.

Specificity | Descendent selectors  Specific descendent selectors override less specific selectors li a {color : green;} All anchors ( ) in line items are green ol li a {color : green;} Only anchors in line item in ordered lists are green

Child | descendent selectors  div > h1 {color : blue; }  All heading 1 that are children of div will be blue. Hello world Hello everyone Paragraph text…

Adjacent Siblings  A tag that appears immediately after another tag in HTML h1+p {color : green;} Paragraphs that are adjacent to heading 1 will be green.

Sibling: tags that are children of same tag. h1+p { } My Web Page Main Topic A web page about the days of the week, specifically Tuesday. These elements are adjacent: h1+p.

Attribute Selectors  Format a tag based on any attributes it has. img[title] {border : solid 4px #EFEFEF;} All images with a title attribute will have a border

Attribute Selectors li img[title] {border : solid 4px #EFEFEF;} All images that are line items with a title attribute will have a border

Attribute Selectors  Can be used with classes.hiLight[title] {color : red;} 186,000 MPS Tags using.hiLight class and title attribute are red

Attribute Selectors | ^ and $ Format external links: a[href^=" { color : yellow; } ^ - begins with Any link that begins with “ is yellow a[href$=".zip"] { color : green; } $ - Ends with Any link URL that ends with “zip” is green.

Attribute Selectors | * img[src*="Ire"] {border : solid 5px green;}  * - Contains  All images where src attribute contains “_Ire” get a green, solid border.

Attribute Selectors | * img[src*="Ire"] {border : solid 5px green;}

Pseudo-Classes  a:link| a:link { color : #EFEFEF; }  a:visited | a:visited { color : #CCCCCC; }  a:hover| a:hover { color : # F33333; }  a:active | a:active {color : #B2F511;}  Hover: (these will also work)  h1:hover { color : #FFFFFF; } .hiLite:hover { color : #FFFFFF; }

Pseudo-Classes  Proper way to order four link pseudo-classes: 1. a:link { color: #F60; } 2. a:visited { color: #900; } 3. a:hover { color: #F33; } 4. a:active {color: #B2F511; }  If order is changed, the hover and active don’t work.

Pseudo-elements  :first-letter – p:first-letter {font-size : 2em; font-weight: bold; color: red;}  :first-line – p:first-line {font-size : 2em; font-weight: bold; color: red;}.hiLite:first-line { text-transform: uppercase; }

Pseudo-element | :before  :before  Adds content before an element. p:before {content : "ON SPECIAL! " } p.onSpecial:before {content : "ON SPECIAL! “; color : red;}

Pseudo-element | :after  :after  Adds content after an element  p:after {content: url(bullet_Ire.png);}  p.tip:after {content: url(bullet_Ire.png);}

Pseudo-element | :first-child  :first-child  the first of all children an OL may have. ol li:first-child { font-size:1.2em; } Item 1 Item 2 Item 3