Cascading Style Sheets Level 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

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

3 Layers of Web Page Construction

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

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

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

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

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

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

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

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

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

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 to checkhttp:// Popular Units of Measurements px – pixels (finite) % - percentage (relative) em – ems (relative) Styling Lists Pages

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

CSS Level 1 Review, Box Model Pages Margin Border Padding

Element Dimensions 300px W Content 10 px padding all around = 320 px wide element Pages

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

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

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

CSS Level 1 Review, Web Fonts Font files stored on a web font-family Host the font files yourself Pages Use a service (Google) Pages Pages

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

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