1. Cascading style sheets basics
Chapter 4 How to use CSS to format the elements of a web page

2. Learning Outcomes Applied
Given an HTML document, create a CSS style sheet for formatting the web page using any of the types of selectors or rules that are presented in this chapter.
Given an HTML document with one or more CSS style sheets applied to it, use the developer tools for your browser to inspect the styles.
Given a selector in the CSS for an HTML document, describe what the selector applies to.
Knowledge
Describe three ways to include CSS in a web page.
Explain why it’s usually best to use an external style sheet for formatting a page.
Describe the changes you need to make to the HTML and CSS files if you want to use CSS to format the HTML5 semantic elements in versions of Internet Explorer before version 9.

3. Learning Outcomes cont.
Knowledge cont.
Describe the purpose of the normalize.css style sheet.
Distinguish between absolute and relative units of measurement.
Describe three ways to specify color in CSS, and describe how CSS3 expands upon that.
Describe these types of selectors: universal, type, id, class, descendant, child, sibling, pseudo-class, and pseudo-element.
Describe one accessibility guideline for using pseudo-class selectors.
Explain how user style sheets, !important rules, and specificity are used in the cascade order for applying rule sets.
Describe these properties for styling fonts: font-family, font-style, font-weight, font-size, and line-height.
Describe these properties for formatting text: text-indent, text-align, text-decoration, and text-shadow.

4. Part One
CSS Overview, Inline-Embedded-External, the Cascade, CSS Syntax, Color in CSS, Linking External Stylesheets, Types of Selectors, CSS Validation, Using HTML5 shiv and normalize.css Browser Compatibility

5. Overview of Cascading Style Sheets (CSS)
See what is possible with CSS:
Visit
Style Sheets
used for years in Desktop Publishing
apply typographical styles and spacing to printed media
CSS
provides the functionality of style sheets (and much more) for web developers
a flexible, cross-platform, standards-based language developed by the W3C.

6. CSS Advantages Greater typography and page layout control
Style is separate from structure
Styles can be stored in a separate document and linked to from the web page
Potentially smaller documents
Easier site maintenance

7. Types of Cascading Style Sheets
Inline Styles
Embedded Styles
External Styles
Imported Styles

8. Description of the Types of Cascading Style Sheets
Inline Styles
Configured in the body of the web page
Use the style attribute of an HTML tag
Apply only to the specific element
Embedded Styles
Configured in the head section of a web page.
Use the HTML <style> element
Apply to the entire web page document
External Styles
Configured in a separate text file with .css file extension
The HTML <link> element in the head section of a web page associates it with the .css file
Imported Styles
Similar to External Styles
We’ll concentrate on the other three types of styles.

9. The “Cascade” Browser Defaults External Styles Embedded Inline HTML
Attributes

10. CSS Syntax
Style sheets are composed of "Rules" that describe the styling to be applied.
Each rule contains a Selector and a Declaration
Declarations are made up of property-value pairs

11. CSS Syntax Sample
Configure a web page to display blue text and yellow background. body { color: blue; background-color: yellow; } This could also be written using hexadecimal color values as shown below. body { color: #0000FF; background-color: #FFFF00; }

12. Using Color on Web Pages
Computer monitors display color as intensities of red, green, and blue light
RGB Color
The values of red, green, and blue vary from 0 to 255.
Hexadecimal numbers (base 16) represent these color values.

13. Hexadecimal Color Values
# indicates a hexadecimal value
Hex value pairs range from 00 to FF
Three hex value pairs describe an RGB color

14. Web Color Palette A collection of 216 colors
Display the most similar on the Mac and PC platforms
Hex values: 00, 33, 66, 99, CC, FF
Color Chart :

15. Making Color Choices How to choose a color scheme? Monochromatic
Choose from a photograph or other image
Begin with a favorite color
Use one of the sites below to choose other colors

16. CSS Syntax for Color Values
Syntax to configure a paragraph with red text
CSS Syntax
Color Type
p { color: red }
Color name
p { color: #FF0000 }
Hexadecimal color value
p { color: #F00 }
Shorthand hexadecimal (one character for each hexadecimal pair – only used with web safe colors)
p { color: rgb(255,0,0) }
Decimal color value (RGB triplet)
p { color: rgba(255,0,0,0.5) }
CSS3: Decimal color value (RGB triplet) followed by the alpha opacity (a value from 0 to 1). The CSS3 Color Module is in draft status and is not yet uniformly supported by browsers.
p { color: hsl(0, 100%, 50%) }
HSL color values. The CSS3 Color Module is in draft status and is not yet uniformly supported by browsers. See

17. Inline CSS with the Style Attribute
Configured in the body of the Web page
Use the style attribute of an HTML tag
Apply only to the specific element
The Style Attribute
Value: one or more style declaration property and value pairs
Examples
<h1 style="color:#ff0000">Heading text is red</h1>
<h1 style="color:#FF0000;background-color:#cccccc">This is displayed as a red heading with gray background</h1>

18. Configure Embedded CSS with the Style Element
Configured in the head section of a web page.
Use the HTML <style> element
Apply to the entire web page document
Style declarations are contained between the opening and closing <style> tags
The optional type attribute indicates the MIME type of text/css
Example:
<style
body { background-color: #000000;
color: #FFFFFF; }
</style>

19. CSS Embedded Styles
The body selector sets the global style rules for the entire page.
These global rules are overridden for <h1> and <h2> elements by the h1 and h2 style rules.
<style type="text/css"> body { background-color: #E6E6FA; color: #191970;} h1 { background-color: #191970; color: #E6E6FA;} h2 { background-color: #AEAED4; </style>

20. External Style Sheets - 1
CSS style rules are contained in a text file separate from the HTML documents.
The External Style Sheet text file:
extension ".css"
contains only style rules
does not contain any HTML tags

21. External Style Sheets - 2
Multiple web pages can associate with the same external style sheet file.
index.html
site.css
clients.html
body { background-color: #E6E6FA;
color: #000000; }
h2 { color: #003366; }
about.html
Etc…

22. The <link> Element
A self-contained tag
Placed in the head section
Purpose: associates the external style sheet file with the web page.
Example:
<link rel="stylesheet" href="color.css" type="text/css">

23. Using an External Style Sheet
External Style Sheet color.css
body { background-color: #0000FF;
color: #FFFFFF; }
To associate with the external style sheet called color.css, place the following code in the head section:
<link rel="stylesheet" href="color.css" type="text/css">

24. Using Multiple External Style Sheets
More than one link element can be included inside the head element
The styles are applied in the same sequence as the link elements
Styles for the first link element are applied first then styles from the next link applied and so on
If the same elements are styled in more than one of the linked style sheets it is possible for the last linked style to override the first linked style
Example:
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="product.css" type="text/css">

25. Using Multiple External Style Sheets Example
LINKS in HEAD
<link rel="stylesheet" href="main.css" type="text/css">
<link rel="stylesheet" href="product.css" type="text/css">
main.css
H1{text-align:center; color:blue;}
product.css
H1{color:red; font-style:italics;}
RESULT:
H1 elements will be centered and red

26. CSS Selectors Common Types of Selectors: HTML element name selector
class selector
id selector
descendant selector

27. Using CSS with “class” class Selector Configure with .classname
Apply a CSS rule to ONE OR MORE elements on a web page
Does not associate the style to a particular HTML element
Configure with .classname
The sample creates a class called “new” with red italic text.
To use the class, code the following HTML:
<p class=“new”>This is text is red and in italics</p>
<style type="text/css">
.new { color: #FF0000;
font-style: italic; }
</style>

28. Using a CSS id Selector id Selector <style type="text/css">
Apply a CSS rule to ONLY ONE element on a web page.
Configure with #idname
The sample creates an id called “new” with red, large, italic text.
To use the id, code the following HTML:
<p id=“new”>This is text is red, large, and in italics</p>
<style type="text/css">
#new { color: #FF0000;
font-size:2em;
font-style: italic; }
</style>

29. Using a CSS Descendant Selector
Apply a CSS rule within the context of the container (parent) element.
Sometimes called a contextual selector.
Configure by listing the container selector followed by the selector you are styling.
The sample specifies a green text color for only the paragraph elements located within the footer element.
<style>
footer p {color: #00ff00; }
</style>

30. W3C CSS Validation

31. CSS Troubleshooting Tips
Verify you are using the : and ; symbols in the right spots—they are easy to confuse.
Check that you are not using = signs instead of : between each property and its value.
Verify that the { and } symbols are properly placed
Check the syntax of your selectors, their properties, and property values for correct usage.
If part of your CSS works, and part doesn’t:
Review your CSS
Determine the first rule that is not applied. Often the error is in the rule above the rule that is not applied.
Validate your CSS at

32. Overcoming Potential Problems with Browsers
Older browsers like IE 7 & 8 do not recognize HTML5 elements
Solution: JavaScript shiv
Inconsistency in Browser default styles can create problems particularly with page layout
Solution: link normalize.css

33. Accomodating for HTML5 in older browsers
HTML5 introduced a few semantic elements that are not supported in older browsers (IE 7 & 8).
Some of these new elements are no different than generic block elements so they don’t pose any compatibility problems. All you need to ensure compatibility is to add a CSS rule to your website that causes the relevant elements to behave like block elements.
But Internet Explorer versions 8 and under pose a challenge. Any element not in the official roster of elements cannot be styled with CSS. That means we cannot make then behave like block elements or give them any formatting – in effect these newer elements don't exist!

34. JavaScript shiv for HTML5 in older browsers
A JavaScript shiv (or shim) forces older browsers, like Internet Explorer 7 and 8, to recognize the HTML5 semantic elements and let you apply CSS to these elements.
The effect of the shiv is to add the HTML5 semantic elements to the DOM in the browser and also to add a CSS rule set that tells the browser to treat the HTML5 elements as block elements instead of inline elements.

35. Code to include the JavaScript shiv for HTML5
<head> <script src=" </script> </head>

36. Normalize.css
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
It makes minor adjustments to browser defaults so all browsers render HTML elements the same way.
For instance, the normalize.css style sheet sets the margins for the body of the document to zero so there’s no space between the body and the edge of the browser window.
It is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

37. Using normalize.css
Visit URL where style sheet file is available –
Download normalize.css and store in your website root folder
Link normalize.css as the FIRST style sheet link in the head
<head> <link rel="stylesheet" href="normalize.css" type="text/css"> </head>

38. Part Two
Styling Text, Units of Measure Used in CSS, CSS3 Shadows, Pseudo-Classes and Pseudo-Elements, Floating Images, Chrome Developer Tools

39. Configure Typeface with CSS
font-family property
Configures the font typeface of the text
Include a generic family name
p { font-family: Verdana, Arial, sans-serif; }

40. Configure Text Size, Weight, and Style with CSS
font-size Configures the size of the text
p { font-size: 90%; }
font-weight Configures the boldness of text
li {font-weight: bold; }
font-style property Configures the style of the text
footer { font-style: italic; }
font-variant Converts text to small caps
h1 {font-variant: small-caps; }
line-height property Modifies the height of a line of text
p { line-height: 120%; }

41. CSS Units of Measure CSS rules that use units of measure:
margin, padding, font-size, width, height, border, text-indent, line-height, letter-spacing, word-spacing
symbol
name
type
description px
pixel
Absolute (relative to the viewing device)
A pixel represents a single dot on a monitor. The number of dots per inch depends on the resolution of the monitor. pt
point
Absolute
A point is 1/72 of an inch em
ems
Relative
1 em is equal to the font-size of the current font %
precent
A percent specifies a value relative to the current value
For Accessibility and RWD – Use em or percents:
For font-size these can be easily enlarged in all browsers by users
For other properties these can be easily enlarged and reduced for various device screen sizes

42. The font-size Property
For Accessibility and RWD:
Use em or percentage font sizes – these can be easily enlarged in all browsers by users

43. Align and Indent Text with CSS
text-transform property
Configures the capitalization of text
h1 { text-transform: uppercase; }
text-align property
Configures the alignment of text
h1 { text-align: center; }
text-indent property
Configures the indentation of the first line of text in an element
p { text-indent: 5em; }
text-decoration
Configures decoration of underline, overline, line through or none
a { text-decoration:none; }

44. CSS3 text-shadow Property
Configure the horizontal offset, vertical offset, blur radius, and valid color value
Example:
header { text-shadow: 3px 3px 3px #666; }

45. Styling links with CSS Pseudo-classes
Pseudo-classes and the anchor element
:link – default state for a hyperlink
:visited –a hyperlink that has been visited
:focus – triggered when the hyperlink has focus
:hover – triggered when the mouse moves over the hyperlink
:active – triggered when the hyperlink is being clicked
a:link {color:#000066;}
a:visited {color:#003366;}
a:focus {color:#FF0000;}
a:hover {color:#0099CC;}
a:active {color:#FF0000;}

46. CSS Pseudo-classes
a:link { color: #ff0000; } a:hover { text-decoration: none; color: #000066; }

47. Other common CSS3 pseudo-classes & pseudo-elements
:first-child, :last-child, :only-child
Pseudo-elements
::first-letter, ::first-line
These are often used
to style Paragraph's first letters as Drop Caps
to style table rows in alternating colors
inside jQuery's styles

48. Pseudo-class and Pseudo-element Example
<main> <p>Welcome to San Joaquin Valley Town Hall.</p> <p>We have some fascinating speakers for you this season!</p> <ul> <li><a href="toobin.html">Jeffrey Toobin</a></li> <li><a href="sorkin.html">Andrew Ross Sorkin</a></li> <li><a href="chua.html">Amy Chua</a></li></ul> </main>
a:link { color: green; }
a:hover, a:focus { color: fuchsia }
main p:first-child { font-weight: bold; }
main p:first-child::first-letter { font-size: 150% }

49. Pseudo-class and Pseudo-element Example

50. Float an Image so Text Flows Around It
The HTML
<img src="images/logo.gif" alt="Town Hall Logo">
<h1>San Joaquin Valley Town Hall</h1>
<h2>Bringing cutting-edge speakers to the valley</h2>
The CSS
img { float: left;
margin-right: 1em; }

51. The h2 text is displayed in normal flow.
clear Property
The h2 text is displayed in normal flow.
Useful to “clear” or terminate a float
Values are left, right, and both
clear: left; was applied to the h2. Now the h2 text displays AFTER the floated image.

52. Chrome's Developer Tools CSS Inspector (F12)

53. How to Use Chrome's Developer Tools
To show/hide the panel for the tools, press the F12 key.
To inspect the styles that have been applied to an element, click on the element in the Elements pane at the left side of the developer tools panel. Or, click on the inspect icon at the left of the toolbar for this panel, and then click on an element in the web page.
The styles that have been applied to the selected element are displayed in the Styles pane at the right side of the developer tools panel.