Advanced css

1. Advanced css William Neely CEO, Piecewise.com

2. CSS CSS Fonts and Text 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

3. selectors IDs and classes (Selectors) IDs are unique • One per page • One per element • Wrong: <div id=“blah1 blah2”> • Right: <div id=“blah1”> Classes are non-unique • Multiple elements with same class • <div class=“boldMe”> and <p class=“boldMe”> • Elements can have multiple classes • <div class=“boldMeitalicizeMe”> • Grouping

4. Selectors Ex: IDs and Classes Box time again!

5. selectors *insert all inclusive deity’s name here*’s Stylesheet To create Will: <div id=“Will” class=“FEWD male”></div> Notes: Names should be as short as legible Navvs navigation Atrvs author .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; }

6. Pseudo Classes CSS2/CSS3pseudo class only exists in css, not html :nth-child(N) :nth-of-type(N) :last-child :only-child empty :checked :not(“insert selector here”) http://reference.sitepoint.com/css/css3psuedoclasses 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

7. layout Box Model 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: What color are the links on this site? What heading tag is being used for the title of each blog post? What is the width/height of an image on the page? How wide is the main “container” div of the site? 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 <div> <h1> to <h6> <p> Inline no break <img> <span> span {display: black;} {display: inline-block} displays images on same line as others <input>

11. Brook & lynn exercise

12. Challenge Challenge Question 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): <div class=“left”></div> <div class=“left”></div> <div class=“left”></div> And in style.css: .left{ Float:left; }

14. Work on Band page Template CSS etc