Styling Your Website

At The University of Montana

Using Cascading Style Sheets in the Cascade Content Management System

Overview

Terminology

CSS vs Cascade:
CSS stands for Cascading Style Sheets, Cascade is our Content Managment System
Selector:
What we use to choose the element(s) we want to style (e.g. headers and paragraphs)
Property:
The attribute you wish to change, and each property can take a value in the form of property:value

Anatomy of a style

h1 {
	font-size: 20px;
	font-family: "Arial Black";
	padding-top: 10px;
	padding-left: 10px;
}
/* Selecting a class */
.right {
	text-align: right;
}

Classes and Ids

Class:
Can be used multiple times on a page.
In HTML they are applied using the syntax class="name" and in the CSS file they are selected using .name { property:value; }
Id:
Can be used only ONCE on a page and is generally used in conjunction with Javascript.
In HTML they are applied using the syntax id="name" and in the CSS file they are selected using #name { property:value; }
In general stick with using classes

Applying styles

HTML 
<html>
    <head>
        <title>New Web Project</title>
    </head>
    <body>
        <h1>New Web Project Page</h1>
		
	<h2>New Project Subtitle</h2>
	
        <p class='right'>
		Some content that goes 
		along with this new web
		project. this will be
		right aligned.
	</p>
    </body>
</html>
CSS 
h1 {
	font-size: 20px;
	font-family: "Arial Black";
	padding-top: 10px;
	padding-left: 10px;
}
.right {
	text-align: right;
}

Tools

Use Firefox.
There are a multitude of plugins for Firefox that are specifically designed to help Web Developers. (Internet Explorer 8 and Google Chrome are making progress with their development tools, but they are not up to speed with Firefox.)
Web Developer Toolbar
A firefox plugin that allows you to disable sstyles and javascript validate HTML.
Firebug (the most important tool)
A firefox plugin that allows you to view how style changes would look on your site on the fly.

Questions & Ideas

Give it a try

Links and Handouts

Handouts

Links