CSS PowerPoint
Download
Report
Transcript CSS PowerPoint
Cascading Style Sheets
Based on Castro, HTML for the
WWW, 6th edition
Ron Gerton, Fall 2007
What is the power of CSS
1. Create style rules for appearance
of page (formatting) separate
from the web page itself that
apply to all pages in the web
site.
2. In HTML formatting was done by
attributes in individual element
tags
Purpose of Styles
1. Remove formatting from HTML tags
–
–
HTML code focuses on only on page structure
and content
Formatting defined separately from HTML tags
and attributes
2. Comply with W3C XHTML 4.01 strict
DocType
3. Web browsers continue to render
formatting in HTML (deprecated
elements/attributes) for backwards
compatibility
CSS Building Block:
Style Rule
A Style Rule has two main parts
– A Selector
An (X)HTML element, or
A designer created named group or id
(advance topic)
– The Declaration
In the format of Property:value
Property can be a HTML attribute
Property can be designer defined (advanced
topic)
CSS Building Block: Style
Rule
Style Rule examples
–
–
h1 {color:red;}
h1 {color:forestgreen;
background:red;}
Color/background can be
– A named color ( see Visibone or DevGuru Color
chart 2)
– Hexadecimal number of a color
#228B22
(forestgreen)
– img {border:4px solid red;}
CSS Building Block:
Style Rule
Style Rule examples
–
Comments for Style Rules
–
Begin with /*
End with */
Comments can be on line before or on same
line after (but not before) the rule
/* solid red border for images */
img {border:4px solid red;}
img {border:4px solid red;} /* solid red border for
images */
Where can Style Rules be
located?
Style rules can be located
1.
2.
3.
4.
In an individual element tag (“local”)
In an individual web page (“internal”)
In a web site (“external”)
On a web server (“imported”)
Where can Style Rules be
located?
1. Individual element ( “local”)
– Style rule applies only to that element
<h1 {color:forestgreen;
background:red;}>header text</h1>
– Good for exceptions to more global
rules
– Must retype or copy & paste for each
element that you want the style to
apply to as in (X)HMTL
Where can Style Rules be
located?
2. In a web page (“internal”)
– Rule located in the <head> element tag
– Rule applies to all occurrences of the
element on that page
– Must retype or copy & paste to other
pages
Where can Style Rules be
located?
2. In a web page (“internal”)
Example:
<head>
<--! other (X)HMTL head tags -->
<style type= “text/css”>
img {border:4px solid red;}
/* other styles */
</style>
<--! other (X)HMTL head tags -->
<head>
Where can Style Rules be
located?
3.
In a separate .css file (External) file
–
–
–
–
As for (X)HMTL, the file must be text, so use Notepad or
other HTML editor.
File name for base css rules is
base.css (in advanced work there may be supplemental
.css files)
File must be in same folder as web pages to keep
pathname simple
Reference the base.css file in the head section of each
web page
If in same folder as other web pages, pathname is simple
If in subfolder of other web pagers, pathname must
include the folder name.
Where can Style Rules be
located?
3. External file
Referenced in the head of each page
rel attribute stands for “relation”
indicates if css file is base, preferred, or alternate
<head>
<--! other head tags -->
<link rel=“stylesheet” type=“text/css”
href=“base.css” />
<--! other head tags -->
<head>
Where can Style Rules be
located?
3. External file
All elements on all pages of the web site
are automatically formatted according
to the style definitions in base.css
There are advanced techniques for
making exceptions.
Where can Style Rules be
located?
3. External file example (the base.css file):
/* Base CSS styles */
h1
{
color:forestgreen; /*text color*/
background:red;
text-align:right;
}
h2{….} /*file can contain many styles*/
Can I use style rules in all
three locations?
1. Yes. But what if there are conflicts?
– All other things equal, the later the style
appears the more precedence it has
“Local” (in element ) has the highest
precedence
Internal (page) is second
External (stylesheet) is third
There are more complicated situations than
these and techniques for exceptions and
grouping that are beyond the scope of this
course.
Browser Support?
1. Most browsers support most of CSS2
2. None fully support CSS2
– Note: from Castro when IE7 was in beta
testing before it was released
CSS Classes (advanced topic)
1. Classes enable the designer to define
different styles for the same type of
HTML element.
2. Syntax: a period after the selector is
used to identify the different classes
for a CSS selector:
p.right {text-align:right;}
p.center {text-align:center;}
CSS Classes
3. In the HTML element, the class to be
used must be identified (assume
external style sheet for examples
below):
<p.right>This paragraph will be right
aligned.</p>
<p.center>This paragraph will be center
aligned.</p>
<p.right>This paragraph will be right
aligned.</p>
CSS Classes
4. As the visitor will view this part of
the page:
This paragraph will be right aligned.
This paragraph will be center aligned.
This paragraph will be right aligned.
Pseudo-classes (links)
1. Classify elements on characteristics other
than their name, attributes or content.
2. Allows formatting of characteristics that
cannot be deduced from the document
tree (how HTML elements are organized).
3. May be dynamic, in the sense that an
element may acquire or lose a pseudoclass while a user interacts with the page.
4. Formatting of hypertext links is one use.
Pseudo-classes
Link styles must be defined in this order
to prevent conflicts:
– Link (unfollowed link, the default
appearance).
– Visited (after a link is followed)
– Hover (while mouse is over the link)
– Active (while mouse button is pressed
down during hover)
Pseudo-classes
Example: (each written single line so that all can be
seen at once; style sheet example on next slide)
a:link {color: red;}
a:visited {color: teal;}
a:hover {color: green;}
a:active {color: yellow;}
Formatting links with CSS
Proper formatting of style sheet with blank
line between styles:
a:link{
Color:red;
}
a:visited{
….
}
Formatting links with CSS
1. Colors can be color names or
hexadecimal codes beginning with #.
2. Other styles to use with links:
– text-decoration
“none” removes the default underline
“underline” adds underline where the
developer wants it
Formatting links with CSS
2. Other styles to use with links:
– font-weight
Causes other text to move as “bold”
requires more space, which can be
annoying
Best to use only when no other text follows
the link
Link styles and browsers
The style of visited links is governed
by the web browser.
This is another aspect of “cascading
styles” where the user and/or
browser has some control over web
page appearance.
Link styles and browsers
Once a link is followed, its appearance
remains as defined in the “visited” style.
To reset the link to the default of “not
visited”, delete your “browser history”
Best to test with your secondary browser
if you want to keep the history of recently
visited web sites for your primary browser.
“Web Safe” Fonts for fontfamily
Serif
–
Georgia, Times, Times New Roman,
Garamond, and Century Schoolbook
Sans-serif
–
Verdana, Arial, Helvetica, Trebuchet, and
Tahoma
Choose two from each list
The third font in each list should be the
generic “serif” or “sans-serif”
The browser chooses any serif or sans-serif
font it finds
“Web Safe” Fonts for fontfamily
p {font-family: Georgia, ‘Times New
Roman’, serif;}
h1 {Verdana, Arial, sans-serif;}
Note: include quotation marks around
property values with spaces.