You are on page 1of 10

3.

02 CSS Tutorial Notes


Work through the W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp
Rules for CascadingLowest to highest priority
1.
2.
3.
Cascading
Browser default
External style sheet
Internal style sheet (in
Order
the head section)
Three Parts of Syntax
name and
description

CSS Syntax

Example

Rule

If value is
more than one
word

Example
Rule

If more than
one property
is specified

Example
Rule

Grouping
Selectors

Example
Use and Rule

CSS
Comments

Example
Type of Sheet

Inserting Style
Sheets

External

Internal

SelectorHTML tag
you wish to define

Propertyattribute you
wish to change

4.

Inline s
HTML

Value
can tak

selector {property:value;}
body {color:black;}
Put quotes around the value
p {font-family:"sans serif";}
You must separate each property with a semicolon.

p {text-align:center;color:red;} is a center aligned paragrap


color
Separate each selector with a comma.

h1,h2,h3,h4,h5,h6
{color:green;} header elements are grouped together; all t

Comments are used to explain the HTML codehelps wh


later. Comments are ignored by browsers. A CSS comme
"/*" and ends with a "*/"
/*This is a comment*/
Description/Use
Example
Ideal when style is applied to
many pages. Each page must
link to the style sheet. CSS
file does not contain html tags.
Used when a single document
has a unique style. Define
internal style in head section
by using the <style> tag.

hr {color:sienna;}
p {margin-left:20px;}
body {backgroundimage:url("images/back4
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-

3.02 CSS Tutorial Notes

Work through the W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp


image:url("images/back4
</style>
</head>
Use sparingly. Loses many of <p style="color:sienna;m
the advantages of style
left:20px">This is a parag
Inline Styles
sheets. Use the style attribute
changes the color and le
in the relevant tag.
CSS Text
Text Color
Set by:
Description/Use
Example
specify a color name,
Name
like "red"
body {color:blue;}

Text Alignment

Text
Indentation

RGB

Hex
Description/Use:
Used to set horizontal
alignment of text.
Description/Use:
Used to specify
indentation of first line
of text.

CSS Font
Font Family

Font Size

Setting Font Family

Set Using Pixels

specify an RGB
value like
"rgb(255,0,0)"
specify a hex value
like "#ff000"
Example:
h1 {text-align:center;}
p.date {text-align:right;}
Example:
p {text-indent:50px;}

h2 {color:rgb(255,0,0);}
h1 {color:#00ff00;}

Example:
p.main {text-alig

Description/Use
Example
Set with the font-family property. If
font family is more than one word, use p{font-family:"Tim
quotation marks. Specify several font Roman",Georgia,
names in case browser does not
support first font; separate with
commas.
Description:
Example:
Gives full control over the text
h1 {font-size:40px;}
size
h2 {font-size:30px;}
p {font-size:14px;}

(keep scrolling down for more CSS


information)

3.02 Basic CSS Properties Notes


Basic Tags
Inline Style Creates an inline style. Code is placed inside the opening tag of the desired tag.
style=property: value
Example: <p style=color:red>
Internal Style Sheet Creates an internal style sheet. Code is placed in the <head> section.
<style type=text/css>
hr {color: red;}
</style>

External Style Sheet Links the webpage to an external style sheet.


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Body Styles
background-color:yellow; Sets the background color.
background-image:url('paper.gif'); Sets the background to an image.
Text Styles
color:red; Changes the text color. Values: name, hexadecimal (#ff0000), rgb(255,0,0).
text-align:center; Aligns the text horizontally. Values: left, right, center, justify.
text-decoration:underline; Underlines text..
text-indent:50px; Indents text from the left.
text-transform:uppercase; Controls capitalization. Values: none, capitalize, uppercase,
lowercase.
Font Styles
font-family:arial; Sets the typeface for text. Typefaces with multiple words in their name
should be enclosed inside quotes. Values: font name, generic name (serif, sans-serif, cursive,
fantasy, monospaced)
font-size:100%; Sets the font size. Values: xx-small, x-small, small, medium, large, x-large,
xx-large, smaller, larger, %
font-style:normal; Sets the font style for paragraphs. Values: normal, italic, oblique.
Link Styles
a:link {color:#FF0000;} Sets color for an unvisited link.
a:visited {color:#FF0000;} Sets color for an visited link.
a:hover {color:#FF0000;} Sets color for a mouse over link.
a:active {color:#FF0000;} Sets color for the selected link.
List Styles
list-style-image:url(image.gif); Sets list item marker to an image.
list-style-type: Sets the item marker type. Values: none, circle, disc, square, decimal, loweralpha, lower-greek, lower-lating, lower-roman, upper-alpha, upper-latin, upper-roman

3.02 CSS Internal Style Sheet ActivityKey


Retrieve the HTML webpage that you created in 3.02 Creating an HTML Webpage (My HTML
Webpage). Create a CSS internal style sheet that will apply the features in the chart below to
the entire page. As needed, refer to the 3.02 CSS Tutorial Notes that you completed, or the
W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp and CSS reference charts
posted on the site. Complete the individual steps below and then show the coding for the
entire style sheet in the last cell.
Style
Define Internal Style
Sheet

Code
<head>
<style type="text/css"> (insert coding below)
</style>

</head>
Text color green

body {color:green;}

Text alignment center

p {text-align:center;}

Font-family Lucida
Console

p {font-family:"Lucida Console";}

Text size 16 pixels

p {font-size:16px;}

Show Complete Internal


Style Sheet Coding

<head>
<style type="text/css">
body {color:green;text-align:center;fontfamily:"Lucida Console";font-size:16px;}
</style>
</head>

When you have completed the internal style sheet coding, exchange your code with another
student. Each student should evaluate the other student's code, checking for correct coding
for each item in the checklist above. Students should give each other constructive feedback
about their CSS style sheet coding.

3.02 Principles of Good Webpage Design Guidelines


Topic

Webpage
Design vs Print
Document
Design

Design Guidelines

Overall Page
Layout

Home/Index
Page

Cascading Style
Sheets

Intent of the site


and Target
audience

Use clear titles to capture the readers attention.


Include a title in the <head> section in case viewers bookmark
your page.
Place a link to the home URL on at least the main pages of the
site.
Provides connection back to where a page originated.
Place the most important items or information near the top!
Be consistent in all design elements used on all pages fonts,
colors, graphic size and location, alignment, and backgrounds.
Use white space to divide the page into chunks of information
that readers can quickly scan.
Creates positive first impression of site
Communicates purpose of the website
Place the companys logo on the page and use it in a consistent
location throughout the website.
Include navigational links or menus.
Limit to one screen of information.
Limit amount of prose text on home page.
Show all major options on home page. Enable access to home
page from any other page on the website.
Announce changes to the website on home page.

Help ensure consistency throughout the website.


Increase editing speed
Change settings of the style once to update all
documents using that style
Similar to styles in word processor

Consider the intent of the site and the target audience when
selecting:
Typefaces
Size
Alignment
Line length

Topic

Design Guidelines

TextTypefaces

Use typefaces designed for on-screen viewing


Sans serif typefaces are easier to read on computer screens.
Use font-family property in styles to specify typeface.

Display resolutions and operating systems vary.


12 point on one machine may display as 14 point on
another.
Windows web browsers typically display type that is 2 to 3
points larger than a Macintosh.

TextSize

TextAlignment

Left justified text is the most legible option for webpages.

Use indents or a blank line to indicate a new paragraph.


Use paragraph tag <p> in html to leave a blank line.
Use non-breaking spaces (&nbsp) to indent.

Use initial caps for headlines and headings.


Use sentence case for body text.
All caps are difficult to read.
Use italics to stress foreign words or phrases or to list book and
periodical titles.
Use bold to emphasize headings.
Dont overuse ait will lose the effect of adding
emphasis.
Do not use underliningit implies a hyperlink.
Use contrasting colors for background and text.
Indicate to users when a link will move them to a page on a
different website.
Add URL below the link
Add an exit disclaimer
Add an interim page warning the user that they are
leaving your site and requiring them to click an additional
link to leave your site.

Text
Paragraphs

Text Issues
General
Guidelines

Paragraphs
Type as a graphic

Topic

Text as a
Graphic

Design Guidelines

Use for banners and navigational graphics.


Avoid using text as a graphic for headings, subheadings and
body text in case the graphic does not load properly on the
viewers browser.

Use headings that are unique from one another, descriptive and
relate to the content they introduce.
Use headings in the appropriate HTML order.
Helps users get a sense of hierarchy of information on
the page
Also helps users of assistive technologies understand the
level of importance of information
Use a descriptive, unique, concise, and meaningful title for each
webpage in the website.
Titles display in the browsers title bar.
Titles are used by search engines to identify pages and
are listed on the results page.

Headings and
Titles

Lists

Graphics on the
Web

Display a series of related items in a list.


Provide a descriptive heading for the list.
Make lists easy to scan and understand
Use meaningful labels, effective colors, borders, and
white space
Capitalize first letter and first word in lists.
Bullets/Unordered List <ul> for items of equal status or value
Place important or most commonly used items at top.
Numbered/Ordered List <ol> for items where a particular order
exists
Organize alphabetically or numerically.
Start numbered items at 1 rather than 0.
Use video, animation, and audio only when they help convey or
support the websites content.
Place the organizations logo in a consistent place on every
page.
Use images that add value and increase the clarity of the
information on the site.

Topic

Design Guidelines

Multimedia
Overall
Considerations

Multimedia
Tags

Multimedia
Audio

Multimedia
Slide Shows

Use object or embedded tags to include multimedia elements in


page.
Use anchor tags and href attributes to link to video.
Use combinations of anchor and image tags to link to video.
Use object or embed tags to include multimedia elements in
page.
Use anchor tags and href attributes to link to video.
Use combinations of anchor and image tags to link to video.
Also consider the including:
Audio
Slide shows
Animation
Video

Effective, low bandwidth way to enhance content.


File sizes are smaller than video.
Do not use as much bandwidth as video.

Use when image quality is a top priority.


Uses a smaller file size than most video so storage and
bandwidth are optimized.
Combine with audio for additional emphasis.

GIF format
Doesnt require special plug-in
Has no interface control.
Flash becoming dominant animation format.

Use video sparingly, video files tend to be large.


They slow the download speed of the webpage.

Multimedia
Animation

Multimedia
Video

Provide controls so that users can stop, start, play, and adjust
volume.
Be aware that embedded media can make total page file size
very large and slow the download process.

Topic

Writing Web
Content

Accessibility
Issues

Design Guidelines

Define acronyms and abbreviations.


Use abbreviations sparingly and avoid jargon.
Make first sentences descriptive.
Use active voice.
Minimize the number of words in sentences and the number of
sentences in paragraphs.

Provide text equivalent for non-text elements.


Ensure that all information conveyed in color is also available
without color.
Provide text only pages that are useful for screen readers.
Do not require style sheets.