CSS For Absolute Beginners

Gordon — Thu, 12 Nov 2009 23:02:56 +0000

The Cascading Style Sheet language is the most commonly used language in web design and online application styling. No matter which language you choose as your programming platform, you will (or at least should) always end up combining it with CSS.

With CSS you can move around elements of your website, align them, overlap them, color them, resize them and many other interesting design tricks.

Being a long way from a CSS expert myself, I will try to explain the very core of CSS in a simple and intuitive way – in which I wish it was explained to me.

The Supervisor and the Worker

In the web design world, imagine that your website is a warehouse. You are the warehouse supervisor and CSS is the worker. In this relationship, the HTML code would have the function of all the boxes in your warehouse representing various web elements (such as header, footer, navigation, subscribe to e-mail box, twitter feed box, etc). You shout your instructions to your worker using CSS code.

The Bare Basics

To fully understand this post you should have a basic understanding of HTML. So let’s get started. The first line of code that you learn when you want to work with CSS is:

^?View Code HTML

This snippet of code (which you are supposed to put between the head tags of your website HTML file) tells the browser where to look for the style sheet. You don’t have to use the name styles.css although it’s the most common. If your CSS file is located in a sub-folder on the server, you can write the entire path.

You can experiment with this by opening a new folder on your desktop (or anywhere you want) and creating an index.html and styles.css files. The styles.css can be empty for now but you can copy the following code snippet into your html file:

^?View Code HTML






My website elements go here!

Now we have defined a basic HTML file. We have our opening html tag, the opening head tag, we have defined the browser window title of our website, we have told the browser where to look for the CSS style sheet, closed the head, wrote a simple line of text in the body and closed our html tags.

Telling your “Worker” which “Boxes” to move around

If we want to get the job done, we need to explain what we want to our employee. In other words, write some CSS code. Will our employee understand if we tell him to move the brown box and all boxes in the warehouse are brown? We have to find some sort of method to label the boxes so that our CSS script understands what to manipulate.

This labeling is done with div tags.

Remember how you heard someone telling you that table-layout website design using MS Front Page was old and nobody should use it anymore? The idea was that tables should be replaced by divs where each div had a unique ID. That way, you basically, labeled the boxes. Here is an example:

^?View Code HTML





 

My website elements go here!

Notice what I added between the body tag, in front and behind of the “My website elements go here!”? We’ve put the text located in the body of the website into a div with an ID of “text1″. A DIV is an invisible box which wraps around the content defined between it’s tags. This method will allow us to manipulate it from the CSS file. We gave our box a label for our employee to recognize it.

Now open your styles.css in a text editor and update it with:

^?View Code CSS

#text1 {
	background-color: green;
	font-size: 50px;
}

Here we have specified that we want to manipulate the text1 div box and assign it a green background color. Also we want all the text in that box to have a size of 50 pixels. Save your css file and refresh the web page in the browser. You should see the results.

Now lets try adding another empty div box to our websites HTML code:

^?View Code HTML





 

My website elements go here!

Also, let’s add some parameters for the box2 div in our css file:

^?View Code CSS

#text1 {
	background-color: green;
	font-size: 50px;
}
 
#box2 {
        width: 100px;
        height: 200px;
        background-color: green;
        border: 5px solid black;
}

You probably noticed how I gave our box2 div a defined width and height. This is because it is empty and if you didn’t specify its dimensions it would just be a flat line like a blown out balloon. We also gave the box a background color of green (you can also write #HEX color value instead of the actual name) and we defined the border property of 5 pixels, solid and a color of black. Refresh and observe the results. Try changing the “solid” value to “dashed” and see what happens.

Conclusion

Hopefully this brief tutorial was useful for you and helped you understand the very basics of CSS. This was of course just a small fragment of the vast usability that CSS possess.

If you wish to continue further development of your CSS skills, I recommend W3Schools CSS tutorial. As far as software goes, I would suggest Notepad++ as something you should have installed right after your OS.

Once you realize that it’s all about labeling boxes and moving them around, it just comes down to learning all the thousands of properties that exist in the language itself.

Here are some examples of properties which I use the most:

background-image
margins
padding
text-weight
height
width
float
text-align
vertical-align

At the bottom you can find the download link where you can get the index.html and the styles.css used in this post. Also stay tuned via Twitter, where I will be posting updates for the various web design video tutorials (for beginners) that will soon be published on the Knowledge Reactor website.

Finally, I would like to thank my good friend and great artist Marino Plecas for the forklift illustration!

DOWNLOAD

No related posts.

Knowledge Reactor's Blog » css

CSS For Absolute Beginners

The Supervisor and the Worker

The Bare Basics

Telling your “Worker” which “Boxes” to move around

Conclusion