Cascading Style Sheets Level 2
Course Objectives, Session 1 Level 1 Quick Review Chapter 6 Revisit: Web Fonts Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your Site s Navigation Begin Chapter 11: Formatting Tables and Forms
Course Objectives, Session 2 Finish Chapter 11: Formatting Tables and Forms Chapter 12: Introducing CSS Layout Chapter 15: Responsive Web Design If time allows: Chapter 14: Positioning Elements on a Web Page
3 Layers of Web Page Construction http://reference.sitepoint.com/css/css
CSS Level 1 Review, HTML Tags <div> tag HTML Block level element, creates spacing before and after itself <span> tag HTML Inline level element, does not affect the spacing before and after itself Additional tags are referenced on page 23
CSS Structure Pages 22-23 Declaration Selector Property Value p { } color: red; font-size: 1.5em; Declaration Block
CSS Level 1 Review, Where CSS Lives Internal (Embedded) Style Sheets Goes inside the <head> of the html page All internal styles are encased around the <style> tag <head> <meta charset="utf-8"> <title>inheritance In Action</title> <style> p { color: #FF6600; border-left: solid 25px #BD8100; }.pagestyle { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 18px; } </style> </head> Page 25
CSS Level 1 Review, Where CSS Lives External Style Sheets CSS lives in a separate file with a.css extension Use the <link> tag to reference the CSS file (within the <head>) Page 26 <head> <meta charset="utf-8"> <title>inheritance In Action</title> <link href= styles/styles.css" rel="stylesheet"> </head>
CSS Level 1 Review, Selectors Tag Selectors Can use any HTML tag as a selector body, div, section, nav, footer Pages 42-48 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)
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 Pages 49-54 Descendent Selectors Pinpointing to a specific situation h1 strong { } color: red; The above example means, Look for a <h1> tag and then inside there, look for a <strong> tag. If this situation is found, change the font color of whatever is inside the <strong> tag to red. Try not to create overly complex descendent selectors
CSS Level 1 Review, Family Tree Ancestor Descendent Parent Child Sibling Pages 51-52
CSS Level 1 Review, Inheritance Pages 85-89 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
CSS Level 1 Review, The Cascade Inherited Styles Accumulate The most specific selector wins Selector Type Points Pages 98-104 Tag (h1) 1 Class (.alert) 10 ID (#main-content) 100 Inline (<h1 style= font:blue; >) 1000 (try to avoid this) Selector ID CLASS TAG Total Points p 0 0 1 1.byline 0 1 0 10 p.byline 0 1 1 11 #banner 1 0 0 100 a:link 0 1 1 11 h2 strong 0 0 2 2
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 here to check: http://www.w3schools.com/ http://caniuse.com/ Popular Units of Measurements px pixels (finite) % - percentage (relative) em ems (relative) Styling Lists Pages 121-172
CSS Level 1 Review, Box Model Pages 185-204 Margin Border Padding Colliding Margins Using Negative Numbers (with margin property) Borders Rounded Corners Drop Shadows
CSS Level 1 Review, Box Model Pages 193-212 Margin Border Padding
Pages 204-206 Element Dimensions 10 px padding all around 300px W Content 300 + 10 + 10 = 320 px wide element
Element Dimensions 10 px padding all around 300px W Content 1 px border all around 300 + 10 + 10 = 320 px wide element 300 + 10 + 10 + 1 +1 = 322 px wide element
Element Dimensions 25 px margin-left 10 px padding all around 300px W Content 1 px border all around 300 + 10 + 10 = 320 px wide element 300 + 10 + 10 + 1 +1 = 322 px wide element 300 + 10 + 10 + 1 +1 + 25 = 347 px wide element
Element Dimensions 347 px wide 25 px margin-left 10 px padding all around 300px W Content 1 px border all around 300 + 10 + 10 = 320 px wide element 300 + 10 + 10 + 1 +1 = 322 px wide element 300 + 10 + 10 + 1 +1 + 25 = 347 px wide element
Let s now begin CSS Level 2 Starting on page 127, Using Web Fonts