CASCADING STYLE SHEETS
(CSS)
Overview
2
¨ Basic CSS
¨ CSS Properties
¨ More CSS Syntax
3 Basic CSS
The good, the bad and the… ugly!
4
<p>
<font face="Arial">Shashdot.</font>
News for <b>nerds!!</b> You will <i>never</i>, <u>EVER</u>
be
<font size="+4" color="red">BORED</font> here!
</p> HTML
Slashdot.
News
for
nerds!!
You
will
never,
EVER
be
BORED
here!
output
¨ Tags such as b, i, u, and font are discouraged in
strict XHTML
¨ Why is this bad?
Cascading Style Sheets (CSS)
5
¨ Describes the appearance, layout, and
presentation of information on a web page
¤ HTML describes the content of the page
¨ Describes how information is to be displayed, not
what is being displayed
¨ Can be embedded in HTML document or placed
into separate .css file
Basic CSS rule syntax
6
selector {
property: value;
property: value;
...
property: value;
} CSS
p {
font-family: sans-serif;
color: red;
} CSS
¨ A CSS file consists of one or more rules
¨ Each rule starts with a selector
¨ A selector specifies an HTML element(s) and then applies style
properties to them
¤ a selector of * selects all elements
Aside: Favorites icon ("favicon")
7
<link href="filename" type="MIME type" rel="shortcut
icon" />
HTML
<link href="yahoo.gif" type="image/gif" rel="shortcut
icon" />
HTML
¨ The link tag, placed in the HTML page's head section, can
specify an icon
¤ this icon will be placed in the browser title bar and bookmark/favorite
Attaching a CSS file <link>
8
<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head> HTML
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="http://www.google.com/uds/css/gsearch.css"
rel="stylesheet" type="text/css" />
HTML
¨ A page can link to multiple style sheet files
¤ In case of a conflict (two sheets define a style for the same HTML
element), the latter sheet's properties will be used
Embedding style sheets: <style>
9
<head>
<style type="text/css">
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>
HTML
¨ CSS code can be embedded within the head of an HTML page
¨ Bad style and should be avoided when possible (why?)
Inline styles: the style attribute
10
<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>
HTML
This is a paragraph
output
¨ Higher precedence than embedded or linked styles
¨ Used for one-time overrides and styling a particular element
¨ Bad style and should be avoided when possible (why?)
Cascading Style Sheets
11
¨ Properties of an element cascade together in this
order (precedence):
¤ browser's default styles
¤ external style sheet files (in a <link> tag)
¤ embedded/internal style sheets (inside a <style> tag
in the page's header)
¤ inline style (the style attribute of the HTML element)
W3C CSS Validator
12
<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> CSS
output
¨ jigsaw.w3.org/css-validator/
¨ checks your CSS to make sure it meets the official CSS
specifications
13 CSS Properties
CSS properties for colors
14
p {
color: red;
background-color: yellow;
}
CSS
This paragraph uses the style above output
property description
color color of the element's text
color that will appear behind the
background-color
element
Specifying colors
15
p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }
CSS
This paragraph uses the first style above
This h2 uses the second style above.
This h4 uses the third style above.
output
¨ color names: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white (white), yellow
¨ RGB codes: red, green, and blue values from 0 (none) to 255 (full)
¨ hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
Grouping styles
16
p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS
This paragraph uses the above style.
This h2 uses the above styles.
output
¨ A style can select multiple elements separated by commas
¨ The individual elements can also have their own styles
CSS comments /*…*/
17
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS
¨ CSS (like HTML) is usually not commented as rigorously as
programming languages such as Java
¨ The // single-line comment style is NOT supported in CSS
¨ The <!-- ... --> HTML comment style is also NOT supported in
CSS
CSS properties for fonts
18
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 (http://www.w3schools.com/css/css_font.asp)
font-family
19
p {
font-family: Georgia;
}
h2 {
font-family: "Courier New";
} CSS
This paragraph uses the first style above.
This h2 uses the second style above.
output
¨ Enclose multi-word font names in quotes
More about font-family
20
p {
font-family: Garamond, "Times New Roman", serif;
} CSS
This paragraph uses the above style.
output
¨ We can specify multiple fonts from highest to lowest priority
¨ Generic font names:
¤ serif, sans-serif, cursive, fantasy, monospace
¨ If the first font is not found on the user's computer, the
next is tried
¨ Placing a generic font name at the end of your font-family
value, ensures that every computer will use a valid font
font-size
21
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
¨ units: pixels (px) vs. point (pt) vs. m-size (em)
16px, 16pt, 1.16em
¨ vague font sizes: xx-small , x-small , small , medium, large, x-large, xx-large,
smaller, larger
¨ percentage font sizes, e.g.: 90%, 120%
font-size
22
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
¨ pt specifies a number of points, where a point is 1/72 of an
inch onscreen
¨ px specifies a number of pixels on the screen
¨ em specifies number of m-widths, where 1 em is equal to the
font's current size
font-weight, font-style
23
p {
font-weight: bold;
font-style: italic;
} CSS
This paragraph uses the style above.
output
¨ Either of the above can be set to normal to turn them off
CSS properties for text
24
property description
text-align alignment of text within its element
text-decoration decorations such as underlining
line-height,
gaps between the various portions of
word-spacing,
the text
letter-spacing
indents the first letter of each
text-indent
paragraph
Complete list of text properties (http://www.w3schools.com/css/css_text.asp)
text-align
25
blockquote { text-align: justify; }
h2 { text-align: center; }
CSS
The Gollum’s Quote
We wants it, we needs it. Must have the precious. They stole it from us.
S n e a k y l i t t l e h o b b i t s e s . Wi c k e d , t r i c k s y, f a l s e !
output
¨ text-align can be left, right, center, or
justify
text-decoration
26
p {
text-decoration: underline;
} CSS
This paragraph uses the style above.
output
¨ can also be overline, line-through, blink, or
none
¨ effects can be combined:
text-decoration: overline underline;
The list-style-type property
27
ol { list-style-type: lower-roman; }
CSS
¨ Possible values:
i. none : No marker
ii. disc (default), circle, square
iii. Decimal: 1, 2, 3, etc.
iv. decimal-leading-zero: 01, 02, 03, etc.
v. lower-roman: i, ii, iii, iv, v, etc.
vi. upper-roman: I, II, III, IV, V, etc.
vii. lower-alpha: a, b, c, d, e, etc.
viii. upper-alpha: A, B, C, D, E, etc.
x. lower-greek: alpha, beta, gamma, etc.
others: hebrew, armenian, georgian, cjk-ideographic, hiragana…
Body styles
28
body {
font-size: 16px;
}
CSS
¨ Applies a style to the entire body of your page
¨ Saves you from manually applying a style to each element
Inheriting styles
29
body { font-family: sans-serif; background-color:
yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: underline; }
h2 { font-weight: bold; text-align: center; }
CSS
This is a heading
A styled paragraph. Previous slides are available on the website.
• A bulleted list output
¨ when multiple styles apply to an element, they are inherited
¨ a more tightly matching rule can override a more general
inherited rule
Styles that conflict
30
p, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }
CSS
This paragraph uses the first style above.
This heading uses both styles above.
output
¨ when two styles set conflicting values for the same property,
the latter style takes precedence
CSS properties for backgrounds
31
property description
background-color color to fill background
background-image image to place in background
background-position placement of bg image within element
whether/how bg image should be
background-repeat
repeated
background-attachment whether bg image scrolls with page
shorthand to set all background
background
properties
background-image
32
body {
background-image: url("images/draft.jpg");
}
CSS
¨ background image/color fills the element's content area
background-repeat
33
body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS
¨ can be repeat (default), repeat-x, repeat-y, or no-repeat
background-position
34
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS
¨ value consists of two tokens, each of which can be top, left,
right, bottom, center, a percentage, or a length value in px, pt,
etc.
¨ value can be negative to shift left/up by a given amount
35 More CSS Syntax
XHTML id attribute
36
<p>Coding Horror! Coding Horror!</p>
<p id="mission">Our mission is to combine programming and
<q>human</q> factors with geekiness!</p>
HTML
Coding Horror! Coding Horror!
Our mission is to combine programming and “human” factors with geekiness!
output
¨ A unique ID for an element on a page
¨ Each ID must be unique; can only be used once in the page
Linking to sections of a web page
37
<p>Visit <a href=
"http://www.textpad.com/download/index.html#downloads">
textpad.com</a> to get the TextPad editor.</p>
<p><a href="#mission">View our Mission Statement</a></p>
HTML
Visit textpad.com to get the TextPad editor.
View our Mission Statement
output
¨ Link target can include an ID at the end, preceded by a #
¨ Browser will load that page and scroll to element with given ID
CSS ID selectors
38
#mission {
font-style: italic;
font-family: "Garamond", "Century Gothic", serif;
} CSS
Coding Horror! Coding Horror!
Our mission is to combine programming and “human” factors with geekiness!
output
¨ Applies style only to the paragraph that has the ID “mission”
HTML class attribute
39
<p class="shout">Coding Horror! Coding Horror!</p>
<p class="special">See our special deal on Droids!</p>
<p class="special">Today only!</p> HTML
Coding Horror! Coding Horror!
See our special deal on Droids!
Today only!
output
¨ A way to group some elements and give a style to only that
group
¨ Unlike an id, a class can be reused as much as you like
on the page
CSS class selectors
40
.special { /* any element with class="special" */
background-color: yellow;
font-weight: bold;
}
p.shout { /* only p elements with class="shout" */
color: red;
font-family: cursive;
}
CSS
Coding Horror! Coding Horror!
See our special deal on Droids!
Today only!
output
CSS class selectors
41
<p class="shout">Coding Horror! Coding Horror!</p>
<p class="special">See our special deal on Droids!</p>
<p class="special shout">Today only!</p> HTML
Coding Horror! Coding Horror!
See our special deal on Droids!
Today only!
output
CSS pseudo-classes
42
a:link { color: #FF0000; } /* unvisited link */
a:visited { color: #00FF00; } /* visited link */
a:hover { color: #FF00FF; } /* mouse over link */
CSS
Buy Early Buy Often!
output
CSS pseudo-classes
43
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
an element that is the first one to appear inside
:first-child
another
