How to Create a CSS Stylesheet

Posted on Dec.29, 2009No Comments HTML, How To

Although simple, this is a question I’ve been asked numerous times by learner developers. This “tutorial” assumes you have also never created a html and css webpage before because the two facets are so closely linked.

About

Firstly, you need to understand what CSS is. CSS stands for Cascading StyleSheet and it is the key element of web development. CSS is used to tell a webpage how you want it to look. It can be used to define id’s, classes, and other html elements.

You can load a stylesheet in html using this code:

<link rel=”stylesheet” type=”text/css” href=”yourstyle.css”/>

Example

Now, an example. Create a new file in notepad or a similar text editor and save it as style.css to a folder on your computer. Repeat this and create another file called index.html and save it to the same folder as your style.css file. Open your index.html in a text editor and add this code:

<html>

<head>

<title>My First Webpage</title>

<link rel=”stylesheet” type=”text/css” href=”style.css”/>

</head>

<body>

<div class=”mybox”>Sample Text</div>

</body>

</html>

As you can see, we have added a <div> element with a class of “mybox”. Now, open your style.css and add the div class by typing this code.

.mybox {

width: 100px ;

height: 100px;

background-color: #000000 ;

}

Save your style.css and index.html.

Explanation

What you have just done is told the “mybox” class to be 100 pixels high by 100 pixels wide with a background color of black (which is the same as #000000). Double click index.html and it will open in your default web browser. See your black box? Pretty cool, hu?

There are hundreds of ways and commands you can use in CSS so I’d recommend reading more about CSS at W3Schools. Have fun!

Want an image next to your name? Sign up at Gravatar.com and in a few seconds you will be on your way. If you are signed up on Gravatar, enter the email associated with your Gravatar account when commenting.