evaluation unauthorrized reproduction · brian hoke is principal of bentley hoke, a web consultancy...

INTRODUCTION TO

CSS TRAINING

EVALUATION COPY

Unauthorrized Reproduction or Distribution Prohibited

Introduction to CSS Training

(CSS101 version 4.0.6)

Copyright Information

© Copyright 2017 Webucator. All rights reserved.

The Authors

Nat Dunn

Nat Dunn founded Webucator in 2003 to combine his passion for web developmentwith his business expertise and to help companies benefit from both.

Brian Hoke

Brian Hoke is Principal of Bentley Hoke, a web consultancy in Syracuse, New York.The firm serves the professional services, education, government, nonprofit, andretail sectors with a variety of development, design, and marketing services. Coretechnologies for the firm include PHP and Wordpress, JavaScript and jQuery, Rubyon Rails, and HTML5/CSS3. Previously, Brian served as Director of Technology,Chair of the Computer and Information Science Department, and Dean of Studentsat Manlius Pebble Hill School, an independent day school in DeWitt, NY. Beforethat, Brian taught at Insitut auf dem Rosenberg, an international boarding schoolin St. Gallen, Switzerland. Brian holds degrees from Hamilton and Dartmouthcolleges.

Connie Howell (Editor)

Connie has been teaching Web design and Database classes for over 10 years.She is a self-described "geek" and a natural trainer, always receiving outstandingevaluations from her students.

EVALUATION COPY


Accompanying Class Files

This manual comes with accompanying class files, which your instructor or salesrepresentative will point out to you. Most code samples and exercise and solutionfiles found in the manual can also be found in the class files at the locations indicatedat the top of the code listings.

Due to space limitations, the code listings sometimes have line wrapping, whereno line wrapping occurs in the actual code sample. This is indicated in the manualusing three greater than signs: >>> at the beginning of each wrapped line.

In other cases, the space limitations are such that we have inserted a forced linebreak in the middle of a word. When this occurs, we append the following symbolat the end of the line before the actual break: »»

EVALUATION COPY


Table of Contents1. Crash Course in CSS............................................................................1

Benefits of Cascading Style Sheets..................................................................1CSS Rules........................................................................................................2

CSS Comments........................................................................................2Selectors...........................................................................................................2

Type Selectors..........................................................................................3Descendant Selectors...............................................................................3Child Selectors..........................................................................................3Class Selectors.........................................................................................4ID Selectors..............................................................................................5Attribute Selectors.....................................................................................5The Universal Selector..............................................................................6Grouping...................................................................................................6

Precedence of Selectors...................................................................................6Determining a Selector's Specificity..........................................................6

The Cascade....................................................................................................8Embedded Style Sheets...........................................................................8

Exercise 1: Creating an Embedded Style Sheet.............................................10External Style Sheets.....................................................................................17Exercise 2: Creating an External Style Sheet.................................................19Inline Styles....................................................................................................24Exercise 3: Adding Inline Styles......................................................................25Media Types....................................................................................................26<div> and <span>...........................................................................................29Exercise 4: Divs and Spans............................................................................32Units of Measurement.....................................................................................36

Pixels (px)...............................................................................................36Points (pt)................................................................................................36Inches (in), Centimeters (cm), and Millimeters (mm)..............................36Picas (pc)................................................................................................36Ems (em)................................................................................................36Exs (ex)...................................................................................................37Rems (rem).............................................................................................37

The Inherit Value.............................................................................................37@import..........................................................................................................39

iVersion: 4.0.6. Printed: 2017-04-21.

Table of Contents

EVALUATION COPY


2. CSS Fonts............................................................................................41

Font - the old way...........................................................................................41Bold and Italic.........................................................................................41

Font-family......................................................................................................41Specifying by Font Name........................................................................41Specifying Font by Category...................................................................42

Font-size.........................................................................................................44Font-size Units........................................................................................44Relative Font-size Terms.........................................................................45Best Practices.........................................................................................47

Exercise 5: Font Family and Font Size............................................................48Font-style........................................................................................................52Font-variant.....................................................................................................52Font-weight.....................................................................................................52Exercise 6: Font Style, Font Variant and Font Weight.....................................53Font-face.........................................................................................................57

3. CSS Text...............................................................................................61

Letter-spacing.................................................................................................61Word-spacing..................................................................................................61Line-height......................................................................................................61Text-align.........................................................................................................63Text-decoration...............................................................................................63Text-indent......................................................................................................64Text-transform.................................................................................................66Text-shadow....................................................................................................68Vertical-align...................................................................................................70White-space....................................................................................................73Exercise 7: Text Properties..............................................................................77

4. Backgrounds and Colors....................................................................83

About Color Values.........................................................................................83Color Names...........................................................................................83Hexadecimal Color Values......................................................................83Short Hexadecimal Color Values............................................................83Functional Notation.................................................................................84Recommendation....................................................................................84

Color...............................................................................................................85Background-color............................................................................................86Background-image..........................................................................................88

Background-repeat..................................................................................88Background-attachment..........................................................................89Background-position...............................................................................89Background-size.....................................................................................90

Exercise 8: Colors and Backgrounds..............................................................95

© Copyright 2017 Webucator. All rights reserved.ii

Table of Contents

EVALUATION COPY


5. CSS and Links...................................................................................101

Pseudo-classes............................................................................................101CSS Button Links..........................................................................................103The :target Selector......................................................................................106Exercise 9: Modifying Links...........................................................................111

6. Borders, Margins and Padding.........................................................113

Getting Started.............................................................................................113Borders.........................................................................................................114

Border-style...........................................................................................114Border-color..........................................................................................116Border-width..........................................................................................117Border-image........................................................................................118Border-radius........................................................................................121Border...................................................................................................124

Margin...........................................................................................................128Specifying Margins by Side...................................................................130

Padding.........................................................................................................130Specifying Padding by Side..................................................................132

Box Shadow..................................................................................................132Exercise 10: Borders, Margin and Padding...................................................136

7. Styling Tables with CSS....................................................................143

A Review of HTML Table Syntax...................................................................143Border-spacing......................................................................................146Border-collapse.....................................................................................149border....................................................................................................150padding.................................................................................................152

Exercise 11: Styling a Table..........................................................................153CSS Display-table.........................................................................................156

8. Transforms and Transitions..............................................................159

Transitions.....................................................................................................159Two Dimensional Transforms........................................................................165Exercise 12: Transitions & Transforms..........................................................171

iiiVersion: 4.0.6. Printed: 2017-04-21.

Table of Contents

EVALUATION COPY


EVALUATION COPY


Crash Course in CSS1.

In this lesson, you will learn...

1. To understand the benefits of Cascading Style Sheets.2. To use styles to redefine how elements are formatted.3. To create and use classes and ids.4. To use embedded style sheets, external style sheets, and inline styles.5. To specify the media types to which style rules should apply.6. To use <div> and <span> elements.7. To use the different units of measurement available in CSS.8. To understand how values are inherited.9. To import style sheets with @import.

Benefits of Cascading Style Sheets1.1

Since HTML 4.0, most HTML formatting elements have been deprecated, meaningthat, although they are still supported by browsers, the World Wide Web Consortium(W3C) recommends that they no longer be used. Web designers are to use CSSinstead.

The major benefits of CSS are:

1. Cleaner CodeEasier to maintain•

• Speedier download• Better for search engine optimization

2. Modular CodeStyle rules can be applied to multiple pages•

• Consistency of design• Easier to maintain

3. Design PowerPrecise control of position, size, margins, etc.•

4. Division of LaborDevelopers develop / Designers design•

5. Better Accessibility 1

• No need to misuse tags (e.g., <blockquote> for formatting)• No need for invisible images for positioning• Users' style sheets override authors' styles

1. See http://www.w3.org/TR/CSS-access for more information on CSS's Accessibility Features

Page 1 of 176Version: 4.0.6. Printed: 2017-04-21.

Crash Course in CSS

EVALUATION COPY


http://www.w3.org/TR/CSS-access

CSS Rules1.2

CSS rules are statements that define the style of an element or group of elements.The syntax is as follows:

Syntax

selector { property: value; property: value; property: value;}

Each property:value pair is a declaration. Multiple declarations are separated bysemicolons. The selector defines which elements are affected by the rule. Take alook at the following rule:

p { color: darkgreen; font-family: Verdana; font-size: 10pt;}

This rule specifies that all paragraph text should be darkgreen and use a 10-pointVerdana font.

CSS Comments

Comments in CSS begin with "/*" and end with "*/". See the example below.

CSS Comment Syntax

p { color: red; /* All paragraphs should be red */}

Selectors1.3

There are several different types of selectors:

Types of Selectors• Type• Descendant• Child• Class• ID

© Copyright 2017 Webucator. All rights reserved.Page 2 of 176

Crash Course in CSS

EVALUATION COPY


• Attribute• Universal

Selectors identify the element(s) affected by the CSS rule.2

Type Selectors

Type selectors specify elements by tag name and affect every instance of that elementtype. Looking again at a previous example:

p { color: darkgreen; font-family: Verdana; font-size: 10pt;}

This rule specifies that the text of every <p> element should be darkgreen and usea 10-point Verdana font.

Descendant Selectors

Descendant selectors specify elements by ancestry. Each "generation" is separatedby a space. For example, the following rule states that <strong> tags within <p>tags should have red text:

p strong { color: red;}

With descendant selectors generations can be skipped. In other words, the codeabove does not require that the <strong> tag is a direct child of the <p> tag.

Child Selectors3

Child selectors specify a direct parent-child relationship and are indicated by placinga > sign between the two tag names:

2. There are additional types of selectors, but they are not well supported by all the current browsers.• For more information on the types of selectors, see http://www.w3.org/TR/CSS2/selector.html.• For more information on browser support for selectors, see http://www.quirksmode.org/css/contents.html

3. Child Selectors were not supported in Internet Explorer until version 7.


Crash Course in CSS

EVALUATION COPY


http://www.w3.org/TR/CSS2/selector.html

http://www.quirksmode.org/css/contents.html

p > strong { color: red;}

In this case only <strong> tags that are direct children of <p> tags are affected.

Class Selectors

In HTML, almost all elements4 can take the class attribute, which assigns a classname to an element. The names given to classes are arbitrary, but should bedescriptive of the purpose of the class. In CSS, class selectors begin with a dot. Forexample, the following rule creates a class called "warning," which makes the textof all elements of that class bold and red:

.warning { font-weight: bold; color: #ff0000;}

Following are a couple of examples of elements of the warning class:

<h1 class="warning">WARNING</h1><p class="warning">Don't go there!</p>

If the class selector is preceded by an element name, then that selector only appliesto the specified type of element. To illustrate, the following two rules indicate thath1 elements of the class "warning" will be underlined, while p elements of the class"warning" should not be:

h1.warning { color: #ff0000; text-decoration: underline;}p.warning { color: #ff0000; font-weight: bold;}

Because both rules indicate that the color should be red (#ff0000), this could berewritten as follows:

4. Exceptions include html, head, title, meta, script, and style.


Crash Course in CSS

EVALUATION COPY


.warning { color: #ff0000;}h1.warning { text-decoration: underline;}p.warning { font-weight: bold;}

Note that you can assign an element any number of classes simply by separating theclass names with spaces like this:

Syntax

Assigning Multiple Classes to an Element

<div class="class1 class2 class3">...

ID Selectors

As with the class attribute, in HTML, almost all elements 5 can take the idattribute, which is used to uniquely identify an element on the page. In CSS, IDselectors begin with a pound sign (#) and have arbitrary names. The following rulewill indent the element with the "maintext" id 20 pixels from the left and right:

#mainText { margin-left: 20px; margin-right: 20px;}

<div id="mainText"> This is the main text of the page...</div>

Attribute Selectors6

Attribute selectors specify elements that contain a specific attribute. They can alsospecify the value of that attribute.

The following selector affects all links with a target attribute:

5. Exceptions include html, head, title, meta, script, and style.6. Attribute Selectors were not supported in Internet Explorer until version 7.


Crash Course in CSS

EVALUATION COPY


a[target] { color: red;}

The following selector would only affect links whose target attribute is "_blank".

a[target="_blank"] { color: red;}

The Universal Selector

The universal selector is an asterisk (*). It matches every element.

* { color: red;}

Grouping

Selectors can share the same declarations by separating them with commas. Thefollowing rule will underline all i elements, all elements of the class "warning" andthe element with the id of "important."

i, .warning, #important { text-decoration: underline;}

Precedence of Selectors1.4

In the event that rules conflict:

When Rules Conflict• The rule with the more specific selector takes precedence.• In the event that two selectors have the same specificity, the rule specified later

in the document takes precedence.


Crash Course in CSS

EVALUATION COPY


Determining a Selector's Specificity

Note: This is important only for debugging; you'll almost never have to use it,except when you have conflicting styling declarations and can't figure out why onetakes precedence over the other.

Imagine your selectors are stacked as follows with the ones on top having the highestspecificity:

1. Declarations in the style attribute have no selector and have the highestprecedence.

2. Selectors with id attributes (e.g., h1#foo {}) have the next highestprecedence.

3. Selectors with other attributes (e.g., h1.foo and a[target]) orpseudo-classes (e.g., a: hover) have the next highest precedence.

4. Selectors with element names (e.g., h1) but no other attributes have the nexthighest precedence.

5. The universal selector (*) has the lowest precedence.

To figure out the exact specificity, follow this process:


Crash Course in CSS

EVALUATION COPY


Specificity - Doing the Math1. Start with 0,0,0,0.2. If the declaration is found in the style attribute, change the first digit to 1,

giving you 1,0,0,0. In this case, you have the highest possible specificity andcan stop calculating.

3. For each time the condition in level 2 is met, add 1 to the second digit.For example, for ol#foo li#bar add 2 (1 for each id), giving you0,2,0,0.

•

Note: we're not counting when the conditions in the other levels aremet here, just the condition for level 2.

•

4. For each time the condition in level 3 is met, add 1 to the third digit.For example, for ol#foo li#bar a[target] add 1, giving you0,2,1,0.

•

Note: here we're only counting when the conditions in level 2 and 3are met.

•

5. For each time the condition in level 4 is met, add 1 to the fourth digit.For example, for ol#foo li#bar a[target] add 3 (1 for eachelement name), giving you 0,2,1,3.

•

Note: here we're counting when the conditions in level 2, 3, and 4are met.

•

When comparing two selectors' specificity, start with the left-most numbers. If onehas a higher number than the other, than it is more specific. If they are the same,look to the next number and so on.

The Cascade1.5

Web designers can define style rules in three different places:

Where Styles are Set1. In an embedded style sheet.2. In an external (or linked or imported) style sheet.3. Inline in an element.

Embedded Style Sheets

Embedded style sheets appear in the style element in the head of an HTML page.The code below shows a page with an embedded style sheet:


Crash Course in CSS

EVALUATION COPY


Code Sample

CrashCourse/Demos/EmbeddedStyleSheet.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Embedded Style Sheet</title>5.<style type="text/css"> 6. .warning { 7. color: #ff0000; 8. } 9. h1.warning { 10. text-decoration: underline; 11. } 12. p.warning { 13. font-weight: bold; 14. } 15.</style>16.</head> 17.<body> 18.<h1 class="warning">WARNING</h1> 19.<p class="warning">Don't go there!</p> 20.</body> 21.</html>22.

Code Explanation

As you can see, the <style> tag takes the type attribute, which is used to indicatethat this is a CSS style sheet. This page will render as follows:


Crash Course in CSS

EVALUATION COPY


Creating an Embedded Style SheetExercise 120 to 30 minutes

In this exercise, you will add an embedded style sheet to CrashCourse/Exercises/EmbeddedStyleSheet.html. You will be adding several rules to a simple HTML file.Do not worry about learning the CSS properties and values at this point. This exerciseis just to give you some practice creating a style sheet.

1. Open CrashCourse/Exercises/EmbeddedStyleSheet.html in a browser. It shouldlook like this:

2. Open CrashCourse/Exercises/EmbeddedStyleSheet.html for editing.3. Add a style block in the head of the page. Don't forget to include the type

attribute.4. Add a rule for the body element that contains the following property-value

pairs:• background-image: url('Images/Baseball.gif');• background-repeat: repeat-x;• background-position: bottom;• background-attachment: fixed;• margin-left: 50%;• margin-top: 20px;

5. Add a rule for div elements that contains the following property-value pairs:• padding: 10px;• border: 10px groove red;• width: 300px;


Crash Course in CSS

EVALUATION COPY


• background-image: url('Images/YankeeStadium.gif');• margin-left: -170px;

6. Add a rule for h1 elements that contains the following property-value pairs:• text-align: center;• font-size: 12pt;• color: #000099;• margin-bottom: 5px;• text-decoration: underline;

7. Add a rule for table elements that contains the following property-valuepairs:• margin: 5px;• width: 290px;

8. Add a rule for th elements that contains the following property-value pairs:• padding: 3px;

9. Add a rule for td elements that contains the following property-value pairs:• padding-left: 8px;• padding-right: 8px;• border: 1px solid #990000;• background-color: #ffffcc;

10. Assign an id of "trHeader" to the first table row and add a rule for this idthat contains the following property-value pairs:• text-decoration: underline;• color: #990000;


Crash Course in CSS

EVALUATION COPY


11. Assign a class called "centerCell" to all of the center table data cellsand add a rule for this class that contains the following property-value pairs:• text-align: center;

12. Re-open EmbeddedStyleSheet.html in a browser. It should look like this:


Crash Course in CSS

EVALUATION COPY


of 176Version: 4.0.6. Printed: 2017-04-21.

Crash Course in CSS

EVALUATION COPY


Exercise Solution

CrashCourse/Solutions/EmbeddedStyleSheet.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Embedded Style Sheet</title>5.<style type="text/css"> 6. body 7. { 8. background-image: url('Images/Baseball.gif'); 9. background-repeat: repeat-x; 10. background-position: bottom; 11. background-attachment: fixed; 12. margin-left: 50%; 13. margin-top: 20px; 14. } 15.

16. div 17. { 18. padding: 10px; 19. border: 10px groove red; 20. width: 300px; 21. background-image: url('Images/YankeeStadium.gif'); 22. margin-left: -170px; 23. } 24.

25. h1 26. { 27. text-align: center; 28. font-size: 12pt; 29. color: #000099; 30. margin-bottom: 5px; 31. text-decoration: underline; 32. } 33.

34. table 35. { 36. margin: 5px; 37. width: 290px; 38. } 39.


Crash Course in CSS

EVALUATION COPY


40. th 41. { 42. padding: 3px; 43. } 44.

45. td 46. { 47. padding-left: 8px; 48. padding-right: 8px; 49. border: 1px solid #990000; 50. background-color: #ffffcc; 51. } 52.

53. #trHeader 54. { 55. text-decoration: underline; 56. color: #990000; 57. } 58.

59. .centerCell 60. { 61. text-align: center; 62. } 63.

64.</style>65.</head> 66.<body> 67.

68.<div> 69.<h1>All-time Home Run Record</h1> 70.<table> 71.<tr id="trHeader"> 72. <th>Player</th> 73. <th>Home Runs</th> 74. <th>Team</th> 75.</tr> 76.<tr> 77. <td>Barry Bonds</td> 78. <td class="centerCell">762</td> 79. <td>Giants</td> 80.</tr> 81.


Crash Course in CSS

EVALUATION COPY


<tr> 82. <td>Hank Aaron</td> 83. <td class="centerCell">755</td> 84. <td>Braves</td> 85.</tr> 86.<tr> 87. <td>Babe Ruth</td> 88. <td class="centerCell">714</td> 89. <td>Yankees</td> 90.</tr> 91.<tr> 92. <td>Willie Mays</td> 93. <td class="centerCell">660</td> 94. <td>Giants</td> 95.</tr> 96.</table> 97.</div> 98.</body> 99.</html>100.


Crash Course in CSS

EVALUATION COPY


External Style Sheets1.6

External style sheets are created in separate documents with a ".css" extension. Anexternal style sheet is simply a listing of rules. It cannot contain HTML tags.CrashCourse/Demos/Stylesheet.css is an example of an external style sheet.

Code Sample

CrashCourse/Demos/StyleSheet.css

.warning { 1. color: #ff0000; 2.} 3.h1.warning { 4. text-decoration: underline; 5.} 6.p.warning { 7. font-weight: bold; 8.}9.

Code Explanation

The above CSS file can be included in any number of HTML pages. The <link>tag, which goes in the head of an HTML page, is used to link to an external stylesheet.

Code Sample

CrashCourse/Demos/ExternalStyleSheet.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>External Style Sheet</title>5.<link href="StyleSheet.css" rel="stylesheet" type="text/css">6.</head> 7.<body> 8.<h1 class="warning">WARNING</h1> 9.<p class="warning">Don't go there!</p> 10.</body> 11.</html>12.


Crash Course in CSS

EVALUATION COPY


Creating an External Style SheetExercise 25 to 10 minutes

In this exercise, you will extract the embedded stylesheet that you created in the lastexercise to a new external style sheet.

1. Open CrashCourse/Exercises/EmbeddedStyleSheet.html in your editor andsave it as LinkedStyleSheet.html.

2. Create a new file and save it as StyleSheet.css in the same directory.3. Move all the CSS rules from LinkedStyleSheet.html to StyleSheet.css.4. In LinkedStyleSheet.html, remove the style block, and add a link tag that points

to StyleSheet.css.5. Open LinkedStyleSheet.html in a browser. It should look the same as Embed

dedStyleSheet.html.


Crash Course in CSS

EVALUATION COPY


Exercise Solution

CrashCourse/Solutions/LinkedStyleSheet.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Linked Style Sheet</title>5.<link href="StyleSheet.css" rel="stylesheet" type="text/css">6.</head> 7.<body> 8.

9.<div> 10.<h1>All-time Home Run Record</h1> 11.<table> 12.<tr id="trHeader"> 13. <th>Player</th> 14. <th>Home Runs</th> 15. <th>Team</th> 16.</tr> 17.<tr> 18. <td>Barry Bonds</td> 19. <td class="centerCell">762</td> 20. <td>Giants</td> 21.</tr> 22.<tr> 23. <td>Hank Aaron</td> 24. <td class="centerCell">755</td> 25. <td>Braves</td> 26.</tr> 27.<tr> 28. <td>Babe Ruth</td> 29. <td class="centerCell">714</td> 30. <td>Yankees</td> 31.</tr> 32.<tr> 33. <td>Willie Mays</td> 34. <td class="centerCell">660</td> 35. <td>Giants</td> 36.</tr> 37.</table> 38.</div> 39.


Crash Course in CSS

EVALUATION COPY


</body> 40.</html>41.


Crash Course in CSS

EVALUATION COPY


Exercise Solution

CrashCourse/Solutions/StyleSheet.css

body 1.{ 2. background-image: url('Images/Baseball.gif'); 3. background-repeat: repeat-x; 4. background-position: bottom; 5. background-attachment: fixed; 6. margin-left: 50%; 7. margin-top: 20px; 8.} 9.

10.div 11.{ 12. padding: 10px; 13. border: 10px groove red; 14. width: 300px; 15. background-image: url('Images/YankeeStadium.gif'); 16. margin-left: -170px; 17.} 18.

19.h1 20.{ 21. text-align: center; 22. font-size: 12pt; 23. color: #000099; 24. margin-bottom: 5px; 25. text-decoration: underline; 26.} 27.

28.table 29.{ 30. margin: 5px; 31. width: 290px; 32.} 33.

34.th 35.{ 36. padding: 3px; 37.} 38.

39.


Crash Course in CSS

EVALUATION COPY


td 40.{ 41. padding-left: 8px; 42. padding-right: 8px; 43. border: 1px solid #990000; 44. background-color: #ffffcc; 45.} 46.

47.#trHeader 48.{ 49. text-decoration: underline; 50. color: #990000; 51.} 52.

53..centerCell 54.{ 55. text-align: center; 56.}57.


Crash Course in CSS

EVALUATION COPY


Inline Styles1.7

Inline styles are created by adding the style attribute to a tag. As with the classand id attributes, almost all elements 7 can take the style attribute. The value ofthe style attribute is a list of one or more property-value pairs separated bysemicolons. The code sample below illustrates how inline styles are used:

Code Sample

CrashCourse/Demos/InlineStyles.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Inline Styles</title> 5.</head> 6.<body> 7.<p style="color: blue; font-weight: bold; font-size: 12pt;">Common

Greetings</p> 8.

<ul style="margin-top: -20px; font-size: 10pt;"> 9. <li style="list-style-type: square">Hello</li> 10. <li style="list-style-type: circle">Hi</li> 11. <li style="list-style-type: disc">Howdy</li> 12.</ul> 13.</body> 14.</html>15.

Code Explanation

This page will render as follows:

7. Exceptions include html, head, title, meta, script, and style.


Crash Course in CSS

EVALUATION COPY


Adding Inline StylesExercise 310 to 20 minutes

In this exercise, you will add some inline styles to the page you have been workingon.

1. Open CrashCourse/Exercises/LinkedStyleSheet.html and save it as InlineStyles.html.

2. Add an inline style to the table data cell containing the word "Braves". Thestyle should contain the following property-value pairs:• font-style: italic;• color: #ff0000;

3. Add an inline style to the table data cell containing the word "Yankees". Thestyle should contain the following property-value pairs:• font-style: italic;• color: #000033;

4. Add inline styles to the table data cells containing the word "Giants". The styleshould contain the following property-value pairs:• font-style: italic;• color: #cc3300;

5. Open InlineStyles.html in a browser. It should look like this:


Crash Course in CSS

EVALUATION COPY


Media Types1.8

Styles can be defined for different media. For example, you may want to style apage one way for viewing with a browser and a different way for viewing in print.The media type is defined in the <link> tag for external style sheets and in the<style> tag for embedded style sheets.

Syntax

Defining Styles for Specific Media

<link href="stylesheet.css" rel="stylesheet" type="text/css"media="screen">

<style type="text/css" media="all"> /* rules */</style>

If the media is undefined then the style rules will apply to all media. Possible valuesfor media are:

Media List• all• print• screen• speech

We will look later at how to extend the concept of targeting various media withmedia queries, a relatively new feature of CSS that allows us to target not just thetype of media but also aspects of the user's device: screen width, orientation, colordepth, etc. Perhaps most importantly, media queries allow us to craft pages that areresponsive, presenting different layouts for desktop computers, tablet devices, andsmartphones.

The following code sample illustrates how you can use CSS to design for differentmedia:


Crash Course in CSS

EVALUATION COPY


Code Sample

CrashCourse/Demos/Media.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>CSS Media</title> 5.<style type="text/css" media="screen"> 6. .warning { 7. color: #ff0000; 8. } 9. h1.warning { 10. text-decoration: underline; 11. } 12. p.warning { 13. font-weight: bold; 14. } 15. .printDisplay { 16. display: none; 17. } 18.</style> 19.<style type="text/css" media="print"> 20. .warning { 21. color: #660000; 22. } 23. h1.warning { 24. text-decoration: underline; 25. font-size: 1in; 26. } 27. p.warning { 28. font-weight: bold; 29. font-size: .5in; 30. } 31. .screenDisplay { 32. display: none; 33. } 34.</style> 35.</head> 36.<body> 37.<h1 class="warning">WARNING</h1> 38.<p class="warning">Don't go there!</p> 39.


Crash Course in CSS

EVALUATION COPY


<p class="printDisplay">This is the print version.</p> 40.<p class="screenDisplay">This is the screen version.</p> 41.</body> 42.</html>43.

Code Explanation

As shown below, the screen output of the file above is different from the print output.


Crash Course in CSS

EVALUATION COPY


The screen output will look like this:

The print output will look like this:

<div> and <span>1.9

The <div> and <span> tags are used in conjunction with Cascading Style Sheets.By themselves, they do very little. In fact, the <span> tag has no visual effect on


Crash Course in CSS

EVALUATION COPY


its contents. The only effect of the <div> tag is to block off its contents, similar toputting a <br> tag before and after a section on the page.

Like most tags, the <div> and <span> tags can take the class, id, and styleattributes. It is through these attributes that styles are applied to the elements. Thetags are used like any other HTML tags and can be nested within each other anynumber levels.

With the advent of HTML5, we will often use semantic (meaningful) tags in placeof <div> and <span>: <header> to denote a header, <aside> for a sidebaror complementary content. For the most part in this course, we will stick to <div>and <span> tags, but keep in mind that CSS works fine for other tags, too.

Code Sample

CrashCourse/Demos/DivAndSpan.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Div and Span</title> 5.</head> 6.<body>7.<div style="position: absolute; left: 0px; top: 0px; 8. font-family: Verdana; font-size: 10pt; 9. border-style: groove; border-width: 30px; border-color: blue; padding:

4px;">10.

This text appears in the 11. <span style="font-style: italic; color: red;">upper-left hand cor »»

ner</span>12.

of the page.<br> 13. It also has a big blue groovy border around it. 14.</div> 15.</body> 16.</html>17.


Crash Course in CSS

EVALUATION COPY


Code Explanation

This page will render as follows:


Crash Course in CSS

EVALUATION COPY


Divs and SpansExercise 410 to 20 minutes

In this exercise, you will add class and id attributes to div and span tags to analready existing HTML page. Open ClassFiles/CrashCourse/DivsAndSpans.htmlin a code editor. The HTML page already contains an embedded style sheet, whichyou will not need to modify. Your goal is to make the page render as follows.

There are no step by step instructions. Review the rules in the embedded style sheetand apply classes and ids as appropriate.


Crash Course in CSS

EVALUATION COPY


of 176Version: 4.0.6. Printed: 2017-04-21.

Crash Course in CSS

EVALUATION COPY


Exercise Solution

CrashCourse/Solutions/DivsAndSpans.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Divs and Spans</title> 5.<style type="text/css"> 6. div 7. { 8. border: 5px solid #660066; 9. padding: 20px; 10. text-align: center; 11. } 12.

13. span 14. { 15. border: 5px solid #666600; 16. padding: 10px; 17. text-align: center; 18. font-size: .5in; 19. color: #ffffff; 20. font-family: monospace; 21. } 22.

23. #topDiv 24. { 25. background-color: #990000; 26. } 27.

28. #midDiv 29. { 30. background-color: #009900; 31. } 32.

33. #bottomDiv 34. { 35. background-color: #000099; 36. } 37.

38. .leftSpan 39.


Crash Course in CSS

EVALUATION COPY


{ 40. text-decoration: underline; 41. } 42.

43. .midSpan 44. { 45. font-weight: bold; 46. } 47.

48. .rightSpan 49. { 50. font-style: italic; 51. } 52.</style> 53.</head> 54.<body> 55.<div id="topDiv"> 56. <span class="leftSpan">1</span> 57. <span class="midSpan">2</span> 58. <span class="rightSpan">3</span> 59.</div> 60.<div id="midDiv"> 61. <span class="leftSpan">4</span> 62. <span class="midSpan">5</span> 63. <span class="rightSpan">6</span> 64.</div> 65.<div id="bottomDiv"> 66. <span class="leftSpan">7</span> 67. <span class="midSpan">8</span> 68. <span class="rightSpan">9</span> 69.</div> 70.</body> 71.</html>72.


Crash Course in CSS

EVALUATION COPY


Units of Measurement1.10

CSS allows you to specify font size, border size, margins, padding, etc. using manydifferent units of measurement. The table below shows the units available:

ExampleDescriptionUnit

margin-top: 10px;Pixelspx

font-size: 12pt;Pointspt

padding-top: .5in;Inchesin

top: 5cm;Centimeterscm

left: 45mm;Millimetersmm

bottom: 12pc;Picaspc

font-size: 1.5em;Emsem

font-size: 1.5ex;Exsex

width: 80%;Percentage%

font-size: 1.7rem;Remsrem

Pixels (px)

The measurement unit most often used for designing web pages is pixels. A pixelis not an absolute measurement like, for example, an inch or a point. The actual sizeof a pixel depends on the resolution and size of a user's monitor. Consider an imagethat is 900 pixels wide. If the monitor resolution is set to 800 by 600 pixels, thenthe image will not fit on the screen. However, if the monitor resolution on the samecomputer is set to 1024 by 768 pixels, the image will fit with room to spare.

Points (pt)

Points should be reserved for print. There are 72 points in an inch.

Inches (in), Centimeters (cm), and Millimeters (mm)

Although these are the most common units of measurement in life, they should beavoided in web design.

Picas (pc)

Picas should be reserved for print. There are 6 picas in an inch.


Crash Course in CSS

EVALUATION COPY


Ems (em)

An em (or Mutt) is a relative unit that refers to the size of the letter "M" in a font.Because em is a relative rather than absolute measurement, it is often used in webdesign.

Exs (ex)

The "x-height" is the height of font's lowercase "x". Exs are used to set the size ofcontent based on the size of the surrounding font.

Rems (rem)

A rem is a relative unit which is relative to the font-size of the root element (unlikethe em, which is relative to the current element); rem is supported by all modernbrowser, in Internet Explorer from version 9.

The Inherit Value1.11

Many properties take the value inherit. This specifies that the property value shouldbe inherited from the parent element. If such a property is left undefined, the implicitvalue is inherit.

To illustrate, look at the following:


Crash Course in CSS

EVALUATION COPY


Code Sample

CrashCourse/Demos/inherit.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="utf-8"> 4.<title>Inherit</title> 5.<style> 6.p { 7. font-style: none; 8.} 9.

10.em { 11.font-style: inherit;12. text-decoration: underline; 13.} 14.</style> 15.</head> 16.<body> 17.<p>Even the word <em>inherit</em> isn't italicized.</p> 18.</body> 19.</html>20.

Code Explanation

The rule for p sets the font-style of paragraphs to none, which means plain,non-italicized text. We don't really have to do this as the default value forfont-style for paragraphs is none.

The rule for em sets the font-style for emphasized text, which is usuallyitalic, to inherit. That means that, in the HTML below the CSS, the em tag willinherit the none value from the containing p tag. We also set the


Crash Course in CSS

EVALUATION COPY


text-decoration property to underline, so we can still see that the tag's contentis emphasized:

@import1.12

The @import rule is used to import one style sheet into another. There are twosyntaxes for using @import:

Syntax

@import "styles.css" mediatypes;@import url("styles.css") mediatypes;

In the examples above, mediatypes would be replaced by a comma-delimited list ofmedia types (see page 26) to which the imported style sheet applies.

In general, we recommend avoiding using @import to import one stylesheet intoanother, as it forces multiple concurrent downloads of separate files (the variousCSS stylesheets) and, thus, can slow down the loading of the page. But you shouldknow that the @import statement exists and how it works.

Conclusion1.13Cascading Style Sheets provide a far better way of formatting HTML pages thanthe traditional use of HTML tags. In this lesson, you have learned the basics ofcreating and applying CSS rules.


Crash Course in CSS

EVALUATION COPY



Crash Course in CSS

EVALUATION COPY


Backgrounds and Colors4.

In this lesson, you will learn...

1. To work with the color property.2. To work with the background-color property.3. To work with the color opacities and gradients.4. To work with the background-image property.5. To work with the background-repeat property.6. To work with the background-attachment property.7. To work with the background-position property.8. To work with the background-cover property.

About Color Values4.1

Color values can be specified using several ways.

Color Names

There are 17 basic keyword color names that are specified in CSS3. Modern browserssupport many additional color names - everything from papayawhip to darkorchid8.

<div style="color: red;">color: red;</div>

Hexadecimal Color Values

Hexadecimal color values take the format #rrggbb, where rr is the amount ofred in the color, gg is the amount of green in the color, and bb is the amount ofblue in the color.

<div style="color: #ff0000;">color: #ff0000;</div>

Short Hexadecimal Color Values

Hexadecimal color values can be abbreviated when a color is represented by threepairs of hexadecimal characters. For example, with #ff6600, you can remove onecharacter from each pair. The shorthand color values take the format #rgb, where

8. The list of basic color keywords can be found at http://www.w3.org/TR/css3-color/#html4; see http://www.w3.org/TR/css3-color/#svg-color for the list of extended color keywords.


Backgrounds and Colors

EVALUATION COPY


http://www.w3.org/TR/css3-color/#html4

http://www.w3.org/TR/css3-color/#svg-color

http://www.w3.org/TR/css3-color/#svg-color

r is the amount of red, g is the amount of green in the color, and b is the amount ofblue. For example, #f60 is the same as #ff6600.

Syntax

selector { color: #f60;}

Functional Notation

Functional notation takes the format rgb(n,n,n), where n is a number between0 and 255 or percentage between 0% and 100% for the red, green, and blue intensitiesof the color, respectively.

<div style="color: rgb(255,0,0);">color: rgb(255,0,0);</div><div style="color: rgb(100%,0%,0%);">color: rgb(100%,0%,0%);</div>

CSS3 offers the use of RGBA-format color names, with the additional (the "a")parameter specifying the opacity (the "alpha" channel) of the color as a decimalbetween 0.0 (completely transparent) and 1.0 (completely opaque). Thus, the code

<div style="background-color: rgba(255,0,0,0.5)">color: rgba(255,0,0,0.5) </div>

would style the div with a red background with 50% transparency.

Also new in CSS3 is the HSL specification. Supported in modern browsers (InternetExplorer from version 9), we use HSL to specify hue (a degree on the color wheel,with 0=red, 120=green, and 240=blue), saturation (a percentage, with 0% a shadeof gray and 100% the full color), and lightness (a percentage, with 0% as black and100% as white). The following code displays a div with red background:

<div style="background-color: hsl(0,100%, 50%)"></div>

Recommendation

Our recommendation is to use three-character hexadecimal notation (i.e., #rgb)when you can get the color you want and to use the six-digit hexadecimal notation(i.e., #rrggbb) when you need to define the color more granularly.



EVALUATION COPY


Color4.2

As you have seen in the examples above, the color property is used to set theforeground color of an element.

Code Sample

BackgroundsAndColors/Demos/Color.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Color</title> 5.</head> 6.<body> 7.

8.<h1>Color</h1> 9.

10.<div style="color: red;">color: red;</div> 11.<div style="color: #ff0000;">color: #ff0000;</div> 12.<div style="color: #f00;">color: #f00;</div> 13.<div style="color: rgb(255,0,0);">color: rgb(255,0,0);</div> 14.<div style="color: rgb(100%,0%,0%);">color: rgb(100%,0%,0%);</div> 15.<div style="color: hsl(0,100%, 50%);">color: hsl(0,100%, 50%);</div> 16.

17.</body> 18.</html>19.



EVALUATION COPY


Code Explanation

The above code will render the following:

Background-color4.3

The background-color property is used to specify the background color of anelement. It can be applied to block elements and inline elements.

Syntax

selector { background-color: color;}



EVALUATION COPY


Code Sample

BackgroundsAndColors/Demos/BackgroundColor.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Background Color</title> 5.</head> 6.<body> 7.<h1>Background Color</h1> 8.

9.<div style="height: 100px; width: 500px; background-color: #ff0000;"> 10. background-color: #ff0000; 11.</div> 12.

13.<div style="height: 100px; width: 500px; background-color: rgba(255,

0, 0, 0.5);"> 14.

background-color: rgba(255, 0, 0, 0.5); 15.</div> 16.

17.<div style="height: 100px; width: 500px; background-color: rgba(255,

0, 0, 0.1);"> 18.

background-color: rgba(255, 0, 0, 0.1); 19.</div> 20.

21.</body> 22.</html>23.



EVALUATION COPY


Code Explanation

For the top element, we use a hexadecimal notation to specify the background color.For the second two elements, we use RGBA notation, with a 50% and 10% opacity,respectively:

Background-image4.4

Examples of properties associated with background images are shown in BackgroundsAndColors/Demos/BackgroundImage.html, which is listed at the end of this section.

The background-image property is used to specify the background image ofan element. It can be applied to block elements and inline elements.

selector { background-image: url(images/bg.png);}

Background-repeat

The background-repeat property is used with background-image tospecify whether and how a background image should repeat. Possible values arelisted below:



EVALUATION COPY


• no-repeat - does not tile• repeat-x - tiles horizontally• repeat-y - tiles vertically

Syntax

selector { background-image:url(url); background-repeat:value;}

Background-attachment

The background-attachment property is used with background-imageto specify whether a background image should scroll as the content is scrolled orwhether the content should scroll over it. Possible values are listed below:

• scroll• fixed

Syntax

selector { background-image:url(url); background-attachment:value;}

According to the specification, background-attachment specifies whether abackground image is fixed relative to the viewport (e.g., the browser window) orscrolls along with the document.

Background-position

The background-position property is used with background-image tospecify the location of a background image. Possible values are listed below.

• top• right• bottom• left• center• any combination of the above (e.g., top center or bottom left)



EVALUATION COPY


Syntax

selector { background-image:url(url); background-position:value;}

Background-size

CSS3 introduces the background-size property, allowing us to control the sizeof the background image as displayed in its parent element (the element for whichthe image serves as the background). We can use any of the following as values forbackground-size:

• auto, the default value.• a length, setting the width and height of the background image (in any valid

CSS length units), e.g., background-size:20px 40px.• a percentage, setting the width and height as a percentage of the parent element,

e.g., background-size:50% 50%.• cover, scaling the background image to be as large as possible so that the

area of the element is completely covered by the background image; some partof the image may not be shown.

• contain, scaling the background image to the largest size so that its widthand height fit inside the element.

The following page shows examples of different combinations of backgroundproperties:



EVALUATION COPY


Code Sample

BackgroundsAndColors/Demos/BackgroundImage.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Background Image</title> 5.</head> 6.<body> 7.<h1>Background Image</h1> 8.

9.<div style="height: 200px; width: 500px; color: #ffffff; 10. background-image: url(Images/block.gif);"> 11. background-image: url(Images/block.gif); 12.</div> 13.

14.<h2>Background Repeat</h2> 15.<div style="height: 200px; width: 500px; color: #ffffff; 16. background-color: #ff6600; 17. background-image: url(Images/block.gif); background-repeat: no-re »»

peat"> 18.

background-color: #ff6600; background-image: url(Images/block.gif); 19. background-repeat: no-repeat; 20.</div> 21.<hr> 22.<div style="height: 200px; width: 500px; color: #ffffff; 23. background-color: #ff6600; 24. background-image: url(Images/block.gif); background-repeat: repeat-

x"> 25.

background-color: #ff6600; background-image: url(Images/block.gif); 26. background-repeat: repeat-x; 27.</div> 28.<hr> 29.<div style="height:200px; width: 500px; color: #ffffff; 30. background-color: #ff6600; 31. background-image: url(Images/block.gif); background-repeat: repeat-

y"> 32.

background-color: #ff6600; background-image: url(Images/block.gif); background-repeat: repeat-y;

33.

</div> 34.35.

<h2>Background Attachment</h2> 36.



EVALUATION COPY


<h3>background-attachment: fixed</h3> 37.<div style="height: 200px; width: 500px; color: #ffffff; 38. overflow: scroll; white-space: pre; 39. background-color: #ff6600; background-image: url(Images/block.gif);40.

background-repeat: no-repeat; background-attachment: fixed;"> 41. background-color: #ff6600; background-image: url(Images/block.gif);42.

background-repeat: no-repeat; background-attachment: fixed;<br> 43.-------Lines 44 through 51 Omitted------- background-color: #ff6600; background-image: url(Images/block.gif);52.

background-repeat: no-repeat; background-attachment: fixed; 53.</div> 54.<h3>background-attachment: scroll</h3> 55.<div style="height: 200px; width: 500px; color: #ffffff; 56. overflow: scroll; white-space: pre; 57. background-color: #ff6600; background-image: url(Images/block.gif);58.

background-repeat: no-repeat; background-attachment: scroll;"> 59. background-color: #ff6600; background-image: url(Images/block.gif);60.

background-repeat: no-repeat; background-attachment: scroll;<br> 61.-------Lines 62 through 69 Omitted------- background-color: #ff6600; background-image: url(Images/block.gif);70.

background-repeat: no-repeat; background-attachment: scroll; 71.</div> 72.

73.<h2>Background Position</h2> 74.<h3>background-position: right</h3> 75.<div style="height: 200px; width:500px; color: #ffffff; 76. background-color: #ff6600;77. background-image: url(Images/block.gif); background-repeat: repeat-

y; 78.

background-position: right;"> 79. background-color: #ff6600; background-image: url(Images/block.gif);80.

background-repeat: repeat-y; background-position: right; 81.</div> 82.<h3>background-position: bottom</h3> 83.<div style="height: 200px; width: 500px; color: #ffffff; 84. background-color: #ff6600;85. background-image: url(Images/block.gif); background-repeat: repeat-

x; 86.



EVALUATION COPY


background-position: bottom;"> 87. background-color: #ff6600; background-image: url(Images/block.gif);88.

background-repeat: repeat-x; background-position: bottom; 89.</div> 90.<h3>background-position: center</h3> 91.<div style="height: 200px; width: 500px; color: #ffffff; 92. background-color: #ff6600;93. background-image: url(Images/block.gif); background-repeat: no-repeat;94.

background-position: center;"> 95. background-color: #ff6600; background-image: rl(Images/block.gif); 96. background-repeat: no-repeat; background-position: center; 97.</div> 98.<h3>background-position: 20% 20%</h3> 99.<div style="height: 200px; width: 500px; color: #ffffff; 100. background-color: #ff6600;101. background-image: url(Images/block.gif); background-repeat: no-repeat;102.

background-position: 20% 20%;"> 103. background-color: #ff6600; background-image: url(Images/block.gif);104.

background-repeat: no-repeat; background-position: 20% 20%; 105.</div> 106.<h3>background-position: 20px 20px</h3> 107.<div style="height: 200px; width: 500px; color: #ffffff; 108. background-color: #ff6600;109. background-image: url(Images/block.gif); background-repeat: no-repeat;110.

background-position: 20px 20px;"> 111. background-color: #ff6600; background-image: url(Images/block.gif);112.

background-repeat: no-repeat; background-position: 20px 20px; 113.</div> 114.

115.<h2>Background Size</h2> 116.<h3>background-size: 10% 90%</h3> 117.<div style="height: 200px; width: 500px; color: #ffffff; 118. background-color: #ff6600;119. background-image: url(Images/block.gif); background-repeat: no-repeat;120.

background-size: 10% 90%"> 121. background-color: #ff6600; 122. background-image: url(Images/block.gif); background-repeat: no-repeat;123.



EVALUATION COPY


background-size: 10% 90%; 124.</div> 125.<h3>background-size: cover</h3> 126.<div style="height: 200px; width: 500px; color: #ffffff; 127. background-color: #ff6600;128. background-image: url(Images/block.gif); background-repeat: no-repeat;129.

background-size: cover"> 130. background-color: #ff6600; 131. background-image: url(Images/block.gif); background-repeat: no-repeat;132.

background-size: cover; 133.</div> 134.<h3>background-size: contain</h3> 135.<div style="height: 200px; width: 500px; color: #ffffff; 136. background-color: #ff6600;137. background-image: url(Images/block.gif); background-repeat: no-repeat;138.

background-size: contain"> 139. background-color: #ff6600; 140. background-image: url(Images/block.gif); background-repeat: no-repeat;141.

background-size: contain; 142.</div> 143.

144.</body> 145.</html>146.



EVALUATION COPY


Colors and BackgroundsExercise 815 to 25 minutes

In this exercise, you will continue to work on Stories.html by applying backgroundand color styles.

1. Open BackgroundsAndColors/Exercises/Stories.html.2. Modify the color and background properties of the different elements on the

page. You may do this using inline styles, an embedded style sheet, and/or anexternal style sheet. You are also welcome to add tags to the page. The objectof this exercise is to get used to working with backgrounds and colors in CSS.

3. There are images in Exercises/Images that you may want to use. You're alsowelcome to use any other images you have access to.

4. When you are done, open Stories.html in your browser to see the results. Youare welcome to go back to the code and continue to work.



EVALUATION COPY


Exercise Solution

BackgroundsAndColors/Solutions/Stories.html

<!DOCTYPE HTML> 1.<html> 2.<head> 3.<meta charset="UTF-8"> 4.<title>Stories</title> 5.<style type="text/css">6. h1 7. { 8. font-family: Arial, Helvetica, sans-serif; 9. font-size: x-large; 10. } 11.

12. h2 13. { 14. font-family: Arial, Helvetica, sans-serif; 15. font-size: large; 16. font-style: italic; 17. font-weight: normal; 18. letter-spacing:.25em; 19. word-spacing:.4em; 20. text-align: center; 21. } 22.

23. p 24. { 25. font-family: "Comic Sans MS", Times, serif; 26. font-size: small; 27. line-height: 1.2; 28. text-indent: 2em; 29. } 30.

31. a 32. { 33. font-style: italic; 34. font-weight: bold; 35. } 36.

37. .topLink 38. { 39.



EVALUATION COPY


font-family: "Comic Sans MS"; 40. font-size: medium; 41. font-variant: small-caps; 42. font-style: normal; 43. font-weight: normal; 44. } 45.

46. .BackToTop 47. { 48. text-decoration: none; 49. text-transform: capitalize; 50. }51.</style> 52.</head> 53.<body> 54.<h1 id="top">Stories</h1> 55.<a href="#pooh" class="topLink">Pooh Goes Visiting</a><br> 56.<a href="#alice" class="topLink">A Mad Tea-Party</a><br> 57.<a href="#naughtyboy" class="topLink">The Naughty Boy</a><br> 58.

59.<hr> 60.

61.<h2 id="pooh">POOH GOES VISITING - A.A. Milne</h2> 62.<div style="background-image: url(Images/poohsmall.gif); 63. background-repeat: no-repeat; background-color:#ff9900; 64. color:#000066;"> 65.<p>Pooh always liked a little something at eleven o'clock in the morning,

and he was very glad to see Rabbit getting out the plates and mugs; and when Rabbit said, 'Honey or condensed milk with your bread?' he was so excited that he said, 'Both' and then, so as not to seem greedy, he added, 'But don't bother about the bread, please.'</p>

66.

-------Lines 67 through 71 Omitted-------

</div> 72.<a href="#top" class="BackToTop">Back to top</a> 73.

74.<hr> 75.

76.<h2 id="alice">A MAD TEA-PARTY - Lewis Carroll</h2> 77.<div style="background-image: url(Images/TeaParty.gif); 78. background-position:right; background-repeat: no-repeat;"> 79.



EVALUATION COPY


<p>There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and the talking over its head. 'Very uncomfortable for the Dormouse,' thought Alice; 'only, as it's asleep, I suppose it doesn't mind.'</p>

80.


</div> 96.<a href="#top" class="BackToTop">Back to top</a> 97.

98.<hr> 99.

100.<h2 id="naughtyboy">THE NAUGHTY BOY - Hans Christian Andersen</h2> 101.

102.<div style="background-image: url(Images/Cupid.gif); color:#ff3333;"> 103.<p>Along time ago, there lived an old poet, a thoroughly kind old poet.

As he was sitting one evening in his room, a dreadful storm arose without, and the rain streamed down from heaven; but the old poet sat warm and comfortable in his chimney-comer, where the fire blazed and the roasting apple hissed.</p>

104.


</div> 118.<a href="#top" class="BackToTop">Back to top</a> 119.</body> 120.</html>121.



EVALUATION COPY


Conclusion4.5In this lesson, you have learned to use CSS background and color properties.



EVALUATION COPY


evaluation unauthorrized reproduction · brian hoke is principal of bentley hoke, a web consultancy...

Documents