Web Page Design Notes, Part 2

What are Cascading Style Sheets?

Cascading Style Sheets are a set of user-definable rules that determine how and where content marked by XHTML tags should appear within a web page. CSS, in conjunction with XHTML, makes it easy to define a common "look and feel" to use across all your web pages, as well as making global style updates to a web site much easier. By placing all layout and appearance information in a stylesheet file, a web designer achieves a separation of content from appearance, making it simpler to use the same content in a wide variety of contexts. See The CSS ZenGarden for an illustration of the use of CSS in web design.

When used in combination with XHTML and JavaScript, the technology is termed Dynamic HyperText Markup Language. DHTML allows users to build consistent, dynamically generated (as opposed to static) web pages.

In this document, we only talk about external stylesheets and their use. It s also possible, though less desirable, to embed style definitions directly in an XHTML file. Such embedded styles may be placed in the head section of the file with the <style> tag if they are to apply to the entire page, or may be set up as attributes modifying a specific XHTML tag as it is used.

Basic Cascading Style Sheet Structure

A CSS file consists of one or more XHTML tags or attributes, along with the style values to be modified for that tag/attribute.

Linking a Style Sheet

To use an external style sheet in a web page, you must link the file containing the style sheet into the HTML file. The <link> tag allows you to specify the file and file type you want to link to the page. This tag must be placed in the <head> section of the document. Two or more style sheets can be linked in to the file with separate link tags, and will be applied in the order listed; thus, the most general stylesheet should be listed first, with more specific stylesheets listed second, third, etc.

A typical use of the <link> tag to include two stylesheets, one a general stylesheet for the entire web site and one containing additional styles specific to the current page, would be:

<link href="main.css" rel="stylesheet" type="text/css"/>
<link href="special.css" rel="stylesheet" type="text/css"/>

IDs, Classes, and the <div> Tag

The two tag attributes id and class, in combination with the <div> tag, allow you to set up sections of your document with specific, unique formatting.

The <div> tag can be used around any combination of XHTML structural tags, as long as the tags properly nest.

Each name of an id or class must be defined in the document's CSS file, along with its attributes. ID names are indicated in the CSS file by starting them with a #, e.g. #idname. Class names are indicated in the CSS file by starting them with a ., e.g. .classname. An id may only be used once in a given web page, for a single section of the page, while a class may be used to identify multiple sections of a webpage. A class or an id may modify any HTML tag attribute needed, and any content within the division indicated by the class or id will be affected by those modifications.

To mark a section of a web page as a division, use the <div> tag, giving the name of the desired class or id as an attribute of the tag.

Example of using div tags in a web page:
<div id="section1">
Content to format based on the section1 style defined in the .css file.
</div>
<div class="class1">
Content to format based on the class1 style defined in the .css file.
</div>

Example of an id definition and a class definition in a .css file:
#section1 {
}
.class1 {
}

Basic CSS Attributes for XHTML Tags

  1. background-color: set to a pound sign followed by any legal six-digit hexadecimal RGB value
    Example: background-color: #993399;
  2. color: same as background-color
  3. font-family: list one or more fonts, in preferred order of use.
    The last font listed should be either sans-serif or serif, as these two fonts are guaranteed to be available on any computer system. Any font name which contains spaces must be enclosed in double quotes. Example: font-family: "Vivaldi Script", ComicSansMS, sans-serif;
  4. font-size: specify either the absolute font size using the terms xxsmall, xsmall, small, medium, large, xlarge, xxlarge, or the relative font size using the terms smaller, larger.
  5. font-weight: specify the relative weight of the font using the terms normal, bold, bolder, lighter.
    Example: font-weight: bolder;
  6. font-style: specify any special style, such as italic, for the current font using the terms normal, italic, oblique.
    Example: font-style: italic;
  7. height: specify the height of the element either in pixels or as a percentage.
    Example: height: 10px;
  8. width: specify the width of the element either in pixels or as a percentage.
    Example: width: 50%;
  9. background-img: specify the URL of an image file to be used as the background for a page or section of a page.
    Example: background-img: url(bkgrnd.jpg);

A Few Selected References

Campbell, Marc. Web Design Garage. Prentice-Hall, 2005.

Castro, Elizabeth. HTML for the World Wide Web with XHTML and CSS: Visual
Quickstart Guide, Fifth Edition
. Peachpit Press, 2002.

Holzschlag, Molly. 250 HTML and Web Design Secrets. Wiley Publishing, Inc., 2004

Meyer, Eric. Cascading Style Sheets: the Definitive Guide, Second Edition.
O'Reilly Books, 2004.

Shea, Dave and Holzschlag, Molly. The Zen of CSS Design: Visual Enlightenment for the Web.
Peachpit Press, 2005.

Teague, Jason Cranford. DHTML & CSS for the World Wide Web: Visual
Quickstart Guide, third Edition
. Peachpit Press, 2003.

Sample CSS File

To see what the sample file produces, refer to the Web Design example files in the CSCI 1300 course library.

body { /* style changes for body tag */
background-color: #FFFFFF; /* white background, change to any other six-digit hexadecimal color */
background-image: url(background.gif); /* replace "background.giv" with name of your image file */
color: #000000; /* black text, change as above */
}

h1, h2, h3, h4 { /* style changes for header tags */
font-family: ComicSans, Verdana, sans-serif; /* make sure you have either sans-serif or serif as the last option */
font-weight: regular; /* regular, bold, bolder, lighter */
color: #000000; /* black text, change will override body text color */
}

p { /* style changes for paragraph tag */
font-family: ComicSans, Verdana, sans-serif; /* make sure you have either sans-serif or serif as the last option */
font-weight: regular; /* regular, bold, bolder, lighter */
color: #000000; /* black text, change will override body text color */
}

hr { /* horizontal rule tag */
color: #000099;
background-color: #000099;
background-image: none;
background-position: center; /* center, left, right */
height: 5px; /* given in pixels */
width: 70%; /* percentage of full screen width */
}

Print Friendly, PDF & Email

Comments are closed