Style Sheets, or CSS for Cascading Style Sheets, are sets of rules
that allow you to control how your web document will appear in the web
browser. CSS overrides the browser’s default settings for interpreting
how tags should be displayed, letting you use any HTML element
indicated by an opening and closing tag (including the
<p> tag) to apply style attributes defined either locally or in a style sheet.
Style sheets contain rules, and a rule has several component parts. The
first part of the Rule (<p> <H1>) is called
the Selector. This tells the browser which element on the page to work with. The
curly bracket pair contains the Declaration, which is comprised of a
Property (color) and a Value (#333333). Here’s the basic syntax of a
rule defined:
Selector { property: value }
Examples:
P
{font-family: Times, ‘Times New Roman’, serif; font-size: 8pt; color:
red; }
You can specify several properties
on one rule:
H1 { font-family: Times, serif;
color: black; font-size: 2em; }
You can
group tags:
H1, H2, H3 { font-family: Times,
‘Times New Roman’, serif; }
You
can also be very specific (contextual selector). In the example below,
the rule will only be applied to emphasized text inside of a Heading1
tag. <h1>Heading
<em>One</em></h1>
H1
EM { font-family: Times, serif; color: maroon; font-style: italic; }
To apply
style sheets to an HTML document you can use a single linked (or
external) style sheet. Use a single style sheet (in a separate file,
saved with the .css suffix) to define multiple pages. A typical .css
file is a text file containing only style rules (No javascript
comments, no HTML or anything else, only CSS), as here:
P
{font-family: non-serif; font-size: medium; color: red}
H1
{font-family: serif; font-size: x-large; color: green}
H2
{font-family: serif; font-size: large; color: blue}
To
apply a linked .css style sheet (“stylesheetname.css” in the example
below) to an HTML page, a <link> tag is added to the page
header:
<link rel=”stylesheet”
href=”/pathname/stylesheetname.css” type=”text/css”>
Creating
a linked style sheet allows you to define your CSS rules in one place.
Linked style sheets ease web page maintenance, reduce file size, and
increase accessibility.
Why use style
sheets?- create a set of web
pages with consistent appearance
- easier maintenance
- separate
page structure from page appearance
- ADA compliance
- reduce
web page file size
- reduce your reliance on
non-standard tags such as <center> and
<font>
The following
CSS Tutorial Workshop and Slide Presentation,
from West Virginia
University, will teach you more on how to use and code web Style
Sheets.
The CSS workshop contains illustrated explanations and examples of the
concepts
being taught, followed by detailed learning activities.
Cascading
Style Sheets Tutorial and Slides
- Workshop Handout
[pdf, 11 pages, 145kb]
- What are
style sheets?
- How CSS Works
- Why
use style sheets?
- How to add style sheet
rules to your web page
- Linked or External
Style Sheet
- Activity
1: Apply a variety of external style sheets to the sample html file
- Inline
or Local Style Sheet
- Activity
2: Add an inline style
- Embedded
or Global Style Sheet
- Activity
3: Create a simple embedded style sheet
- Activity
4: Add style rules to control text appearance
- Margins,
Indent, Alignment
- Borders
- Shorthand
properties
- Activity 5: Margins,
Alignment, Indent
- Activity 6: Borders
- Class
- Pseudo-class
for links
- Activity 7: Class and
Pseudo-class for Links
- Validation
- Create
different style sheets for print and screen
- Using
Style Sheets in Dreamweaver
- References
- CSS Workshop PowerPoint Presentation
- CSS Workshop Data Files [zip]
- Validate
your CSS
Popularity: 5% [?]
Related Posts:Tutorials for Cascading Style SheetsCascading Style Sheets Tutorials2 CSS Tutorials and GuidesCascading Style Sheets Reference Guide2 CSS Training Tutorials
Tags for this post>>
CSS
Title:
Reverse Animating a Movie
Description:
This tutorial deals with reverse animating a flash movieclip. It uses a simple technique with minimal ActionScript . This tutorial assumes the reader to know about Buttons and Button actions, Motion Path, Paths to Object.
Tutorial url: