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 ( ) 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.
