3.02 CSS Tutorial Notes—KEY (Answers May Vary)
advertisement
3.02 CSS Tutorial Notes—KEY (Answers May Vary)
Work through the W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp to complete the chart.
Rules for Cascading—Lowest to highest priority
1.
2.
3.
4.
Cascading
Order
Browser default
External style sheet
Internal style sheet (in Inline style (inside an
the head section)
HTML element)
Three Parts of Syntax—
name and description
CSS Syntax
Example
Rule
If value is more
than one word
Example
Rule
If more than
one property is
specified
Example
Rule
Grouping
Selectors
Example
Selector—HTML tag
you wish to define
Property—attribute
you wish to change
Value—each property
can take a value
selector {property:value;}
body {color:black;}
Put quotes around the value
p {font-family:"sans serif";}
You must separate each property with a semicolon.
p {text-align:center;color:red;} is a center aligned paragraph with red text
color
Separate each selector with a comma.
h1,h2,h3,h4,h5,h6
{color:green;} header elements are grouped together; all text will be
green
3.02 CSS Tutorial Notes—KEY (Answers May Vary)
Work through the W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp to complete the chart.
Use and Rule
CSS Comments
Inserting Style
Sheets
Example
Type of Sheet
External
Internal
Inline Styles
CSS Text
Text Color
Set by:
Name
RGB
Comments are used to explain the HTML code—helps when code is
edited later. Comments are ignored by browsers. A CSS comment
begins with a "/*" and ends with a "*/"
/*This is a comment*/
Description/Use
Example
Ideal when style is applied to
many pages. Each page must
link to the style sheet. CSS file
does not contain html tags.
Used when a single document
has a unique style. Define
internal style in head section by
using the <style> tag.
Use sparingly. Loses many of
the advantages of style sheets.
Use the style attribute in the
relevant tag.
Description/Use
specify a color
name, like "red"
specify an RGB
value like
"rgb(255,0,0)"
hr {color:sienna;}
p {margin-left:20px;}
body {backgroundimage:url("images/back40.gif");}
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {backgroundimage:url("images/back40.gif");}
</style>
</head>
<p style="color:sienna;marginleft:20px">This is a paragraph.</p>
changes the color and left margin
Example
body {color:blue;}
h2 {color:rgb(255,0,0);}
3.02 CSS Tutorial Notes—KEY (Answers May Vary)
Work through the W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp to complete the chart.
specify a hex value
Hex
like "#ff000"
h1 {color:#00ff00;}
Text Alignment
Text
Indentation
Description/Use:
Used to set horizontal
alignment of text.
Description/Use:
Used to specify
indentation of first line of
text.
CSS Font
Font Family
Font Size
Setting Font Family
Set Using Pixels
Example:
h1 {text-align:center;}
p.date {text-align:right;}
Example:
p {text-indent:50px;}
Example:
p.main {text-align:justify;}
Description/Use
Example
Set with the font-family property. If
font family is more than one word, use p{font-family:"Times New
quotation marks. Specify several font Roman",Georgia,Serif;}
names in case browser does not
support first font; separate with
commas.
Description:
Example:
Gives full control over the text
h1 {font-size:40px;}
size
h2 {font-size:30px;}
p {font-size:14px;}
