+
CSS for Styling
1
The good, the bad and the… ugly!
2
<p>
<font face="Arial">Shashdot.</font>
News for <b>everybody!!</b> You will <i>never</i>,
<u>EVER</u> be
<font size="+4" color="red">BORED</font> here!
</p> HTML
Slashdot. News for everybody!! You will never, EVER be BORED
here!
output
Cascading Style Sheets (CSS)
3
n Describes the appearance, layout, and presentation of
information on a web page
n HTML describes the content of the page
n Describes how information is to be displayed, not what is
being displayed
n Can be embedded in HTML document or placed into separate
.css file
Basic CSS rule syntax
4
selector {
property: value;
property: value;
...
property: value;
} CSS
p {
font-family: sans-serif;
color: red;
} CSS
n A CSS file consists of one or more rules
n Each rule starts with a selector
n A selector specifies an HTML element(s) and then applies style properties to them
n a selector of * selects all elements
Attaching a CSS file <link>
5
<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
nA page can link to multiple style sheet files
n 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>
6
<head>
<style type="text/css">
p { font-family: sans-serif; color: red; }
h2 { background-color: yellow; }
</style>
</head>
HTML
n CSS
code can be embedded within the head of an
HTML page
Inline styles: the style attribute
7
<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>
HTML
This is a paragraph
output
n Higher precedence than embedded or linked styles
n Usedfor one-time overrides and styling a particular
element
CSS properties for colors
8
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
9
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
n color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, yellow
n RGB codes: red, green, and blue values from 0 (none) to 255 (full)
n hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
Grouping styles
10
p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS
This paragraph uses the above style.
This h2 uses the above styles.
output
nA style can select multiple elements separated by
commas
n The individual elements can also have their own styles
CSS comments /*…*/
11
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS
n CSS (like HTML) is usually not commented as rigorously as programming
languages such as Java
n The // single-line comment style is NOT supported in CSS
n The <!-- ... --> HTML comment style is also NOT supported in CSS
CSS properties for fonts
12
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_reference.asp#font)
font-family
13
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
n Enclose multi-word font names in quotes
More about font-family
14
p {
font-family: Garamond, "Times New Roman", serif;
} CSS
This paragraph uses the above style.
output
n We can specify multiple fonts from highest to lowest priority
n Generic font names:
n serif, sans-serif, cursive, FANTASY, monospace
n If the first font is not found on the user's computer, the next is tried
n Placing a generic font name at the end of your font-family value, ensures that every computer
will use a valid font
font-size
15
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
n units: pixels (px) vs. point (pt) vs. m-size (em) 16px, 16pt, 1.16em
n vague font sizes: xx-small, x-small, small, medium, large, x-
large, xx-large, smaller, larger
n percentage font sizes, e.g.: 90%, 120%
font-size
16
p {
font-size: 24pt;
} CSS
This paragraph uses the style above.
output
n pt specifies number of point, where a point is 1/72 of an inch onscreen
n px specifies a number of pixels on the screen
n em specifies number of m-widths, where 1 em is equal to the font's current size
font-weight, font-style
17
p {
font-weight: bold;
font-style: italic;
} CSS
This paragraph uses the style above.
output
n Either of the above can be set to normal to turn them
off (e.g. headings)
CSS properties for text
18
property description
text-align alignment of text within its element
text-decoration decorations such as underlining
line-height,
word-spacing, gaps between the various portions of the text
letter-spacing
text-indent indents the first letter of each paragraph
text-align
19
blockquote { text-align: justify; }
h2 { text-align: center; }
CSS
UIB’s Quote
La Universitat de les Illes Balears, hereva de la Universitat Lul·liana
de Mallorca, fou creada l’any 1978; la primera de l’era democràtica.
Des d’aleshores, aquesta institució pública d’ensenyament superior
ha recorregut el camí que l’ha conduïda a nivells cada vegada més
n text-align
alts de qualitatcan be left,
acadèmica right, center,
i de responsabilitat social. or
justify
output
text-decoration
20
p {
text-decoration: underline;
} CSS
This paragraph uses the style above.
output
n can also be overline, line-through, blink, or none
n effects can be combined:
text-decoration: overline underline;
The list-style-type property
21
ol { list-style-type: lower-roman; }
CSS
n 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
22
body {
font-size: 16px;
}
CSS
n Applies a style to the entire body of your page
n Saves
you from manually applying a style to each
element
Cascading Style Sheets
23
n Properties of an element cascade together in this order:
n browser's default styles
n external style sheet files (in a <link> tag)
n internal style sheets (inside a <style> tag in the page's header)
n inline style (the style attribute of the HTML element)
Inheriting styles
24
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
n when multiple styles apply to an element, they are inherited
n a more tightly matching rule can override a more general
inherited rule
Styles that conflict
25
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
n when two styles set conflicting values for the same
property, the latter style takes precedence
CSS properties for backgrounds
27
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
28
body {
background-image: url("images/draft.jpg");
}
CSS
n background image/color fills the element's content
area
background-repeat
29
body {
background-image: url("images/draft.jpg");
background-repeat: repeat-x;
}
CSS
n can be repeat (default), repeat-x, repeat-y, or no-repeat
background-position
30
body {
background-image: url("images/draft.jpg");
background-repeat: no-repeat;
background-position: 370px 20px;
} CSS
n 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.
n value can be negative to shift left/up by a given amount
Aside: Favorites icon ("favicon")
31
<link href="filename" type="MIME type" rel="shortcut icon"
/> HTML
<link href="yahoo.gif" type="image/gif" rel="shortcut
icon" />
HTML
n Thelink tag, placed in the HTML page's head section,
can specify an icon
n this icon will be placed in the browser title bar and
bookmark/favorite
HTML id attribute
32
<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
nA unique ID for an element on a page
n Each ID must be unique; can only be used once in the
page
Linking to sections of a web page
33
<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
n Link target can include an ID at the end, preceded by a #
n Browser will load that page and scroll to element with given
ID
CSS ID selectors
34
#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
n Applies style only to the paragraph that has the ID of
mission
HTML class attribute
35
<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
n A way to group some elements and give a style to only that group
n Unlike an id, a class can be reused as much as you like
on the page
CSS class selectors
36
.special {
background-color: yellow;
font-weight: bold;
}
p.shout {
color: red;
font-family: cursive;
} CSS
Coding Horror! Coding Horror!
See our special deal on Droids!
Today only!
output
CSS class selectors
37
<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 ID selectors
38
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
+
Styling Page Sections
Why do we need page sections?
41
n Style individual elements, groups of elements, sections of text of
the page
n Create complex page layouts
Sections of a page <div>
42
<div class="shout">
<h2>Coding Horror! Coding Horror!</h2>
<p class="special">See our special deal on Droids!</p>
<p>We'll beat any advertised price!</p>
</div> HTML
Coding Horror! Coding Horror!
See our special deal on Droids!
We’ll beat any advertised price!
output
n Tag used to indicate a logical section or area of a page
n Has no appearance by default, but you can apply styles
to it
Inline Sections <span>
43
<h2>Coding Horror! Coding Horror!</h2>
<p>See our <span class="special“>spectacular</span> deal
on Droids!</p>
<p>We'll beat <span class="shout“> any advertised
price</span>!</p>
HTML
Coding Horror! Coding Horror!
See our spectacular deal on Droids!
We’ll beat any advertised price!
output
n has no onscreen appearance, but you can apply a style
or ID to it, which will be applied to the text inside the
span
CSS context selectors
44
selector1 selector2 {
properties
} CSS
n appliesthe given properties to selector2 only if it is
inside a selector1 on the page
selector1 > selector2 {
properties
} CSS
¨ applies the given properties to selector2 only if it is
directly inside a selector1 on the page
Context selector example
45
<p>Eat at <strong>Greasy's Burger</strong>...</p>
<ul>
<li>The <strong>greasiest</strong> burgers in town!</li>
<li>Yummy and greasy at the same time!</li>
</ul> HTML
li strong { text-decoration: underline; }
CSS
Eat at Greasy’s Burger…
• The greasiest burgers in town!
• Yummy and greasy at the same time!
output
More complex example
46
<div id="ad">
<p>Eat at <strong>Greasy's Burger</strong>...</p>
<ul>
<li class="important">The <strong>greasiest</strong>
burgers in town!</li>
<li>Yummy and <strong>greasy at the same time
</strong>!</li>
</ul>
</div> HTML
#ad li.important strong { text-decoration: underline; }
CSS
Eat at Greasy’s Burger…
• The greasiest burgers in town!
• Yummy and greasy at the same time!
output
The CSS Box Model
47
n Every element composed
of:
n content
n a border around the element
n padding between the content
and the border
n a margin between the border
and other content
The CSS Box Model (cont.)
48
n width = content width + L/R
padding + L/R border + L/R
margin
n height = content height + T/B
padding + T/B border + T/B
margin
CSS properties for borders
52
h2 { border: 5px solid red; }
CSS
This is a heading.
output
property description
thickness/style/size of border on
border
all 4 sides
¨ Thickness: px, pt, em, or thin, medium, thick
¨ Style: none, hidden, dotted, dashed, double,
groove, inset, outset, ridge, solid
¨ color
CSS properties for dimensions
61
p { width: 350px; background-color: yellow; }
h2 { width: 50%; background-color: aqua; }
CSS
This paragraph uses the first style above
An h2 heading
output
property description
how wide or tall to make this
width, height element
(block elements only)
max-width, max-height, max/min size of this element in
min-width, min-height given dimension
CSS properties for margins
63
property description
margin margin on all 4 sides
margin-bottom margin on bottom side only
margin-left margin on left side only
margin-right margin on right side only
margin-top margin on top side only
Complete list of margin properties
http://www.w3schools.com/css/css_reference.asp#mar
gin
CSS properties for dimensions
66
p { width: 350px; background-color: yellow; }
h2 { width: 50%; background-color: aqua; }
CSS
This paragraph uses the first style above
An h2 heading
output
property description
how wide or tall to make this
width, height element
(block elements only)
max-width, max-height, max/min size of this element in
min-width, min-height given dimension
