How to Create Your First Cascading Style Sheet (CSS)




by Tammy


So, you’ve heard about all the great things you can do with Cascading Style Sheets, but you’re not sure how to get started?  Then you have come to the right place.  Below are a few basic instructions to help beginning CSS students create your very first stylesheet.

Step 1: Style Sheet Heading (Optional)

Adding a heading for your style sheet is completely optional.  It won’t hinder the CSS functionality in the least if you’d rather not include it, but it can be a great way to let others know the style sheet’s author, website, and/or copyright.  To get started, open Wordpad or Notepad (or TextEdit for Mac users) and type something like the following between the /* and */ brackets. You can also copy and paste this into your Wordpad as well, then change it to your own site and author information. Anything can be included or excluded, such as the description, website tags (WordPress reads these from the style sheet), or version number. Remember to add the brackets, as this separates extra things you want to write on the style sheet from the actual coding.

/*
Theme Name: Sample Style Sheet
Web Location: http://www.yourwebsite.com/
Description: Theme designed for use on [name of your website].
Version: 1.0
Author: Web Designer’s Name
Author URL: http://www.yourdesignwebsite.com/
Tags: website, css, style sheet, html, design
*/

Body Tags

It used to be that we had to write a long string of body tags on every single website page, but not anymore. Now we can simply type <BODY> within HTML brackets, then link to our style sheet (see Step 5 for linking the style sheet and website) for the details. Even better, if we later decide we don’t like those colors, we can simply change the codes in CSS, and the whole website will change.

Copy and paste these codes into your new style sheet, below the heading in Step 1 (or at the very top if you chose to skip Step 1), and change to your preference.

body {
font-family: tahoma,arial,helvetica,sans-serif;
font-size: 10px;
color: #FFFFFF;
margin: 0;
padding: 0;
background-color: #000000;
}

Links

You can use your style sheet to have many different hyperlink colors throughout your website, but to keep with only the basics for this article, your main link color can be applied very easily. All you have to do to add the default color is copy these codes to your style sheet and change the colors and text decoration options (none or underline) as you like.

A:link {
COLOR: #808080;
text-decoration: none;
}

A:visited {
COLOR: #808080;
text-decoration: none;
}

A:hover {
COLOR: #FFFFFF;
text-decoration: underline;
}

Wrap Your Page

Wrapping your page is similar to putting everything in a table using HTML. Rather than having your width to fit the screen, you can set it to whatever you would like. Copy and paste the following into your style sheet and play around with the codes until you find the look you’re wanting. This article assumes you’re familiar with HTML, so many of these, such as font size and weight, should be easy to figure out.

#wrapper1 {
width:600px;
height:600px;
float: center;
font-size:18px;
font-weight:bold;
color:#000000;
text-align: center;
background-color: #D5D5D5;
margin:0px auto;
border:1px solid #FFFFFF;
border-top: 0px solid #000000;
padding:10px;
}

Link it to your home page by adding div codes (see below) in your .html file wherever you want the wrapper to show.

<div id="wrapper1">
Sample Website
</div>

Your entire website could go between these two div codes, and you could even add another wrapper inside of this one, but whatever your preference, always be sure to include the closing /div code each time one is opened.

Save, Link, and Upload

Save your new CSS file as style.css or something similar, as long as you end it with the .css extension, then link to your website by adding the following code in HTML brackets (see Step 5 image) anywhere between head and /head with your meta tags:

<link rel=”stylesheet” type=”text/css” href=”http://www.yourwebsite.com/style.css” />

Upload the style sheet and your updated website page(s), preview, and you’re done!

How does it feel to have created your very first style sheet? You’ve done a great job so far, but don’t stop here. There are many more fun things you can try with CSS. You may not think so right now, but once you become more familiar with it, you will wonder how you ever got along without it.