Cascading Style Sheets Level 2

Size: px

Start display at page:

Download "Cascading Style Sheets Level 2"

Julius Booker
6 years ago
Views:

1 Cascading Style Sheets Level 2

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

3 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

4 3 Layers of Web Page Construction

5 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

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

7 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

8 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>

9 CSS Level 1 Review, Selectors Tag Selectors Can use any HTML tag as a selector body, div, section, nav, footer Pages 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)

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 Pages 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

11 CSS Level 1 Review, Family Tree Ancestor Descendent Parent Child Sibling Pages 51-52

12 CSS Level 1 Review, Inheritance Pages 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

13 CSS Level 1 Review, The Cascade Inherited Styles Accumulate The most specific selector wins Selector Type Points Pages 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 byline p.byline #banner a:link h2 strong

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

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

16 CSS Level 1 Review, Box Model Pages Margin Border Padding

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

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

19 Element Dimensions 25 px margin-left 10 px padding all around 300px W Content 1 px border all around = 320 px wide element = 322 px wide element = 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 +

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

21 Let s now begin CSS Level 2 Starting on page 127, Using Web Fonts

CSS. https://developer.mozilla.org/en-us/docs/web/css

CSS. https://developer.mozilla.org/en-us/docs/web/css CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties