INF213 CSS Lab
Objectives
I. Where can we specify style?
II. How to “select” what parts of a page the style applies to?
III. How can we specify specific style values?
I.
3 Locations for Style
1. Inline
<p style = "font-size: 20pt" > … </p>
2. Embedded style sheet (in <head>)
<head> … <style type="text/css" >
p { font-size: 20pt}
</style>
3. External style sheet
<head>
<link rel="stylesheet" type="text/css"
href="styles.css" />
<head>
II
CSS Selectors: automatically applied
<style type = "text/css"> p
{ font-size: 20pt}
h1, h2 { font-size: 30pt}
li em { color: red; font-
weight: bold }
a:hover { text-decoration:
underline; color: red; }
</style>
II.
CSS Selectors: manually applied
<head> …<style type = "text/css">
a.nodec { text-decoration: none
}
.crazy { font-size: 40pt;
color: red }
#fineprint { font-size:8pt }
</style> </head>
<body> …
<a class="nodec"
href="links.html"> …
<h1 class="crazy"> …
<div id="fineprint"> …
III.
What styles can I apply?
1
• font-family, font-size, font-style,
fontweight
• text-decoration (line-through, overline,
underline, none)
• list-style-type (disc, square, circle, url)
• color, background-color
• text-align (left, center, right, justify)
• float (left, right, none)
• border-style, border-width, margin, padding
– margin-left, margin-right, etc.
• background-image
Many more…
III.
Examples of property values/units
Predefined – xx-small, x-small, small,
smaller, medium, large, x-large, xx-
large
40% (of current size or screen size)
2em (2*height of M in current style)
3ex (2*height of x in current style)
10px
12pt = 1 pc
23in
17cm
92mm
III.
Color
“color: yellow” black, white,
red, blue, …
“color: rgb(255, 255, 0)”
“color: #FFFF00”
“Web-safe colors”?
Only use hex values:
2
Exercise #1: Write an embedded stylesheet that will…
1. Make every <h1> and <h2> section have 20pt size text
2. Put lines above all links instead of under them
3. Define a generic selector called “cat" that will italicize text
Exercise #2: Write an external stylesheet that will…
1. Using some relative size, make all <h3> text twice as large
as <h4> text
2. Make normal paragraphs that are nested inside a table
appear in bold.
Exercise #3: Where’s the bug?
/* styles.css */ td {background-
color: green; color: white} th
{background-color: green; color: red}
a {font-weight: bold; text-
decoration: none}
table {margin-left: 5em, border-
style: groove, border-width: thick}
div {border-style: inset; border-
width: thick} .crazy {color: yellow;
font-weight:700}
.mild {color: gray; text-
decoration: underline}
Exercise #4
• Write XHTML, with inline CSS, to re-create this:
div and span
<p> A very <span class="verybold">important
</span> announcement follows… </p>
<div class="links">
<p> …
<p> …
<p> …
</div>
3
Centering Secrets
• Stylesheet:
.tcenter {text-align: center}
.dcenter {margin-left: auto;
margin-right: auto;
text-align: center}
• Usage:
<h1 class=“tcenter”>
<table class=“dcenter”> …</table>
<div class=“dcenter”> <img> …
</img>
</div>
