Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, Victoria Kirst and Roy McElmurry IV. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.
a way of representing any Unicode character within a web page
character(s) | entity |
---|---|
< > | < > |
é è ñ | é è ñ |
™ © | ™ © |
π δ Δ | π δ Δ |
И | И |
" & | " & |
&
on a web page?<p> <a href="http://google.com/search?q=marty&ie=utf-8"> Search Google for Marty </a> </p>
<p> <font face="Arial">Welcome to Greasy Joe's.</font> You will <b>never</b>, <i>ever</i>, <u>EVER</u> beat <font size="+4" color="red">OUR</font> prices! </p>
b
, i
, u
, and font
are discouraged in strict HTML
selector { property: value; property: value; ... property: value; }
p { font-family: sans-serif; color: red; }
<link>
<head> ... <link href="filename" type="text/css" rel="stylesheet" /> ... </head>
<link href="style.css" type="text/css" rel="stylesheet" />
.css
file (preferred)p { color: red; background-color: yellow; }
This paragraph uses the style above.
property | description |
---|---|
color
|
color of the element's text |
background-color
|
color that will appear behind the element |
p { color: red; } h2 { color: rgb(128, 0, 196); } h4 { color: #FF8800; }
This paragraph uses the first style above.
aqua
, black
, blue
, fuchsia
, gray
, green
, lime
, maroon
, navy
, olive
, purple
, red
, silver
, teal
, white
(white), yellow
property | description |
---|---|
font-family
|
which font will be used |
font-size
|
how large the letters will be drawn |
font-style
|
used to enable/disable italic style |
font-weight
|
used to enable/disable bold style |
Complete list of font properties |
font-family
p { font-family: Georgia; } h2 { font-family: "Courier New"; }
This paragraph uses the first style above.
font-family
p { font-family: Garamond, "Times New Roman", serif; }
This paragraph uses the above style.
font-family
value ensures that every computer will use a valid fontfont-size
p { font-size: 14pt; }
This paragraph uses the style above.
px
) vs. point (pt
) vs. m-size (em
)16px
, 16pt
, 1.16em
xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
, smaller
, larger
90%
, 120%
pt
specifies number of point, where a point is 1/72 of an inch onscreenpx
specifies a number of pixels on the screenem
specifies number of m-widths, where 1 em is equal to the font's current sizefont-weight
,
font-style
p { font-weight: bold; font-style: italic; }
This paragraph uses the style above.
normal
to turn them off (e.g. headings)property | description |
---|---|
background-color
|
color to fill background |
background-image
|
image to place in background |
background-position
|
placement of bg image within element |
background-repeat
|
whether/how bg image should be repeated |
background-attachment
|
whether bg image scrolls with page |
background
|
shorthand to set all background properties |
h2
's larger.color
of the quotation text.background-color
of the header
and the h2
's to the same color.p, h1, h2 { color: green; } h2 { background-color: yellow; }
This paragraph uses the above style.
h2
above)/*
... */
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red;
background-color: aqua;
}
//
single-line comment style is NOT supported in CSS<!-- ... -->
HTML comment style is also NOT supported in CSS<p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a> </p>
property | description |
---|---|
text-align
|
alignment of text within its element |
text-decoration
|
decorations such as underlining |
text-indent
|
indents the first letter of each paragraph |
text-shadow
|
a colored shadow near an existing piece of text |
line-height , word-spacing , letter-spacing
|
gaps between the various portions of the text |
Complete list of text properties |
text-align
blockquote { text-align: justify; } h2 { text-align: center; }
[TO LUKE SKYWALKER] The alliance... will die. As will your friends. Good, I can feel your anger. I am unarmed. Take your weapon. Strike me down with all of your hatred and your journey towards the dark side will be complete.
left
, right
, center
, or justify
(which widens all full lines of the element so that they occupy its entire width) text-decoration
p { text-decoration: underline; }
This paragraph uses the style above.
overline
, line-through
, blink
, or none
text-decoration: overline underline;
text-shadow
p { font-weight: bold; text-shadow: -2px 5px gray; }
This paragraph uses the style above.
list-style-type
property
ol { list-style-type: lower-roman; }
none
: No markerdisc
(default), circle
, square
decimal
: 1, 2, 3, etc.decimal-leading-zero
: 01, 02, 03, etc.lower-roman
: i, ii, iii, iv, v, etc.upper-roman
: I, II, III, IV, V, etc.lower-alpha
: a, b, c, d, e, etc.upper-alpha
: A, B, C, D, E, etc.lower-greek
: alpha, beta, gamma, etc.hebrew
, armenian
, georgian
, cjk-ideographic
, hiragana
, katakana
, hiragana-iroha
, katakana-iroha
body { font-size: 16px; }
body
elementheader
.background-image
to the whole page.text-shadow
to the h1
.text-shadow
using Chrome Dev Tools.body { color: green; } p, h1, h2 { color: blue; font-style: italic; } h2 { color: red; background-color: yellow; }
This paragraph uses the first style above.
<style>
(BAD!)
<head> <style type="text/css"> p { font-family: sans-serif; color: red; } h2 { background-color: yellow; } </style> </head>
head
of an HTML pagestyle
attribute (BAD!)
<p style="font-family: sans-serif; color: red;"> This is a paragraph</p>
.css
files<link>
tag)<style>
tag in the page header)style
attribute of an HTML element)body { font-family: sans-serif; background-color: yellow; } p { color: red; background-color: aqua; } a { text-decoration: overline underline; } h2 { font-weight: bold; text-align: center; }
A styled paragraph. Previous slides are available on the web site.
a:link { color: #FF0000; } /* unvisited link */ a:visited { color: #00FF00; } /* visited link */ a:hover { color: #FF00FF; } /* mouse over link */
class | description |
---|---|
:active
|
an activated or selected element |
:focus
|
an element that has the keyboard focus |
:hover
|
an element that has the mouse over it |
:link
|
a link that has not been visited |
:visited
|
a link that has already been visited |
:first-letter
|
the first letter of text inside an element |
:first-line
|
the first line of text inside an element |
:first-child
|
an element that is the first one to appear inside another |
:nth-child(N)
|
applies to every Nth child of a given parent |
background-color
.h1
use a monospace font such as Courier New.