Scribd
Upload
28 views

Lecture 08 - Making It Styling

- Come to lecture, review notes, keep up with readings, use forums, start assignments early, and use office hours to take advantage of the whole course. - CSS allows specifying rules to tell browsers how to render HTML elements. Rules consist of selectors, declaration blocks, and declarations with properties and values. - Styles can be attached to HTML in the head, linked via URL, or inline within tags. General guidelines are to avoid inline styles, use one site-wide CSS file, and place page-specific rules in the head.

Uploaded by

Mark Lu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

Lecture 08 - Making It Styling

- Come to lecture, review notes, keep up with readings, use forums, start assignments early, and use office hours to take advantage of the whole course. - CSS allows specifying rules to tell browsers how to render HTML elements. Rules consist of selectors, declaration blocks, and declarations with properties and values. - Styles can be attached to HTML in the head, linked via URL, or inline within tags. General guidelines are to avoid inline styles, use one site-wide CSS file, and place page-specific rules in the head.

Uploaded by

Mark Lu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

Take advantage the Whole Course

Come to lecture Review the lecture notes Keep up with the assigned readings Use the forums Practice and start assignments early Use office hours

CSS: Controlling presentation


INFO 1300 September 23, 2009

Jen

Jen's Blog

What this looks like

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; }

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)

Attaching styles to XHTML

In head Linked to URL

In tag

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 <head> All css files in separate /styles or /css directory

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; }

What this looks like

CSS properties exist for lots of XHTML elements


p { 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 helpful css documents.

Font Families
Sans-serif: Verdana, Arial, Geneva! Serif: Times, Georgia Monospace: Courier! Cursive: Comic Fantasy: Impact

Specifying font family

Order of preference Always end with generic font family

Just say no to fixed font-sizes


p {font-size: 12pt;} Instead:
body {font-size: large; } h1 {font-size: 175%; } h2 {font-size: 125%; }

Help Jen style her page

Solution
Lets see!

styling links
a: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; } ?

Lets try it

Do not style away links! Do not over style link! Make sure there is some way for people to know where to click!

Some details on values

Specifying dimension
h1 { height: 17px; } h1 { width: 17em; } h1 { width: 1in; }

Specifying color
Colors are specified in "RGB" format
3 numbers: red, green, blue light Specified using hexadecimals

http://www.w3schools.com/css/css_colornames.asp

You might also like