Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.
selector { property: value; property: value; ... property: value; }
p { font-family: sans-serif; color: red; }
<link>
<head>
...
<link rel="stylesheet" type="text/css" href="filename" />
...
</head>
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="http://www.google.com/uds/css/gsearch.css" />
p { color: red; background-color: yellow; }
This paragraph uses the style above.
color
: color of the element's textbackground-color
: color that will appear behind the elementp { color: red; } h2 { color: rgb(128, 0, 196); } h4 { color: #FF8800; }
This paragraph uses the first style above.
This heading uses the second style above.
This heading uses the third style above.
aqua
, black
, blue
, fuchsia
, gray
, green
, lime
, maroon
, navy
, olive
, purple
, red
, silver
, teal
, white
(white), yellow
p, h1, h2 { color: blue; } h2 { background-color: yellow; }
This paragraph uses the above style.
h2
above)font-family
: which font will be usedfont-size
: how large the letters will be drawnfont-style
: used to enable/disable italic stylefont-weight
: used to enable/disable bold stylefont-family
p { font-family: "Georgia"; } h2 { font-family: "Arial Narrow"; }
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)
<strong>
, <em>
and not <b>
, <i>
?strong { font-weight: normal; color: red; } em { font-style: normal; background-color: #DDDDDD; }
Now if I want to strongly emphasize something or just emphasize it, it doesn't necessarily have to be bold or italic.
strong
and em
describe attributes of the content (it is something important in the document that you want to emphasize)b
and i
describe formatting and presentation ("I want this to be bold.")text-align
: alignment of text within its elementtext-decoration
: decorations such as underliningline-height
,
word-spacing
, letter-spacing
: gaps between the various portions of the texttext-indent
: indents the first letter of each paragraphtext-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.
text-align
can be 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;
/*
... */
/* 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 CSSbody { font-size: 16px; }
body
element<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>
<ul>
, <li>
ul
represents a bulleted list of items (block)
li
represents a single item within the list (block)
<ul> <li>No shoes</li> <li>No shirt</li> <li>No problem!</li> </ul>
<ul> <li>Simpsons: <ul> <li>Homer</li> <li>Marge</li> </ul> </li> <li>Family Guy: <ul> <li>Peter</li> <li>Lois</li> </ul> </li> </ul>
<ol>
ol
represents a numbered list of items (block)
<p>RIAA business model:</p> <ol> <li>Sue customers for copying music</li> <li>???</li> <li>Profit!</li> </ol>
RIAA business model:
<ul> <li>No shoes</li> <li>No shirt</li> <li>No problem!</li> <p>Paragraph after list...</p>
Paragraph after list...
<ul> <li>Simpsons:</li> <ul> <li>Bart</li> <li>Lisa</li> </ul> </li> <li>Family Guy: <ul> <li>Peter</li> <li>Lois</li> </ul> </ul>
li
too early (or not at all) will render correctly in most browsers, but it is incorrect XHTMLlist-style-type
propertyol { 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
<blockquote>
a lengthy quotation (block)
<p>As Lincoln said in his famous Gettysburg Address:</p> <blockquote> <p> Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal. </p> </blockquote>
As Lincoln said in his famous Gettysburg Address:
Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.
<q>
a short quotation (inline)
<p>Quoth the Raven, <q>Nevermore.</q></p>
Quoth the Raven, Nevermore.
<p>Quoth the Raven, "Nevermore."</p>
We don't use " marks for two reasons:
"
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&aq=t"> Search Google for Marty </a> </p>
<p>& lt;a href="http://google.com/search?q=marty&ie=utf-8&aq=t"> Search Google for Marty </a> </p>
Interaction Pane: | |
---|---|
KITTENS!Why I love them:
|
|