Question of the Week

What non-geek hobbies do you have?

	Flash
	Basics / Animation
	ActionScript
	Special Effects
	HTML5
	CSS / HTML Basics
	Animation
	JavaScript
	Common Tasks
	Windows Phone
	Get Help

Getting Your Feet Wet in HTML 5 - Page 2

by kirupa | 23 March 2011

Have questions? Discuss this HTML 5 tutorial with others on the forums.

In the previous page, you added the HTML that defines the main elements you will be using. In this page, let's learn to make these elements look awesome.

Styling your Content with CSS
As of now, here is what your content looks like:

[ boring ]

Here is where we want to go:

[ want want want want want want ]

We get from boring to want purely through styling via CSS. CSS stands for Cascading Style Sheets, and what it provides in a nutshell, is a way for you to modify the look and formatting of elements in your HTML document. There are a few more interesting details, but I will point them out once you've started using them.

Using a CSS ID Selector
Let's first start with styling the div tag that wraps all of your content. The way we are going to do that is by first giving your div tag an id of mainContent so that we can reference it via a style:

<div id="mainContent">
<p>?</p>
<button>click me</button>
</div>

Once you have given your div tag an id, let's add a style that changes the background color of that div to a light blue. Before we get there, let's first define our styles region. In general, your styles will either live in an external CSS file or inside the head tag. For this tutorial, let's just stick with keeping things inside the head tag itself.

Inside the head tag below title and above the closing head tag, add the style tag:

<!DOCTYPE html>
<html lang="en-us">

<head>
<meta charset="utf-8">
<title>Hello...</title>

<style type="text/css">

</style>
</head>

<body>
<div>
<p>?</p>
<button>click me</button>
</div>

</body>
</html>

Great success! You have now defined a style region where your styles will live. Now the fun begins. Inside your style region, add the following CSS style selector to get our div with the id mainContent to display in a blue background:

<style type="text/css">
#mainContent {
}
</style>

Notice that a selector is defined with a hashtag (#) at the beginning. When you preview your document in your browser, notice that your mainContent div displays in a light-blue color:

The reason is that you specified the CSS background-color property that overrides the default color with what you specified. Because the id of the div and the id of the CSS also match, only your div element's background was affected. Let's do some more changes such as increasing the padding, giving a corner radius, and aligning everything to be centered.

Add the padding, border-radius, and text-align properties that correspond to those changes into your mainContent style block:

<style type="text/css">
#mainContent {
}
</style>

Don't worry if you do not know what all of these CSS properties mean. You'll have plenty of chances in subsequent tutorials to learn more about them.

If you preview your changes now, you will see that your application is starting to slowly lose its default look and feel...and we haven't even moved beyond our div yet:

[ this gets just one want ]

Next up we are going to change how our text inside our p tag looks like. You may think that we will now add some CSS properties that affect the p tag directly like we did for the div, but that's not what we are going to do. We are going to define these properties in our mainContent selector itself and let the cascading nature of CSS automatically propagate those changes down to the child elements such as our p tag.

Modify the mainContent style block by adding the following three lines:

#mainContent {
}
</style>

Despite you adding these lines to your mainContent style block that only affects your mainContent div, notice what you see in your browser:

[ the text-oriented styles got applied to our p tag as well ]

The p tag that once displayed in some tiny text is now more noticeable thanks to the font-family, font-size, and font-weight properties that you added.

Adding a CSS Class
Now that our div and, indirectly, our p tag look sufficiently styled, let's cast our attention to the button. For the button, instead of going with an id selector like what we did with the mainContent div, let's create a CSS class instead.

In case you were curious...
The difference between a CSS selector and a class is that you can use a selector only on one element. A class can be reused many times.

Inside your style block below your #mainContent block, add the buttonStyle class (notice the period before the name in the markup):

<style type="text/css">
#mainContent {
}
.buttonStyle {
}
</style>

I am not going to go into detail on what the individual style properties do, but the goal of this set of style changes was to make the button look a little more hip and modern.

Right now, you have a CSS class called buttonStyle defined. To apply that CSS class to an element, you need to modify that element's markup to reference it. In our case, the element is our button, so go to your button tag and add the class attribute with the value buttonStyle:

<button class="buttonStyle">click me</button>

Once you have done this, preview your current document in your browser and notice how your button looks:

[ want want want want ]

The buttonStyle has now been applied! Your example is now starting to look more and more like the example you saw presented earlier. There is still some more work left though. Your example doesn't do anything when you interact with it.

Onwards to the next page!


1 \| 2 \| 3

Check out Kirupa's new book about animation using html, css, and javascript!

SUPPORTERS: