Cascading Style Sheets (CSS)…it sounds complicated, but it is simple, yet powerful. With a few lines you can transform a plain black-on-white web page into nice looking layout.

For those who aren’t familiar with the term, CSS is a language used to style your HTML by making declarations for various selectors. A selector may be a class, an id, or a predefined HTML element such as p, a, h1, div. Classes and ids are similar, but an id should only be used once throughout the page while a class can be used many times. Classes and ids are used to specify an HTML element within your code.

Let’s take a look at some HTML using a class and an id…

<p>This is a standard paragraph block</p>
<p class="some-class">This paragraph is using a custom class</p>
<p id="some-id">And this one is using an id</p>

Now that we’ve got our HTML we can style it using CSS. First I am going to set all paragraph elements to have 12pt and red text. Then I will change the background color of any elements using the some-class. And finally I will add both margin and padding to the element with the id of some-id. This code will go inside of <style> tags in your head section or in a separate .css file.

/* an HTML element */
p {
	color: red;
	font-size: 12pt;
	}

/* a custom class */
.some-class {
	background: blue;
	}

/* a custom id */
#some-id {
	margin: 10px;
	padding: 5px;
	}

The results should look something like this…

This is a standard paragraph block

This paragraph is using a custom class

And this one is using an id

Next time we will go deeper into CSS and learn some intermediate tips and tricks to help stylize your content. If you have any questions be sure to leave a comment or email me and I will try to cover it in my upcoming tutorials.