1. Cascading Style Sheets Level 2

2. Course Objectives, Session 1 Level 1 Quick Review Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your Site’s Navigation Begin Chapter 11: Formatting Tables and Forms

3. Course Objectives, Session 2 Finish Chapter 11: Formatting Tables and Forms Chapter 12: Introducing CSS Layout Chapter 14: Responsive Web Design If time, Chapter 16: CSS for the Printed Page

4. http://reference.sitepoint.com/css/css 3 Layers of Web Page Construction

5. CSS Level 1 Review, HTML Tags tag HTML Block level element, creates spacing before and after itself tag HTML Inline level element, does not affect the spacing before and after itself Additional tags are referenced on page 23

6. CSS Structure p { color: red; font-size: 1.5em; } Selector Property Value Declaration Block Declaration Block Page 37 - 38 Declaration

7. CSS Level 1 Review, Where CSS Lives Internal (Embedded) Style Sheets Goes inside the of the html page All internal styles are encased around the tag Inheritance In Action p { color: #FF6600; border-left: solid 25px #BD8100; }.pageStyle { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 18px; } Page 40

8. CSS Level 1 Review, Where CSS Lives External Style Sheets CSS lives in a separate file with a.css extension Use the tag to reference the CSS file (within the ) Inheritance In Action Page 41

9. CSS Level 1 Review, Selectors Tag Selectors Can use any HTML tag as a selector body, div, section, nav, footer… Class & Id Selectors You create the name, should be something meaningful Only allowed to use letters, numbers, hyphens and underscores Class name always starts with a period “.” and then a letter ID name always starts with a period “#” and then a letter Case sensitive 2 step deal: Needs to be a definition (internal or external location) and a reference (class=“alert” or id=“main-content”) Class can be referenced in multiple HTML tags on the same page ID can only be reference ONCE per page (try to avoid creating ID CSS) Pages 56-61

10. CSS Level 1 Review, Selectors Grouped Selectors Selector names are separated with a comma “,” Think of the comma as “or” Use to keep code efficient and more organized Descendent Selectors Pinpointing to a specific situation h1 strong { color: red; } The above example means, Look for a tag and then inside there, look for a tag. If this situation is found, change the font color of whatever is inside the tag to red. Try not to create overly complex descendent selectors Pages 62-66

11. CSS Level 1 Review, Family Tree Ancestor Descendent Parent Child Sibling Pages 64-65

12. CSS Level 1 Review, Inheritance The process by which some CSS properties applied to one tag are passed on to nested tags font property is inherited border property is not inherited Pages 93-96

13. CSS Level 1 Review, The Cascade Inherited Styles Accumulate The most specific selector wins Pages 103-116 Selector TypePoints Tag (h1)1 Class (.alert)10 ID (#main-content)100 Inline ( )1000 (try to avoid this) SelectorIDCLASSTAGTotal Points p0011.byline01010 p.byline01111 #banner100100 a:link01111 h2 strong0022

14. CSS Level 1 Review, Formatting Text Properties Multitude of formatting like changing the font family, color, bolding, spacing, and even adding a drop shadow Remember older browsers will not recognize new CSS properties. Can go to http://www.w3schools.com/ to checkhttp://www.w3schools.com/ Popular Units of Measurements px – pixels (finite) % - percentage (relative) em – ems (relative) Styling Lists Pages 127-178

15. CSS Level 1 Review, Box Model Colliding Margins Using Negative Numbers (with margin property) Borders Rounded Corners Drop Shadows Pages 193-212 Margin Border Padding

16. CSS Level 1 Review, Box Model Pages 193-212 Margin Border Padding

18. Element Dimensions 300px W Content 10 px padding all around 300 + 10 + 10 = 320 px wide element Pages 212-213

19. Element Dimensions 300px W Content 10 px padding all around 300 + 10 + 10 = 320 px wide element 1 px border all around 1 px border all around 300 + 10 + 10 + 1 +1 = 322 px wide element

20. Element Dimensions 300px W Content 10 px padding all around 300 + 10 + 10 = 320 px wide element 1 px border all around 1 px border all around 300 + 10 + 10 + 1 +1 = 322 px wide element 25 px margin-left 25 px margin-left 300 + 10 + 10 + 1 +1 + 25 = 347 px wide element

21. Element Dimensions 300px W Content 10 px padding all around 300 + 10 + 10 = 320 px wide element 300 + 10 + 10 + 1 +1 = 322 px wide element 1 px border all around 1 px border all around 25 px margin-left 25 px margin-left 300 + 10 + 10 + 1 +1 + 25 = 347 px wide element 347 px wide

22. CSS Level 1 Review, Web Fonts Font files stored on a web server @font-face font-family Host the font files yourself Pages 137-143 Use a service (Google) Pages 146-152 Pages 132-153

24. Let’s now begin CSS Level 2 Starting on page 239, Adding Graphics to Web Pages

25. Let’s now continue on with Styling Forms in Chapter 11, Starting on page 384