Workshop: CSS-Part I Cascading Style Sheets add style to your HTML web pages Define Cascading Style Sheets Cascading refers to the hierarchy of rules that set the.
Download ReportTranscript Workshop: CSS-Part I Cascading Style Sheets add style to your HTML web pages Define Cascading Style Sheets Cascading refers to the hierarchy of rules that set the.
Workshop: CSS-Part I
Cascading Style Sheets
add
style
to your
HTML web pages
Define Cascading Style Sheets
Cascading refers to the hierarchy of
rules that set the style
Think about it this way: the closer the
rule is to the actual thing it’s styling,
the more power it has.
Define Cascading Style Sheets
Style Sheet = list that you create
that specifies
how you want your web page to
look: color, font and
CSS is a Good Thing
Cascading Style Sheets
takes the confusion out of web page
design by separating
content code (HTML)
from presentation code (CSS)
CSS is a Good Thing
Cascading Style Sheets
eliminates display & download
problems
typically
encountered on
different browser screens
CSS is the Best Thing
Cascading Style Sheets
bring web pages up to universal
standards:
ADA compliance
Usability & Access
What to style?
•
•
•
•
•
<body>
<a>
<p>
<h1>
<img>
body of the page
links
paragraphs
headings
images
The hierarchy of rules
a) Inlined Style Sheet
b) Embedded (Internal) Style Sheet
c) External Style Sheet
a) Inlined example-1
<html>
<head><title>My Wonderful Example</title>
</head>
<body>
<p>What was I thinking?</p>
</body>
Original
html
</html>
code
a) Inlined example-2
<body>
<p style=“text-align: center; fontweight: bold; color: yellow;”>What
was I thinking?</p>
</body>
What was I thinking?
b) Embedded/Internal-1
<head><title>My Wonderful Example</title>
<style type=“text/css”>
body
{text-align: left;
font-family: trebuchet,
verdana;}
</style>
</head>
b) Embedded/Internal-2
<head><title>My Wonderful Example</title>
<style type=“text/css”>
body
{
text-align: left;
font-family: Trebuchet,
verdana;
}
</style>
</head>
c) External
<html>
<head><title>My Way</title>
<link rel="stylesheet"
href="http://www2.hawaii.edu/~myway.
css" type="text/css“>
</head>
<body> </body>
</html>
Link to a
separate css page
Internal: Statement of style
this is a style
sheet (style type)
written (text) in
css (CSS)
language
<style type=“text/css”>
Internal: Define a Selector
Elements that can be styled
a, h1, img, body, etc.
we call this elements selectors
In our example, we chose to apply a
style to the selector body
Internal: Brackets & Declaration
<style type=“text/css”>
I want the “align
body
text” property to be
given the value of
“left”
{
text-align: left;
font-family: trebuchet, verdana;
}
</style>
Selector
How to write
{property:
style rules
value;}
(4)
h1 {color: green; font-size: 1.2em;}
My Web Page
a {color: red; background-color: yellow;}
http://www.myway.com
More on the last page of your handout!
Colors
There are sixteen pre-defined colors in HTML:
aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, and
yellow
Which means you can just type the word “blue” into
your code, and the browser will give you the
default color for blue
Colors
If you want more variety or nuance, there are also
216 “web safe colors” that all browsers should be
able to read accurately.
These are the “HEX” color code system, i.e.
#000000 = black (total absence of color)
#FFFFFF = white (presence of all colors)
#FF0000 = red (the red section at full level)
#FF8800 = a shade of orange (red plus green)
Colors
Body
{
color: black;
background: white;
}
= text color is black, background color is white
Controlling Fonts
For HTML nowadays, font size is not
measured in “points” but in “ems.”
“ems” make font size relative :
1em = a capital M at 100%
0.8em = font 80% of the default M
1.2em = 120% the size of a default M
On to the exercises
with Alice Tran