Cascading Style Sheets
the Pima.gov Style Sheet defined
Although the templates are formatted to use the pimagov.css style sheet,
you still need to know how it functions to make repairs
and alterations as needed.
Take a look at the code for pimagov.css
There are 2 types of styles used in
pimagov.css :
1) HTML Tag
2) Custom Styles which are called classes.
1) HTML Tag
The html tag defines the default formatting of specific
HTML tags.
For
instance, the a tag controls how a link will
appear on the page. Look at the a tag
in pimagov.css to the left. You can see that the a tag
has been set so it is always underlined, appears as dark brown (color:
#663300), the font will be bold and in the Verdana, Arial, Helvetica,
sans-serif font family. This means that all links on
pages referencing
this style sheet will have links that have this appearance.
Below is a definition of the html tags and what they do. Compare this
to the style sheet code and you see how they apply
to the page.
Definition of html tag functions
a:visited - the visited link
a:active - the active link
a:hover - the link as the mouse is hovering
over it
h5 - heading 5 - smallest text heading - formats
the heading using the <h5><h5> tag pair
h4 - heading 4 -small text heading - formats
the heading using the <h4><h4> tag pair
h3 - heading 3 -medium text heading - formats
the heading using the <h3><h3> tag pair
h2 - heading 2 -large text heading - formats
the heading using the <h2><h2> tag pair
h1 - heading 1 -largest text heading - formats
the heading using the <h1><h1> tag pair
ul - unordered list - inserts the <ol><ol> tags
to create a numbered list
li -
list item -inserts the <li><li> tags - used
to denote an an item within an ordered or unordered list
img - all images
*Note: This kind of style will not appear in the Dreamweaver CSS Styles
panel, but it does appear in the Dreamweaver Edit Styles dialog box.
2) Custom tags - class
A custom tag in a style sheet is called a class.
A class name always begins with a period. Here are some of the classes
used in pimagov.css:
.h3leftheader
.h3rightheader
.asidelink
.ptopnav
.pbottomnav
.tdlogo
The names of the custom
styles appear in the CSS Styles panel and in Dreamweaver's Property
Inspector Palette. You can apply a class to any
part of your page using the Property
Inspector Palette. To apply see the Applying
Classes page.
Below is a list of the the classes used in
pimagov.css
The first set is for text attributes
.h3leftheader - used as a header in the left navigational
column - Example:
.h3rightheader - used as a header in the right navigational
column - Example:
.asidelink - used as links in the navigational columns
- Example: .asidelink
The next set is for tables and other areas on the page
.ptopnav - area below header used for
navigation
.pbottomnav - area at bottom of page used for
navigation
.tdlogo - area on top left used for department logos
.tdbanner - top header area
.tdleftcolumn - left column used for navigation
.tdrightcolumn - right column used for navigation
.tdcentercolumn - center or main area
Note that styles and style classes affect the behavior
of specific HTML tags. In particular, we've tried to name classes so
that they reflect not only the parts of a design that they control,
but also the tags to which they get applied. So for example ".tdleftcolumn" controls
the basic layout of a column on the left side of a page, and it gets
applied to a "td" tag. Applying this class to other tags
may have unintended consequences.This requires some familiarity with
HTML.
Contrary to what you may have heard, learning about
it isn't too bad. It's about on a par with learning proofreaders marks.
The
good news is that style sheets are easier and give you more control
than you would have if you tried to do all your designing with HTML
alone. You can do your basic page description with HTML and then your
most creative work can be done with CSS.
To see a demonstration of the
flexibility of CSS as a design tool, check out: http://www.csszengarden.com/ which "is a project where graphic artists invent many beautiful
styles for one single HTML file."
The UofA has a tutorial at: http://uaweb.arizona.edu/resources/tutorial/css/
The W3C has a lot of information on most aspects of CSS
and other web-related topics and has pointers to resources for learning
CSS: http://www.w3.org/Style/CSS/learning
|
