Adding Style with CSS
* Introduction
Cascading Style Sheets, or CSS, is the easiest and the most recommended way to control the presentation layer in your web pages. The main advantage of CSS over the traditional HTML markup is that the styling can be kept entirely separate from the content. For example, it’s possible to store all the presentational styles for an enterprise web site in a single CSS file. This ability gives CSS far better control over presentation than it's parallel methods in HTML.
Because of this ability to externalize the presentation logic, CSS offers some significant benefits:
- All styling is kept in a limited number of style sheets. The positive impact this has on site maintenance can’t be overestimated. Editing one style sheet is obviously more efficient than editing hundreds of HTML files on large site.
- There is also a huge savings in bandwidth, as well. Style sheets are cached after the first request and can be reused for every page on the site. And removing all of the presentational markup from your web pages in favor of CSS, can also reduce the size and bandwidth usage of your XHTML pages. This benefits the site administrators, through lower bandwidth and storage costs, as well as the site’s visitors because the web pages load faster.
- The separation of content from presentation makes it much easier to reuse the content for other purposes, such as RSS feeds or text-to-speech conversion.
- Separate styling rules can be used for different output. We no longer need to create a special version of each page for printing, you can simply create a single style sheet that controls how every page on the site will be printed.
Read further - Syntax ↓
* Syntax
A CSS style sheet is composed of a list of statements. A statement consists of three elements, a selector, a property, and a value. A selector is essentially the object, element, or HTML tag you'd like to style. A property is a CSS specific term that can be used and has a value. The value is of course, what you are trying to specify. In inline CSS no selector is used because you are applying the property and value directly to the element, but in externalized style sheets or in internal style sheets loaded in the <head> section of your page a selector must be used.
It is written as such:
selector {property: value}
Selectors
A selector can be any HTML tag you wish to style for example: <body> <h1>-<h6> <p> <table> <td> or any other tag you may be using in your page.
Example:
body {
background-color:#ffffff;
font-size: 1em;
}
By styling tags in this way you will effect every instance of them in your page. To be more specific or only effect certain tags it is necessary to give the tag in your XHTML an identifier.
There are two types of selectors that have identifiers.
The first is the "id selector". An id selector is used to specifically address one element and those elements contained within. It is a singular entity and cannot be used more than once in a page. In the example below I show first how to establish the selector in your HTML then how to use that selector in a CSS statement.
In your XHTML/HTML you would write this as such:
<div id="header"></div>
In your style sheet you would use this selector like this:
#header {
background-color: #d3d3d3;
}
The second type of selector that uses an identifier is the "class selector". A class selector is used when you have multiple items that you would like to style, but there are similar tags elsewhere in your document which you do not want effected. For instance say you have a default style for every <h3> tag in your page, but in one area of your page you have several that you'd like to be styled differently. You can identify those with a class as such:
In your XHTML/HTML you would write it like this:
<h3 class="special_h3">Content</h3>
In your style sheet you would use the class selector like this:
.special_h3 {
font-size: 1.5em;
font-color: #ff0000;
}
Properties
There is myriad of available properties that can be set with CSS2 I'm not going to list all of the here, but for a complete list you can look at the w3schools CSS reference list. Every property has it's own set of accepted values depending on the property. A property must have a value and they are separated by a colon ":" and terminated with a semi-colon ";". Below are a few examples of properties and values.
font-size: 16px;
font-weight: bold;
border: 1px dashed #000000;
background-color: #ffffff;
Read further - Formatting ↓
* Formatting
CSS is a very forgiving syntax in that it be written in a number of ways and is unaffected by white space or line breaks. Below are a few examples that would all work equally well.
#menu { width:100%; height: 300px;}
#menu {width:100%;height:300px;}
#menu {
width:100%;
height:300px;
}
So as you can see things can get be as long or as concise as you'd like. Because of this loose formatting it's very easy to get sloppy in your code which can make things much more difficult than they need to be. I recommend putting everything on it's own line so that you'll never have to scroll to the right or left in your editor and your code will be much easier to read as your file grows. It's also a good idea to use indentation to illustrate the difference between selectors and properties. Below is an example from this very page that will show you exactly what I mean.
#footer {
background-color: #333333;
margin: 0 0 0 0;
padding: 0 0 0 0;
height:100px;
font-size: 1em;
font-family: Arial;
color: #ffffff;
background-image:url(../images/footerbg.jpg);
background-position:bottom;
background-repeat:repeat-x;
}
Another fantastic organizational tool is to use comments throughout your code to section of the different areas you are addressing or any special circumstances you encountered while working through a problem. These comments will help you to stay organized and you can then go back and use them rediscover solutions to problems when they come up again.
Comments are written in CSS as such:
/* This is a comment */
Comments can occur anywhere in your style sheet, but be careful to close them out or you may inadvertently comment out some valuable code. Using an editor with syntax highlighting can help to prevent that sort of thing from happening. Below is another example taken directly from the style sheet of this page that demonstrates effective use of comments.
/* IE Bug Priority 1 */
#question:hover {
display:block;
width:234px; /* Because of IE I had to actually compensate */
height:61px; /* For the width and height of the added 2px border */
border:2px dashed #ffffff;
}
#menu {
position:absolute; /*This Fixes the placement issue in IE also in #head */
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style:none;
top:137px;
left:460px;
width:441px;
height:38px;
background-image:url(../images/menu-trans.gif);
background-repeat:no-repeat;
}
Read further - Usage ↓
* Usage
To apply your style sheet to your pages it must be loaded or included in the <head> section of your pages. This can be done either by placing your style sheet directly into the head as an internal style sheet or it can be linked to an external file. It is almost always a good idea to use an external style sheet for your pages to ensure consistency and the DRY (Don't Repeat Yourself) principle. Sometimes when developing a single page quickly though using an internal style sheet can be helpful to quickly see results and later moving that style sheet to an external file when you have laid all of the foundations.
To include your style sheet internally in the <head> section of your page you would use the <style> tag like so.
<head>
<style type="text/css" media="screen">
body {
background-color:#ffffff;
color:#000000;
font-family: Arial;
}
</style>
</head>
To include an external style sheet file the file must be named with the extension of " .css" and "linked" into the head section with either a full or relative path like so.
<link rel="stylesheet" href="/css/base.css" type="text/css" media="screen" title="no title" charset="utf-8">
So now you should have a pretty good idea of how to use write and apply styles to your pages let's move on to the video tutorials which I encourage you to follow along with. You can download the completed example files used in the tutorials to review and help you along the way on the next page.