Stylesheets
The look of a web page's content can be controlled through the use of the various tags
that have been discussed throughout this site. However it can get tedious to insert
numerous tags for every section of the page and then to edit the attributes of every tag.
The style tag addresses that problem by allowing a web designer to set the attributes of
multiple elements at one time, using a single tag.
The <style> tag pair is used to enclose a list of style (formatting) rules for a
web page. The browser does not display the list of rules. It only uses them as instructions
for formatting the content of the web page. The <style> tag is placed in the
<head> section of the web page.
In this example, the style tag includes instruction for the browser to display the content
of all <h2> tags with the color green. No matter how many <h2> tags there are,
they will all have green text.
A style rule can be applied to any HTML tag, including multiple tags at once.
Style rules can be overridden for an individual tag by setting the style attribute of the
specific HTML tag for which a different set of rules is to be applied.
Return to top of document
Attributes
The <style> tag supports only two attributes - type and media, neither of which
are required, nor used by most web page designers. It's the style rules between the
<style> tag that are important.
The type attribute defines which language is being used within the <style> tag. The
value "text/css" is almost always used and represents the "Cascading Style Sheets"
language as developed by the World Wide Web Consortium (W3C).
It is the only <style> language supported by all the major browsers.
The media attribute defaults to all media types, which essentially means that the screen
and print versions of the web page will look the same. The media attribute is not used
that often but comes into play occasionally when a designer wants set different rules
for print than for the screen (such as limiting print output to black and white).
Most browsers will allow the HTML page to omit both attributes, defaulting to the
values "text/css" and "all") for type and media, respectively.
Return to top of document
CSS
The content of a <style> tag is usually called a "Cascading Style Sheet (CSS)",
or simply "tyle sheet". There are competing versions of style sheets, but the
one that dominates was released by the
World Wide Web Consortium (W3C).
The W3C has released two CSS specifications, known as CSS1 and CSS2. The major browsers support
both. To use the W3C style sheet language, set the style attribute of the
HTML <style> tag to "text/css" (leaving it blank usually works too).
Style sheets in CSS are made up of rules. Each rule has three parts:
selector
tells the browser which part of the document is affected by the rule (basically, any
HTML tag since everything within a web page falls under one or more tags)
property
which aspect of the layout is being set (such as 'color' or 'background-color') -
a complete list of style sheet properties is given further down this page
value
the value of the property (such as 'purple' and '#d8da3d')
Here are some examples of how CSS rules are formatted:
body { color: 'purple' }
body { background-color: #d8da3d }
body { color: purple; background-color: #d8da3d }
h1, h2, h3 { font-style: bold }
The third line of the example above shows how rules can be combined (two property
values assigned in a single row. The fourth line shows how styles can be applied to
multiple tags (three tags sharing a common property assignment).
Return to top of document
Classes
Sometimes a page designer would like to define a set of rules which be selectively
applied to elements within the web page. CSS allows the definition of a re-usable
'class' of rules as follows (place this in the <head> section of an HTML page):
<style>
.fixcolor {color:green}
</style>
This defines a style sheet class by the name of 'fixcolor' which simply assigns the color
attribute a value of 'green'. The class is now available to be applied to other elements
of the web page, as in this example where a style class is applied to a <div> tag.
Code
Resulting Display
:Place this in the <head> section
<style>
.fixcolor {color:green}
</style>
(not displayed)
:Place this anywhere in the <body> section
<div class="fixcolor">
Copyright Gary L. Beene 2004.
All rights reserved.
</div>
Copyright Gary L. Beene 2004. All rights reserved.
The 'fixcolor' style can be applied to as many elements on the HTML page as desired.
Return to top of document
External Style Sheets
When designing a web site with many pages it is often desirable to maintain the same
look and feel from one page to another. CSS makes that an easy task by allowing an
HTML page to call up style sheets saved in separate files.
The first step is to save the style rules (everything between <style> and
</style>) into a text file. The .css extension is normally used but is not required.
The <style> tag pair themselves are not included in the file.
Then, place the following code into the <head> section of a web page (this
code assumes the filename is 'stylefile.css'):
<link rel="stylesheet" href="stylefile.css">
The contents of the 'stylefile.css' file will now apply as though the style
sheet were embedded with the HTML page.
The same file can be accessed by any number of pages, such as every page
on a web site that is to have the same style applied to its content.
Return to top of document
CSS Properties
Here's a listing of the properties supported by the CSS1/2 specifications. More
details can be found here.
Name
Value
Default
azimuth
[[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit
transparent
background-attachment
scroll | fixed | inherit
none
background-color
transparent | inherit
0% 0%
background-image
none | inherit
repeat
background-position
[ [ left | center | right ] [ top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
