-
8/3/2019 Lecture 08 - Making It Styling
1/23
Take advantage the Whole Course
Come to lectureReview the lecture notes
Keep up with the assigned readings Use the forumsPractice and start assignments early
Use office hours
-
8/3/2019 Lecture 08 - Making It Styling
2/23
CSS: Controlling presentation
INFO 1300
September 23, 2009
-
8/3/2019 Lecture 08 - Making It Styling
3/23
Jen
-
8/3/2019 Lecture 08 - Making It Styling
4/23
Jen's Blog What this looks like
-
8/3/2019 Lecture 08 - Making It Styling
5/23
Making Jen's Blog Stylish
Style = A rule to tell browser how to
render a kind of HTML element
h1 { color : orange; }
p { font-size: 12px;
font-family: Verdana, sans-serif; }body { background-color: gray; }
-
8/3/2019 Lecture 08 - Making It Styling
6/23
CSS consists of a set of rules
H1 {color: red; background: yellow}
Selector (one or more)
Declaration Block
Declaration (one or more)Property
Value (in quotes if multiple words)
-
8/3/2019 Lecture 08 - Making It Styling
7/23
Attaching styles to XHTML
In tag
In head
Linked to URL
-
8/3/2019 Lecture 08 - Making It Styling
8/23
General guidelines on where
to put styles Never in tag One site wide css file, used in all pages Multiple specific css files that apply to
sub-groups of pages
Page-specific rules can be put in
All css files in separate /styles or /cssdirectory
-
8/3/2019 Lecture 08 - Making It Styling
9/23
A stylesheet for Jen
body { background-color: white;
color: black;font-family: Arial, sans-serif; }
p { font-size: large; } /* screen */
h1 { color: orange; }h2 { color: blue; }
-
8/3/2019 Lecture 08 - Making It Styling
10/23
What this looks like
-
8/3/2019 Lecture 08 - Making It Styling
11/23
CSS properties exist for lots of
XHTML elementsp { text-align: center; }
li { list-style-type: square; }
h1 { font-size: 200%; }
em { color: #0044F6; }
Go to resources/css on the course web page for helpfulcss documents.
-
8/3/2019 Lecture 08 - Making It Styling
12/23
Font Families
Sans-serif: Verdana, Arial, Geneva!Serif:
Times
, Georgia Monospace: Courier! Cursive: ComicFantasy:
Impact
-
8/3/2019 Lecture 08 - Making It Styling
13/23
Specifying font family
Order of preferenceAlways end with generic font family
-
8/3/2019 Lecture 08 - Making It Styling
14/23
Just say no to fixed font-sizes
p {font-size: 12pt;} Instead:
body {font-size: large; }
h1 {font-size: 175%; }
h2 {font-size: 125%; }
-
8/3/2019 Lecture 08 - Making It Styling
15/23
Help Jen style her page
-
8/3/2019 Lecture 08 - Making It Styling
16/23
-
8/3/2019 Lecture 08 - Making It Styling
17/23
Solution
Lets see!
-
8/3/2019 Lecture 08 - Making It Styling
18/23
styling linksa:link { color: #7A0039; } /* normal link */
a:visited { color: #7A5B6A; } /* visited link */
a:active { font-weight: bold; } /* link being
followed */
a:hover { color: #511B34; } /* link while person
has mouse over it */
a { text-decoration: none; } ?
-
8/3/2019 Lecture 08 - Making It Styling
19/23
Lets try it
-
8/3/2019 Lecture 08 - Making It Styling
20/23
Do not style away links!
Do not over style link!
Make sure there is some way forpeople to know where to click!
-
8/3/2019 Lecture 08 - Making It Styling
21/23
Some details on values
-
8/3/2019 Lecture 08 - Making It Styling
22/23
Specifying dimension
h1 { height: 17px; }
h1 { width: 17em; }
h1 { width: 1in; }
-
8/3/2019 Lecture 08 - Making It Styling
23/23
Specifying colorColors are specified in
"RGB" format
3 numbers: red, green,blue light
Specified using
hexadecimals
http://www.w3schools.com/css/css_colornames.asp
