First Steps With CSS

First Steps With CSS

The first couple posts on this topic have gone over a basic introduction to the history behind CSS as well as what it can do for web design. Today we’re going to discuss how to actually start writing the code itself. Before you can start to write code you need an application that can interpret it. There are many of these types of applications out there such as Adobe Dreamweaver or even notepad. Many web designers got started with notepad when they first starting coding. This is a good free solution if your on a budget.

Now to get things started. First off, if you’re not sure how CSS implements with HTML keep checking back that is going to be our next series. To start off with you need to create a.css file. This is extremely simple and just requires you to save the file with the.css extension. If you choose to use notepad (which I’ll be using for this post) you’ll need to have a little bit deeper of an understanding of how code is structured. So strap in because here we go.

The first step in creating a css document is to state the type of encoding you will be using (there are a few different types, all of which can be found here). Generally most CSS3 sheets will start like this:

@charset “utf-8”;

It is always a good idea to declare the type of encoding that an external style sheet is using. Especially if you have any non-ASCII characters. Your declaration must be the very first line in the style sheet. It can not be preceded by anything including comments. Once this is stated you can move on to the actual meat of your style sheet. Many designers will start their style sheets with a multi-line comment with their name, company, or other pertinent information. There are various ways to comment your code but I’ll just be going over the 2 that I use the most. The first way is a multi-line comment which is defined by

/* Your text here */

The brackets (/* and */) denote that this comment covers multiple lines. The opening tag (/*) obviously gets used before the first character of your comment and the closing tag (*/) is used after the last character of your comment. So a multi-line comment would ultimately look like this:

/* Author: Josh Pierce

Site: website address

CSS Document */

Some designers like to make their comments look a little neater by using asterisks to creat a block around the entire comment. This would look like:


* Author: Josh Pierce *

* Site: website address *

* CSS Document *

* *


This is not a required thing but some designers will do it just to keep their style sheets looking neat. After your opening comment (if you choose to have one) you start the declaration of the various elements of your page. I personally like to creat my style sheets as I’m coding the page itself. This way I can design each element as I’m creating it. This is just personal preference however.

The first thing many designers start off with is declaring the header of the page. This is done by one of two methods. These two methods are either a period (“.”) or a pound (“#”). To declare your header you simply write the following:

.header {

background-color: #FFFFFF;

width: 100%;

Border-bottom-style: solid;

border-bottom-width: 2px;

border-color: #000000;

margin-bottom: 0px;


Ok, so this looks like a bunch of gibberish right? Let’s go through this one line at a time. To begin with the tag:

background-color: #FFFFFF;

This piece of code simply tells the browser that the background color of the header is the color white (#FFFFFF denotes the color white in hex). The semi-colon at the end of the line tells the browser that it’s the end of that particular line. However, everything inside the brackets ({ and }) are read as a single statement (it’s all the header). The next line tells the browser how wide to make the header. In this case we used what’s called relative positioning. Since there are so many different size monitors out there nowadays we never know what resolution someone is using. By using relative positioning we can tell the browser the size of something as a percentage. In the case of the above code, we told the browser that we wanted the header to be 100% of the width of the monitor. The following line states: border-bottom-style: solid; This simply tells the browser that the header has a solid border on the bottom. There are a number of various border styles that modern browsers can render. The 4th line tells the browser how wide the border is. The statement:

Border-bottom-width: 2px;

simply tells the browser that the border on the header is 2 pixels wide. we can adjust the color of the border itself by adding the code border-color: #000000; This code changes the color of the border to black. The last piece of code that I used in the above statement was:

margin-bottom: 0px;

This statement just tells the browser that there is a 0 pixel margin on the bottom of the header. There are variations of this code that will allow you to make each side of the header a different color or size. If you just use the statement margin: 0px;the browser will simply put a 0 pixel margin on all 4 sides of your header.

That is all for this look into the first steps with CSS. Make sure you subscribe and check back often as this series will be updated regularly.

Source by Joshua Pierce

Leave a Reply

Your email address will not be published.