Web Development 101: Part 3, Getting some style

In Part 2, you saw how to use WebMatrix to create a very simple web page, and how this page will operate in a number of different browsers. In this section you’ll see how you can start being smart about how you change the visual style of the page, using the technology called Cascading Style Sheets (CSS)

The simple list of movies on a web page you built in is here:

clip_image001

Getting your page ready for Styling using Cascading Style Sheets

In the next few steps, you’ll see a few more HTML tags that allow for functionality such as hyperlinks, page divisions and script tags, as well as how you can edit this page using Cascading Style Sheets (CSS) to set the look and feel. You’ll finally use layouts to take the content that would be common between this page and other pages on your web site so you can see how to make editing common content more easily.

Using Dividers

In HTML, you can logically divide your page up into blocks using the <div> tag. This is especially useful when you start looking at styling later in this article where you can specify the style for a certain part of a page by styling its div.

So, to start, here’s the HTML of your page from part one:

<!DOCTYPE html> 
<html lang="en">    
   <head>        
      <meta charset="utf-8" />        
      <title>My Favorite Movies</title>    
   </head>    
   <body>    
      <h1>A list of my Favorite Movies</h1>       
      <ol>            
         <li>It's a wonderful life</li>            
         <li>Lord of the Rings</li>           
         <li>The Fourth World</li>            
         <li>The Lion King</li>       
      </ol>    
   </body>
</html>

The first thing to do is to wrap the list containing the movies into it’s own <div> like this:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title>My Favorite Movies</title>
   </head>
   <body>
      <h1>A list of my Favorite Movies</h1>
     <div id="movieslist">
        <ol>
           <li>It's a wonderful life</li>
           <li>Lord of the Rings</li>
           <li>The Fourth World</li>
           <li>The Lion King</li>
       </ol>
     </div>
   </body>
</html>

Now you can see that the <ol><li> list containing the movies is now contained within the <div> tag. If you view the page now, there’ll be no difference from earlier. This is because the <div> tag is a logical divider. It doesn’t have any physical appearance.

Using Hyperlinks

You’re probably already familiar with hyperlinks – clickable areas on a page that link you to another page. While the term for these is a hyperlink, in HTML they were originally called anchors, and as such, whenever you want to create one you use the <a> tag.

The <a> (or anchor) tag works by making the content between the <a> and </a> clickable. When the user clicks on this content, the browser will be redirected to a HREF (Hyper-reference) indicated by the href attribute within the <a> tag.

An attribute is defined on the tag itself, instead of within the tag, like this:

<tag attribute=”attributevalue>content</tag>

Thus, to create a hyperlink, you can use syntax like this:

<a href=”http://www.microsoft.com>Click Here</a> 

The href doesn’t have to be a web site, like above, but can also be things like a JavaScript function to perform an act that the programmer has used. There’s a special href that can be used as a placeholder, while you’re developing, so that you can test that the styling of hyperlinking is working. To do this, use the “#” character as your href.

So, to turn all our <li> items containing our movies into hyperlinks, we simply wrap the text of the movie in an <a> tag, and set the HREF to #, like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Favorite Movies</title>
</head>
<body>
  <h1>A list of my Favorite Movies</h1>
  <div id="movieslist">
    <ol>
      <li><a href="#">It's a wonderful life</a></li>
      <li><a href="#">Lord of the Rings</a></li>
      <li><a href="#">The Fourth World</a></li>
      <li><a href="#">The Lion King</a></li>
  </ol>
  </div>
</html>

If you run the page, you’ll see that the elements on your list will use the familiar style for hyperlinks, namely a blue underline:

clip_image002

Adding a Header and Footer

The next thing you’re going to do is to add a Header and a Footer to the page. You’re going to do these using the new <header> and <footer> tags available in HTML5. You can learn more about HTML5 at the w3cschools site: http://w3schools.com/html5/default.asp

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Favorite Movies</title>
</head>
<body>
  <header>
    <h1>A list of my Favorite Movies</h1>
  </header>
  <div id="movieslist">
    <ol>
      <li><a href="#">It's a wonderful life</a></li>
      <li><a href="#">Lord of the Rings</a></li>
      <li><a href="#">The Fourth World</a></li>
      <li><a href="#">The Lion King</a></li>
    </ol>
  </div>
  <footer>
    This site was built using Microsoft WebMatrix. 
    <a href="http://web.ms/webmatrix">Download it now.</a>
  </footer>
</html>

As you can see, they are pretty straightforward pieces of HTML.

For the header, we just wrap the <h1> that we created earlier in a <header> tag. For the footer we just create a little text and a hyperlink.

When you look at the page within the browser, it will now look something like this:

clip_image003

Other than the footer, it's not much different, but don't worry, that will soon change!

Defining the Look and Feel of the page

In the previous section, when looking at the anchor tag, you learned about attributes, where attributes describe how the element behaves. In the case of the anchor tag, you defined the behavior of what would happen on the click event by specifying the HREF attribute.

As you might expect, you can use attributes to specify how the element looks, including font style, font size, color, border and much more.

So, for example if you remember the <h1> that we defined on the page, that reads ‘A list of my Favorite Movies’, you could change its font and color like this:

<h1 style="color:blue; font-size:32; font-family:Verdana; text-decoration:underline">A list of my Favorite Movies</h1>

As you can see, the style attribute of the <h1> tag contains a list of definitions for the style. So the above markup set the color to blue, the font size to 32, the font family to Verdana and the text decoration to underline, giving you a result like this:

clip_image005

While this works well, it isn’t the greatest way to style the page. Consider what would happen if you had to style every element in that way. You’d end up with a lot of text on your page, slowing down the download and slowing down the browser.

Fortunately, there’s another way, and that is to use a style sheet on your page. Style sheets are defined using the concept of Cascading Style Sheets where a style set on an element can be inherited by a child of the element. So, for example if you put a style on a <div>, and that <div> has child <ol> and <li> elements, then the style will also apply to them, unless you as a developer override this. A great place to learn more about CSS is w3cschools: http://w3schools.com/css/default.asp.

Let’s take a look at what it takes to define the style on the <h1> tag, without using a lot of inline code on the style attribute.

So, instead of putting all the styling code into the <h1> tag itself, we’ll just specify it’s class attribute, like this:

<h1 class="Title">A list of my Favorite Movies</h1>

Now that the tag has a class, we can tell the browser to use a specific style for everything that has this class. This is done with the CSS code syntax like this:

.Title {
font-size: xx-large;
font-weight: normal;
padding: 0px;
margin: 0px;
}
 

The style ‘language’ is comprised of a list of attributes separated by semi-colons and contained within braces ({..}). If this is to apply to a class, the class is defines using the ‘dot’ syntax, which boils down to the class name preceded by a dot.

This code is placed within a <style> tag in the header of the page. Your page markup should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Favorite Movies</title>
  <style type="text/css">
    .Title {
      font-size: xx-large;
      font-weight: normal;
      padding: 0px;
      margin: 0px;
    }
  </style>
</head>
<body>
  <header>
    <h1 class="Title">A list of my Favorite Movies</h1>
  </header>
  <div id="movieslist">
    <ol>
      <li><a href="#">It's a wonderful life</a></li>
      <li><a href="#">Lord of the Rings</a></li>
      <li><a href="#">The Fourth World</a></li>
      <li><a href="#">The Lion King</a></li>
    </ol>
  </div>
  <footer>
    This site was built using Microsoft WebMatrix. 
    <a href="http://web.ms/webmatrix">Download it now.</a>
  </footer>
</html>

When you run it, the style will take effect, and you’ll see something like this:

clip_image006

Remember the <h1> had a class of ‘Title’, so by setting the .Title, you can set the style for every element that has the same class.

When you want to set a specific element, you can either use a class for that element, knowing that there’s only one instance of that class, or you can name the element, using an id, and then set the class for that id. If you take a look at your HTML, you’ll notice that the list of movies is held within a <div> which has been given the id ‘moviesList’. You can set the style for this by preceding it with a # in your stylesheet definition, like this:

#movieslist{
  font-family: Geneva, Tahoma, sans-serif;
}
 

This is defining a style for the <div>, and because style sheets cascade (giving them the name), any element within this div will also have this style applied to it. So, even though I haven’t specifically set the style for the <li> elements containing the text, the style is still applied:

clip_image008

Remember the browser defaults to rendering <li> objects in a <ol> list as numbered items. We can get rid of that by setting the style. Because these objects are inside the div that we called ‘movieslist’, we can address them easily to change their style.

Here’s the syntax:

#movieslist ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
}
 

This simply states that for each <ol> within #movieslist, set the style to be not a list (i.e. no bullets), no margin, no border, no padding.

Here’s the result:

clip_image009

And as you can see, the numbers are now gone.

The text of each of the list items was held within an <a> tag, so we can define the appearance of every <a> tag within every <li> tag within #movieslist with this syntax:

#movieslist li a {
  font-size: large;
  color: #000000;
  display: block;
  padding: 5px;
}
 

The settings here pretty much speak for themselves, so let’s see what it looks like when we run the page now.

clip_image009[1]

When it comes to an <a> tag, there is another behavior that happens when the use hovers over the link. You can use this to ‘hot track’ the mouse, and change the style of the element when the mouse is over it. CSS also supports this, using the following syntax

#movieslist li a:hover{}

So, we can now define what to do when the mouse is hovering over a tag:

#movieslist li a:hover {
  border-left: 10px solid #94c9d4;
  padding-left: 10px;
  background-color: #e7f5f8;
  text-decoration: none;
}
 

This gives the text a 10 pixel border on the left and a background color to highlight the text.

You can see what this looks like with a when the mouse is over one of the options here:

clip_image010

It’s fun to experiment with CSS and WebMatrix makes it easy. As you’ve been working along you probably thought ‘wait a minute – this CSS stuff is all very nice, but what if my site has more than one page?’

It’s a great question, because here the CSS has been integrated into the page <head> using a <style> block. The good news is that the <style> block doesn’t just have to use style from within it – it can be pointed to an external file, and this way, any page that points to that file will be able to take advantage of the same styles.

It’s easy to do this with WebMatrix. With the ‘Files’ workspace open, click the ‘New’ button and select ‘New File…’

clip_image011

The New Files dialog box will open. Select ‘CSS’ as the file type and give the CSS the name ‘movies.css’.

clip_image013

Press OK and you’ll get the movies.css file created for you. It will contain an empty <body> tag, like this:

body {
}
 

Replace this with the CSS below. I've tidied up some of the CSS that you were using as you worked along, and have created specific CSS for the header instead of using the Class attribute on the <h1>, this makes for cleaner HTML.

body {
font-family: Tahoma, Verdana, Geneva, sans-serif;
width: 85%;
margin: 20px auto;
}
 
header {
padding: 10px;
border-bottom: 1px solid #e5e5e5;
}
 
header h1 {
font-size: xx-large;
font-weight: normal;
padding: 0px;
margin: 0px;
}
 
#movieslist{
margin: 20px 0;
}
 
#movieslist ul {
list-style: none;
margin: 0;
padding: 0;
}
 
#movieslist li a {
font-size: large;
color: #000000;
display: block;
padding: 5px;
}
 
#movieslist li a:hover {
border-left: 10px solid #94c9d4;
padding-left: 10px;
background-color: #e7f5f8;
text-decoration: none;
}

Go back to your page, and delete the entire <style> tag, and replace it with this:

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

This tells the browser to load your style sheet instead of getting the styles directly within the page. Your page markup should now look something like this, which I’m sure you’d agree is much cleaner:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>My Favorite Movies</title>
  <link rel="stylesheet" type="text/css" href="movies.css" />
</head>
<body>
  <header>
    <h1>A list of my Favorite Movies</h1>
  </header>
  <div id="movieslist">
    <ol>
      <li><a href="#">It's a wonderful life</a></li>
      <li><a href="#">Lord of the Rings</a></li>
      <li><a href="#">The Fourth World</a></li>
      <li><a href="#">The Lion King</a></li>
    </ol>
  </div>
  <footer>
    This site was built using Microsoft WebMatrix. 
    <a href="http://web.ms/webmatrix">Download it now.</a>
  </footer>
</html>

The footer looks a little untidy, so let’s add some styles to the CSS file to make it look a little nicer.

footer {
font-size: smaller;
color: #ccc;
text-align: center;
padding: 20px 10px 10px 10px;
border-top: 1px solid #e5e5e5;
}
 

This centers the text, and gives it a small font in grey. One thing to note is that the new HTML5 <footer> tag isn't compatible with many browsers. The css style will be correctly display in certain browser while in others it will not be, this due to many browser not being fully compatible with HTML5. In older browsers the footer tag will not be rendered correctly, like in IE8. In order to have our css correctly applied to our <footer> tag, we can simply wrap our footer with a <div> with the id="footer".

Run your file right now. You may notice that not all of our css is applied correctly to our footer.

clip_image014

Let's add a <div> wrapper now around our footer so our css will be correctly applied. In our default.cshtml file, add a <div> so your code looks like:

        <div id="footer">
            <footer>This site was built using Microsoft WebMatrix. <a href="http://web.ms/webmatrix">Download it now.</a>
            </footer>
        </div>

Now we need to update our css. In movies.css, find your footer style and add a # before it. This changes our css styling from our footer tag to an element with the id of "footer". In css, # denotes an id. Your footer style should now look like this:

#footer {
font-size: smaller;
color: #ccc;
text-align: center;
padding: 20px 10px 10px 10px;
border-top: 1px solid #e5e5e5;
}

Now our page will be rendered with our style correctly. You can see the result of that here:

clip_image014

Summary

In this article you saw how to use CSS in WebMatrix to add styling information to your page. You saw how to externalize the CSS so that it can be shared across pages, including how to set up a CSS class that allows you to style multiple elements, how to use CSS to set up the design for a specific element using its ID, and how to cascade design information from container elements down to their children, as well as allowing children to override the style of their parents.

In Part 4 of this series, you’ll learn how to use Layout to control the common content across all your pages.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!