1. ADVANCED CSS William Neely CEO, Piecewise.com

2. CSS FONTS AND TEXT CSS ‣ Line-height allows to indicate the amount of space between lines; allows for equal spacing on top and bottom. Allows for text to vertically center in a box ‣ Accepts px,em,% or no units (preferred) ‣ Letter-spacing Controls spacing between characters; useful with specialty fonts ‣ Distance between characters ‣ Text-align ‣ Right,left,center ‣ Will apply to images and other content ‣ Margin:0 auto ‣ Text-decoration used with links; can also have text-decoration: none ‣ Underline,overline,line-through ‣ Text-transform allows to work on customer submissions ‣ Uppercase,lowercase,capitalize,none 2

3. IDS AND CLASSES (SELECTORS) SELECTORS ‣ IDs are unique ‣ One per page ‣ One per element ‣ Wrong: ‣ Right: ‣ Classes are non-unique ‣ Multiple elements with same class ‣ and ‣ Elements can have multiple classes ‣ ‣ Grouping

4. EX: IDS AND CLASSES SELECTORS ‣ Box time again!

5. *INSERT ALL INCLUSIVE DEITY’S NAME HERE*’S STYLESHEET SELECTORS.FEWD{use a period before class number-eyes:2; number-ears:2; computer:MAC; }.male{ gender:male; }.female{ gender:female; } #Will{ this is an ID; over rides classes which over rides tags eye-color:hazel; computer:PC; } To create Will: Notes: Names should be as short as legible Nav vs navigation Atr vs author

6. PSEUDO CLASSES CSS2/CSS3 PSEUDO CLASS ONLY EXISTS IN CSS, NOT HTML ‣ Applied to particular elements ‣ Not defined in HTML ‣ Browser defined ‣ Order matters ‣ A ‣ :link ‣ :hover ‣ :visited ‣ :active ‣ A:hover applies color when hovering over text ‣ Input ‣ :focus ‣ Input:focus {outline: none} ‣ :first-child ‣ #Container>div>h1:first-child ‣ :nth-child(N) ‣ :nth-of-type(N) ‣ :last-child ‣ :only-child ‣ empty ‣ :checked ‣ :not(“insert selector here”) ‣ http://reference.sitepoint.com/c ss/css3psuedoclasses

7. BOX MODEL LAYOUT The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. –W3.org Styles that apply: Dimensions Height, width Border Margin Padding Ex: Creating a template

8. TEMPLATE

9. GAME: WEB INSPECTOR HUNT Review usage of web inspector Go to techcrunch.com Answer the following: 1)What color are the links on this site? 2)What heading tag is being used for the title of each blog post? 3)What is the width/height of an image on the page? 4)How wide is the main “container” div of the site? 5)What CSS declaration would you add to the web inspector to make all the images disappear? 1 point per win

10. INLINE AND BLOCK Block elements break before and after to Inline no break span {display: black;} {display: inline-block} displays images on same line as others

11. BROOK & LYNN EXERCISE

12. CHALLENGE QUESTION CHALLENGE ‣ Create 10 divs ‣ Height:50px ‣ Width:200px ‣ Starting from 1, change the background to red on every third div ‣ Bonus 2 points for most succinct method

13. CHALLENGE QUESTION 2 Create a Venn diagram using three divs. Start with (inside your container): And in style.css:.left{ Float:left; }

14. WORK ON BAND PAGE Template CSS etc