Hrvatski

printer friendly version

Formatting documents with CSS

This tutorial will help you get to know Cascading Style Sheets - the best way to clean up your HTML code and make a single file handle all your visual formatting.

What is CSS?

Cascading Style Sheet is a set of formatting rules you add to HTML tags. This set of rules makes control over HTML easier and better, and assures that all our documents look equal. So, coding CSS isn't hard, and today it's the best and most widely used tool - I think these reasons are enough four you to keep reading.

How to add the CSS to existing HTML pages?

You can do that in three ways. The first one, and I sure don't recommend that method (but I must mention it), is to add it directly to the tag you want to format. For example, a paragraph:

<p style="margin: 0px; padding:2px; font-family: verdana, sans-serif; font-size: 12px">YOUR TEXT HERE</p>

Use that method only when you need to add style to a single element that does not repeat on the page.

The second one is to implement CSS code within your HTML document, in the head tag, which I also don't recommend, except if you're using this formatting on that document only. The reason I don't recommend it is that if you wish to change something, you will have to do that for each file. The code has to be copied somewhere into your head tag, and looks like this:

<style type="text/css">
	<!-- PUT YOUR CSS HERE -->

	<!-- END CSS -->
</style>

The third, and the best way is to create an external CSS file (with the extension .css), to which you will link all your HTML documents you want to format using that sheet. Except saving your effort when building your webpage (changing font for every paragraph, checking, copy-paste into other documents, checking, changing your mind over single font color and there you go formatting each document over again...), your HTML code will be optimized - result is faster webpage loading, less bugs, and more free time for you. While the page is loading, it calls the linked CSS file and selects all the relevant atributes for that page.
I wrote this tutorial assuming that you will use the external CSS file. This is how you link an external sheet to your HTML document:

<link href="style.css" rel="Stylesheet" type="text/css">

Sounds too good to be true...

Offcourse, nothing is perfect - older browsers do not support CSS, which means whatever you did with your page, the person using old software will see only regular HTML. But, the amount of users using old browsers is getting smaller every day, so that's not something you should really worry about.
The second problem is that different browsers tend to render some CSS code in a different way - if you want to find out more about standards, check the W3C, you should get all the relevant information there.

Where to start?

Start by making HTML document in which you won't define any font tags and background attributes - make the clearest possible code. A few images and a few paragraphs of text. Add some headings, too. Don't worry about your page looking ugly ^_~
After saving your page, open it in your browser just to check out what it looks like.
You don't need anything special to write the code - I recommend writing it in Notepad or other simple text editor, even if you have a "WYSIWYG" editor.

What does CSS code look like?

You can see the definition of basic body attributes in the textbox below - background, margins and text.

body {
	background-color: #CCCCCC;
	background: url(images/bg.jpg);
	font-family: Arial;
	font-size: 12px;
	line-height: 20px;
	color: #000000;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding:0px;
}

First we have the word body which marks what do the attributes in the brackets refer to (it's insignificant wether you write with capital or small letters). Between the brackets {} we have the attributes lined up - a word that defines the attribute (i.e. background-color), followed by a colon. After the colon we write what we choose to be the format. Colors can be written in words, or hex codes. If you want to link an external file i.e. background, you have to write url(folder/filename.ext) to include it. In the end, put a semi-colon that marks the end of the line. After we've finished with the attributes, we close the bracket and go on to the next tag.

I copied the above code, now what?

First, change the color and number values the way you want them, and the filenames offcourse. Save your file under the name style.css or stylesheet.css or yourpagestyle.css - whatever you want to, just make sure the extension is .css. Save it in the folder where you keep your HTML pages. When you're done with that, look at the above code where I explained linking to external file, copy it to your HTML file and replace the style.css with the real filename.

Save the webpage and open it in your browser. Voila!

Formatting headings and paragraphs

In this example we'll add attributes for h1 and p tag to our CSS file. If you need more different headings, add as many as you want. You can use this as a model to make everything else.

h1 {
	font-family: Arial;
	font-size: 14px;
	font-weight: bold;
	color: #000066;
	background-color: #FFFFFF;
	padding-left: 5px;
	padding-right: 5px;
	text-align: center;
}
p {
	font-family: Arial;
	font-size: 12px;
	color: #000000;
	background-color: #CCCCCC;
	text-align: justify;
	padding-left: 5px;
	padding-right: 5px;
}

Change the color scheme as you like, save the file and check your HTML page in a browser :)

Removing underline from links

You need to define style for a tags in your file. You can format all the a tags together, or seperately for link, visited, hover and active. Changing color is the simplest effect. If you set text-decoration to none, links won't be underlined. Note that you can format more than one tag in the same row (like i did for a:link and a:visited) if you want the formatting to be the same.

a:link, a:visited {
	color: #666666;
	text-decoration: none;
}
a:hover {
	background-color: #000066;
	color: #FFFFFF;
	text-decoration: none;
}

Table formatting

You can determine the size, padding, background, text align... This example has a 100% width and the text is aligned left, except table header th which is centered. You get the rest, I hope ;)

table {
	height: 100%;
	width: 100%;
	background: url(back.jpg);
	background-color: #CCCCCC;
	padding: 5px;
	border: 0px;
}
td {
	font-family: Arial;
	font-size: 12px;
	line-height: 24px;
	color: #000000;
	text-align: left;
	vertical-align: top;
}
th {
	font-family: Arial;
	font-size: 12px;
	line-height: 24px;
	font-weight: bold;
	color: #000000;
	text-align: center;
}

How to remove the borders from all images?

By setting the image border to zero, like this:

img {border: none;}

This should've helped you understand how CSS works. See other tutorials to learn more :)


Share this tutorial with your friends!





My new book is out!

The Human Centered Brand by Nela Dunato


Branding & web design by Nela Dunato

Facebook