Welcome guest

Stylesheets

Now the time has come to make our content look the way we want it too.  We will accomplish this by utilizing Cascading Style Sheets (CSS).  Using styles, we can change all of an element's properties.  For example:

  • Size, width, height
  • Background color
  • Font size and family
  • Font color
  • Borders
  • Alignment on page

This is only a fraction of the things CSS gives us the power to control.

To link an XHTML document to a CSS file, we place the following code in the header of our XHTML document:

<head>
<title>Sample CSS Linkage</title>
<style type="text/css">
    <!-- 
    @import url("style.css");
    --> 
</style>
</head>

In the above example, we would be linking the file style.css to our XHTML document.  There are a few things to remember when linking a CSS document:

  • Make sure the pathname to the CSS document is correct.
  • Make sure it is placed inside a comment tag.  The reasons for this are complicated; in a short sense, it prevents some browser error-reporting.
  • Stylesheets can be nested inside other stylesheets using the @import statement.

Another way to apply a stylesheet to your document is presented by the following code:

<head>
<title>Sample CSS Linkage</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
  • Once again, check to make sure that your pathname to the stylesheet is correct.
  • Link can be used for more things than just stylesheets.
  • Link doesn't support different media types.
  • You can't use <link> inside a stylesheet, only in the header of an XTHML document.

Inside of a stylesheet, there are a few pieces of syntax one needs to learn.  Stylesheet recognize tags, ids, and classes.

Also, there is a universal selector, * (asterik).  If one gives a style to the universal selector, it will be applied to the entire XHTML document.

* {
    background-color: #00CCFF;
}

This would make the entire web page a bright/sky blue color.

Tag Styles

To associate a style with a certain tag, all one has to do is write down the tag name, for example:

p {
    font-size: 20px;
}

In this case, all "p" tags on our XHTML document will have a default size of 20px;

ID Styles

Using <div> tags and the like (we'll cover these in the next few sections), we can apply styles to a unique ID.  It is important to note that an id is unique, and should only be placed on one tag.  We commonly reserve ID's for organizational <div> tags.

The XHTML tag might look like this:

<div id="wrapper">

To denote we are referencing an ID, we place a "#" symbol in front of the ID name.  For example:

#wrapper {
    margin-left: 40px;
}

The above style will shift whatever element has the id 'wrapper' right by 40px.

Class Styles

Much like IDs, classes are used to apply a style to particular tags.  However, where we required IDs to be unique, classes are not under that same restriction.  There can be as many instances of a class as one chooses (although if you notice you're using the same class more than not on the same tag, consider styling the default tag instead).

The XHTML tag might look like this:

<p class="centered">

We donote a class in CSS by using a "." (period) in front of the class name.  For example:

.centered {
    text-align: center;
}

OR

p.centered {
    text-align: center;
}

The above style will center the text inside the marked tag.

Notice how the '.centered' can be placed by itself or concatenated onto our p tag.  Use this to your advantage, it will give you great control when styling a page.