Professional Documents
Culture Documents
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.
h1,h2,h3,h4,h5,h6
{color:green;} header elements are grouped together; all t
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-
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
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;}
Code
<head>
<style type="text/css"> (insert coding below)
</style>
</head>
Text color green
body {color:green;}
p {text-align:center;}
Font-family Lucida
Console
p {font-family:"Lucida Console";}
p {font-size:16px;}
<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.
Webpage
Design vs Print
Document
Design
Design Guidelines
Overall Page
Layout
Home/Index
Page
Cascading Style
Sheets
Consider the intent of the site and the target audience when
selecting:
Typefaces
Size
Alignment
Line length
Topic
Design Guidelines
TextTypefaces
TextSize
TextAlignment
Text
Paragraphs
Text Issues
General
Guidelines
Paragraphs
Type as a graphic
Topic
Text as a
Graphic
Design Guidelines
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
Topic
Design Guidelines
Multimedia
Overall
Considerations
Multimedia
Tags
Multimedia
Audio
Multimedia
Slide Shows
GIF format
Doesnt require special plug-in
Has no interface control.
Flash becoming dominant animation format.
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