Cascading Style Sheets An Introduction
This HTML: Produces this page: <!DOCTYPE html> <html ><head><meta charset=utf-8" /><title>I Scream For Ice Cream!</title></head> <body> <h1>Most Popular Ice Cream Flavors</h1> <table><tr><th>Rank</th><th>Flavor</th></tr> <tr><td>1</td><td>Vanilla</td></tr> <tr><td>2</td><td>Strawberry</td></tr> <tr><td>3</td><td>Chocolate</td></tr> <tr><td>4</td><td>Cookies and Cream</td></tr> <tr><td>5</td><td>Mint Chocolate Chip</td></tr></table> </body> </html> Produces this page:
But the look of that page can be transformed By adding this line: <link href="icecream.css" rel="stylesheet" type="text/css" />
(A CSS file tells a browser how to render HTML) That one line of HTML: <link href="icecream.css" rel="stylesheet" type="text/css" /> Attaches a Cascading Style Sheet (CSS) to the HTML page. CSS (A CSS file tells a browser how to render HTML)
This is that CSS file: CSS body{ font-family: "Marker Felt","Comic Sans MS", fantasy; color:#003366; } h1 { font-size: 1.3em; text-align:center; table { margin-left:auto; margin-right:auto; text-align:left; border-collapse: collapse; cellspacing: 0 px; td { border: 1px solid #ffffff; background-color:#9FB6CD; th { color:#ffffff; background-color:#003366; This is that CSS file: CSS
The syntax of a Cascading Style Sheet is really quite simple: text-align:center; color:#ffffff; background-color:#003366; }
The syntax of a Cascading Style Sheet is really quite simple: 1 The HTML tag (called the Selector) is assigned the styling that follows. th { text-align:center; color:#ffffff; background-color:#003366; }
The syntax of a Cascading Style Sheet is really quite simple: text-align:center; color:#ffffff; background-color:#003366; } 2 An opening curly bracket starts the styling definition
The syntax of a Cascading Style Sheet is really quite simple: text-align:center; color:#ffffff; background-color:#003366; } Pairs of Property:value; statements define the styling. 3 (end with a semicolon!)
The syntax of a Cascading Style Sheet is really quite simple: text-align:center; color:#ffffff; background-color:#003366; } 4 A closing curly bracket ends the definition
This snippet of CSS script: text-align:center; color:#ffffff; background-color:#003366; } • Defines the styling of a table header <th> • Causes all text within the header to be centered • Makes the background dark blue
CSS color information can be represented in different ways: background-color:#D2691E (Hexadecimal) Or background-color:RGB(210,105,30); (Decimal RGB) background-color:chocolate; (One of 147 Named) RGB is the amount of red, green and blue.
You will become skilled in the use of Cascading Style Sheets if you: 1. Understand—or can reference-- what style properties a particular selector (i.e. tag) has. 2. Understand how each of those properties affects the page visually. 3. Understand the type and range of values that can be assigned to each property.
<th class=“warning”> Tags of a given type can be distinguished from one another—or grouped—by using the global Class or ID attribute: <th class=“warning”> <th ID=“urgent”> All tags have Class and ID attributes available to them. You decide on the name.
In a CSS file, a dot is used to indicate class: .warning { background-color:#ff0000; } Whereas a hash mark (#) indicates an ID: #urgent { background-color:#ff0000; }
Using the Class attribute can help turn this table: Into this this table:
Simply by adding a class name to the HTML…. <!DOCTYPE html> <html ><head><meta charset=utf-8" /><title>I Scream For Ice Cream!</title></head> <body> <h1>Most Popular Ice Cream Flavors</h1> <table><tr><th>Rank</th><th>Flavor</th></tr> <tr><td>1</td><td class=“van”>Vanilla</td></tr> <tr><td>2</td><td class=“straw”> Strawberry</td></tr> <tr><td>3</td><td class=“choc”> Chocolate</td></tr> <tr><td>4</td><td class=“cc”> Cookies and Cream</td></tr> <tr><td>5</td><td class=“mint”> Mint Chocolate Chip</td></tr></table> </body> </html>
And adding styles to the CSS file… .van { background-color:#ffffff; } .straw { background-color:#FFAEB9; color:#ff0000; .choc { background-color:#D2691E; .cc { background-image:url(images/cc.jpg); color:#0000ff; .mint { background-color:#9AFF9A;