Ok. CSS Does not really stand for Cool Styles for Sites – but it should. Cascading Style Sheets just sounds lame.
A style is how something is decorated. For example, a person may choose to wear a “retro” style of clothing. It does not change the essence of the person rather it modifies their appearance. I may not immediately recognize my friend in a 1970 leisure suit but it is still my friend. CSS styles are the same as fashion styles. We can change the font, color, size and position of some text on a web page but it does not change the content of the text. It just changes how it appears.
CSS allows web designers to selectively apply styles to the tags in an HTML document (aka web page). In CSS we have 3 primary mechanism of deciding how tags get styled. We can style tags by id, class, tag name. (Actually, it is a little more complicated than that but not by much. We will discuss advanced CSS selectors in a later lesson. But for now lets focus on the core selectors.)
By id
HTML tags can be given an id or a class(es) or both. The following <p> tag has been given an id. The value of an id should be unique with in a document. So there should be only one tag with the id “importantText”.
<p id=”importantText” >My important text </p>
By class
Classes are different. Classes allow us to group tags by type. The following <p> tags have been given a class of “important”. This allows us to define how all important tags should be styled.
<p class=”important” >important message 1</p>
<p class=”important” >important message 2</p>
<p class=”important” >important message 3</p>
Classes can also have multiple groups. For example I could have a tag that has a class “important” and “critical”. This tag would be decorated with the styles defined by the important class and the critical class.
<p class=”important critical” >important / urgent message 1</p>
<p class=”important” >important message 2</p>
<p class=”important critical” >important / urgent message 3</p>
By tag name
CSS can also select tags by tag name. So all <p> will get a style applied.
Creating a style sheet
Lets create your first style sheet and dive right into the code. In Visual Studio Web Developer 2010 Express open the MyFirstWebSite project. (See lesson 2 if you don’t have a project to work from.)
Right click on the solution and add a new item.
From the new item dialog select Style Sheet and name it StlyeSheet.css.
In the css file we are going to add a style that decorates all <p> tags with maroon text and large font size.
p {
font-size: large;
color: Maroon;
}
Now save the page and run the project. Nothing changed? Huh. That is because we did not tell the page about our style sheet. We need to link our style sheet to our web page. Open the web page (Default.html). Add the following line someplace inside of the <head> tags.
<link href=”StyleSheet.css” rel=”stylesheet” type=”text/css” />
So the <head> tags should now include a <link> tag.
<head>
<title>My Favorite Stuff</title>
<link href=”StyleSheet.css” rel=”stylesheet” type=”text/css” />
</head>
Now save Default.html and refresh the page. Notice something different? The My Favorite Links is now maroon and larger. Cool.
What else can we do? How about transforming our favorite links into a menu?
First, we need a way to select the tags that the CSS will effect. Because this is a menu and our page will only have one menu we will use ids to find the tags. (Incidentally, adding id attributes is good practice, Ids help to improve readability of the html.)
<div id=”menuBar”>
<p>My Favorite Links</p>
<ul id=”menu”>
<li> <a href=”http://www.bing.com”>Bing.com </a> </li>
<li> <a href=http://google.com>google.com</a> </li>
<li> <a href=”http://www.live.com”>live.com</a> </li>
</ul>
</div>
We want our menu bar to be 100% of the page width and the background to be a gradient. Download the gradient and add it to the project under the images folder (right click the images folder and select “Add Existing Item”).
Next add the following CSS to the stylesheet.css file. We will cover the more advanced aspects of this CSS in the next lesson. So don’t panic if you don’t understand everything.
#menuBar
{
height: 84px;
width: 100%;
background: url(images/menu-bg.png) repeat-x;
}
#menu
{
list-style-type: none;
text-align: center;
display: inline;
}
#menu li
{
display: inline;
padding: .2em 1em;
background-color: #036;
margin: 15px;
}
#menu li a{
text-decoration: none;
color: #fff;
}
#menu li:hover
{
color: #fff;
background-color: #369;
}
List style courtesy of http://css.maxdesign.com.au/listamatic/
Now your web site should look something like the following pic.
CSS is very powerful – we are able to dramatically change how our webpage was rendered by modifying the CSS file. The CSS Zen Garden Site does a fantastic job of showcasing how amazing CSS styled sites can be.
milliken 
