Introduction to CSS 101

Cascading Style Sheets are deep and complex, using simple as a disguise.

I’ve been working with and around CSS and it’s brother from another mother HTML for the last ten years. When I started out, the web standards movement was ramping up, we were moving towards something very cool, and I was all over it. I’d fallen in love with HTML at first sight, and CSS was a natural companion and friend from the start. Back then, everyone was talking about these two and how we could do that and this and that.

Cut to now. Not so much, less folks talking about the basics and more and more they are talking about the complex and the cutting edge.

Everyone has to start somewhere, and when all they have to start with is hardcore, cutting edge “tutorials” and “techniques” without any base knowledge or core understanding of the tools, they are going to be at a loss for creating the absolute best work they can.

I think, this is where I come in. Try and give back a little to the community and the industry I love so dearly.

So today I want to cover some real simple basics of getting started with CSS and over a series of upcoming articles I will discuss more basic stuff, and I will even take a few advanced techniques and tips and strip them down to easy to understand basics principles. Let’s get started, shall we?

First things first

CSS is short for Cascading Style Sheet, I told you I’m starting out really basic.

CSS is a client side presentational language, it creates a visual reusable presentation for your HTML pages. 

To create a CSS document, just open a new file in the editor of choice, save it as “whatever_you_want.css”. Inside that document, there is no special code to wrap around the whole thing, we are just going to start writing code.

CSS uses the following syntax when writing rules.

element{ property: value; }

or real world example as follows

p{ background-color: #FFFFFF; }

Some guidelines for writing

When writing CSS, it is always important to keep in mind that, while this is a computer language that will be interpreted by a computer for output, it is also human-made and must be maintained and easily read by a human.

Ways I keep my CSS neat, and legible.

1. Alphabetize all properties, within their rules
2. Use one line for rules that have two properties or less
3. Use multiple lines for rules with more than two properties
4. Organize overall sheet with top down style
5. Indent child rules
6. Maintain a color glossary
7. Maintain a table of contents

Here is an example of a multiple property CSS rule from this site. As you can see I have all properties alphabetized, and on their own lines. This allows me to quickly find properties that need editing and also helps me quickly scan the current ruleset for syntax errors, a missing semi-colon can be hours of fun.

#submenu{
	background: transparent url(img/menu/submenu.gif) no-repeat 0 0;
	height: 118px;
	padding: 10px 15px;
	position: absolute;
	right: 0;
	top: 123px;
	width: 580px;
}

Here is an example of a single property CSS rule from this site.

.right{ float: right; }

And here is an example of an indented rule group from this site. I’m applying several properties to three different rules, then I am using the cascade to overwrite the relevant properties as required by my design.

img.left,
img.right,
img.center{
	background-color: #000000;
	margin: 3px 10px 5px;
	padding: 10px;
}

	img.left{ margin-left: 0; }
	img.right{ margin-right: 0; }
	img.center{ margin: 20px auto; }

How to apply your CSS

Applying your CSS to your HTML document is quite simple, and there are two methods, which one you choose depends on the project.

<link href="/css/whatever_you_want.css" type="text/css" title="default">

The meta link method is good for larger projects, it allows you to reference and external file, with all of your CSS rules for the HTML you are calling it into, as well as allowing you to have all your CSS in one file as opposed to the below method which puts it in every file.

<style type="text/css" media="screen">
	your css…
</style>

The style tag allows you to place your CSS directly into the HTML page where it is being used. I would recommend this method only for single page projects, where the style sheet is fairly short and only needed once.

Wrapping up

Well I think that is enough to get started with, I’ll be back next week with “Having Class, and Identities”.