ITI 133 HTML 5 Desktop and Mobile Level
ITI 133: HTML 5 Desktop and Mobile Level I Session 2 - Chapter 4 How to use CSS to Format the Elements of a Web Page www. profburnett. com
Session Outline § § § Exercise 1 - How to provide CSS to web pages Exercise 2 - CSS with HTML 5 Semantic Tags Exercise 3 - How to Specify Measurements and Colors Exercise 4 - Code Selectors Exercise 5 - Working with Text 9/25/2020 Copyright © Carl M. Burnett 2
Exercise 1 How to provide CSS to web pages 9/25/2020 Copyright © Carl M. Burnett 3
Three Ways to Provide Stylization External Style Sheet (External) <link rel="stylesheet" href="styles/main. css"> Embed the styles in the head section (Embedded) <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 87. 5%; } h 1 { font-size: 250%; } </style> Apply styles to a single element (Inline) <h 1 style="font-size: 500%; color: red; "> Valley Town Hall</h 1> 9/25/2020 Copyright © Carl M. Burnett 4
Head element - Two Style Sheets <head> <title>San Joaquin Valley Town Hall</title> <link rel="stylesheet" href=". . /styles/main. css"> <link rel="stylesheet" href=". . /styles/speaker. css"> </head> The sequence in which styles are applied 1. First external style sheet 2. Last external style sheet 9/25/2020 Copyright © Carl M. Burnett 5
How Cascading Works 1. Default rule (Browser default) 2. External style sheet 3. Internal style sheet (in the head section) 4. Inline style (inside an HTML element) 5. !important rule for web page 6. !important rule for user style sheet 9/25/2020 Copyright © Carl M. Burnett 6
Exercise 2 CSS with HTML Semantic Tags 9/25/2020 Copyright © Carl M. Burnett 7
CSS with HTML Semantic Tags Older browsers cannot interpret HTML 5 elements • • • article aside figure header nav section Java. Script for HTML 5 Semantic Tags <head> <script> document. create. Element(article); document. create. Element(aside ); document. create. Element(figure ); document. create. Element(footer ); document. create. Element(header ); document. create. Element(nav ); document. create. Element(section ); </script> </head> CSS for HTML 5 Semantic Tags article, aside, figure, header, nav, section { display: block; } 9/25/2020 Copyright © Carl M. Burnett 8
CSS with HTML Semantic Tags <head> <!--[if lt IE 9]> <script src="html 5 shiv. js" <![endif]--> </head> https: //github. com/a. Farkas/html 5 shiv 9/25/2020 Copyright © Carl M. Burnett 9
Modernizr § § Java. Script library Detects HTML 5 and CSS 3 features Based on user’s web browser Modernizr 2. 7. 1 9/25/2020 Copyright © Carl M. Burnett 10
Exercise 1 Modernizr Exercise § Create a Specialized Modernizr File. § Select some functions. § Generate Minified version. § Download and place in your test site. § Create a Specialized Non-Minified Modernizr File. § Convert to non-minified version. § Download and place in your test site. 9/25/2020 Copyright © Carl M. Burnett 11
Exercise 3 How to Specify Measurements and Colors 9/25/2020 Copyright © Carl M. Burnett 12
How to Specify Measurements and Colors § § § CSS Units and Measurement Values CSS Colors CSS Color Names CSS Color HEX 9/25/2020 Copyright © Carl M. Burnett 13
Exercise 3 CSS Colors by Hex, RGB and Name 9/25/2020 Copyright © Carl M. Burnett W 3 C Example 14
Exercise 4 Code Selectors 9/25/2020 Copyright © Carl M. Burnett 15
CSS Code Selectors § All Elements - * § By Element Type CSS Code Selectors § h 1 § p CSS Code Selector Tester § By id § #mainsection § By Class §. maintag 9/25/2020 Copyright © Carl M. Burnett 16
Combinator Relational Selectors § Descendant - Selects all <p> elements inside <div> elements § div p § Adjacent Sibling - Selects all <p> elements that are placed immediately after <div> elements § Div + p § Child - Selects all <p> elements where the parent is a <div> element § Div > p § General Sibling - Selects any <p> elements where the child is sibling to a <div> element (CSS 3 only) § 9/25/2020 Div ~ p W 3 C Example Copyright © Carl M. Burnett 17
Combination of Selectors § Class within Element § ul. speakers § Multiple Selectors § h 1, h 2, h 3 § Attribute Selectors § *[href] § a[href] § input [type=“submit”] 9/25/2020 Copyright © Carl M. Burnett 18
CSS Pseudo-Class Selectors Syntax – Selector. class: pseudo-class { property: value; } Selector Example Description : link : visited a: link a: visited Selects all unvisited links Selects all visited links : active a: active : hover a: hover Selects the active link Selects links on mouse over : focus a: focus 9/25/2020 Selects the input element which has focus Copyright © Carl M. Burnett 19
CSS 3 Pseudo-Class Selector Example Description : first-child a: first-child Selects every <p> elements that is the first child of its parent : last-child a: last-child Selects every <p> elements that is the last child of its parent : only-child a: only-child Selects every <p> elements that is the only child of its parent W 3 C Example 9/25/2020 Copyright © Carl M. Burnett 20
CSS Pseudo-Element Selectors W 3 C Example Syntax – Selector: : pseudo-element { property: value; } Selector Example Selector. class: : pseudo-element { property: value; } Description : : first-letter a: first-letter Selects the first letter of every <p> element : : first-line a: first-line Selects the first line of every <p> element : : before a: before Inserts content before every <p> element : : after a: after Inserts content after every <p> element 9/25/2020 Copyright © Carl M. Burnett 21
Exercise 5 Working with Text 9/25/2020 Copyright © Carl M. Burnett 22
Working with Text § Font Families § § § 9/25/2020 Serif – Times New Roman Serif - Arial Monospace – Courier New Cursive – Lucida Handwriting Fantasy - Impact Copyright © Carl M. Burnett 23
How to Specify a Font Family § font-family: Arial, Helvetica, san-serif; § font-family: “Times New Roman”, Times, serif; § font-family: “Courier New”, Courier, monospace; Web Safe Font Combinations 9/25/2020 Copyright © Carl M. Burnett W 3 C Example 24
How to Specify a Font Size § § § font-size: 12 pt; font-size: 150% font-size: 1. 5 em; 9/25/2020 Copyright © Carl M. Burnett 25
Other Font Styling Properties font-style: normal | italic | oblique | initial | inherited CSS Font Styling Properties W 3 C Example font-variant: normal | small-caps | initial | inherited CSS Font Variant Properties W 3 C Example font-weight: normal | bolder | lighter | number | initial | inherited CSS Font Weight Properties 9/25/2020 Copyright © Carl M. Burnett W 3 C Example 26
Indenting and Aligning Text text-align: center | right | left W 3 C Example CSS Text Align Properties text-indent: length| % | initial | inherited W 3 C Example CSS Text Indent Properties vertical-align: length | % | baseline | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherited CSS Vertical Align Properties 9/25/2020 Copyright © Carl M. Burnett W 3 C Example 27
Decorating Text text-transform: none | capitalize | uppercase | lowercase | initial | inherited; Text-transform Properties W 3 C Example text-decoration: none | underline | overline | line-through | initial | inherited; Text-decoration Properties W 3 C Example text-shadow: h-shadow | v-shadow | blur | color | none | initial | inherited; Text-Shadow Properties 9/25/2020 W 3 C Example Copyright © Carl M. Burnett 28
Image Floating § float: none | left | right | initial | inherited; Image Floating Properties 9/25/2020 Copyright © Carl M. Burnett W 3 C Example 29
Class Review § § § Exercise 1 – How to use CSS to Format the Elements of a Web Page Exercise 2 – CSS with HTML Semantic Tags Exercise 3 – How to Specify Measurements and Colors Exercise 4 – Code Selectors Exercise 5 – Working with Text Next – Session 3 Chapter 5 - How to Use the CSS Box Model for Spacing, Borders, and Backgrounds 9/25/2020 Copyright © Carl M. Burnett 30
- Slides: 30