SiteGround Tutorials

CSS Basics Tutorial

The purpose of this tutorial is to show you how to use Cascading Style Sheets (CSS) to improve the design and functionality of your website.

CSS files are a powerful tool used by almost all web designers nowadays. Once implemented in your pages, a css file can save you a lot of time and work in the future. After reading this tutorial, you will have basic knowledge of how to structure and implement CSS files into your website.

This tutorial contains:

The idea behind CSS
Check this part of the tutorial for a simple explanation what CSS is used for.
The syntax of a CSS file
You will find the basics of the CSS syntax explained in this section of the tutorial.
Sample HTML and CSS files
Here we will show you a very basic page and the CSS file that it uses.
CSS FAQ
In this part of the tutorial you will find the most frequently asked questions and issues that require changes in the CSS file of a website.

The Idea Behind CSS

Cascading Style Sheets (CSS) is a stylesheet language used for managing the look and formatting of a website.

The idea behind CSS is to separate the content of a website from its design. It includes elements like layouts, fonts and colors. This separation will save you a lot of time when you need to change the outlook of your website and keep the existing content. Once the CSS file is included in your pages, you will no longer have to edit the design of each new element you add to your pages - the CSS will take care of that.

CSS makes it easier to allow different people with no web design knowledge to add content to your website. Popular CMS systems like Joomla, Drupal or WordPress wouldn't be the same without CSS.

The CSS files provide you with a lot of flexibility. Imagine that after you add all of your content, you want to change the color of your text or its font. If you use a CSS file, you will have to change only a single line. If the styling of your elements is added directly to the HTML code, you would have to make hundreds and even thousands changes. CSS allows you to make global changes as well as unique modifications to single parts of your website.

In addition, CSS files save you bandwidth and reduce the loading time of your website. If you specify the looks of each element in your website directly, without using a CSS file, you will have to add much more tags to your code which will make the file much bigger and heavier to process.

The syntax of a CSS file

The syntax of a CSS file consists of three parts: selector, property and a value:

selector {property: value}

The selector is usually a HTML element(tag) that you want to define. For example, you can specify in your CSS file:

body {text-align: center}

This line will state that the entire text in the <body> tag will be centered. Since CSS lines cascade, however, you can specify:

p {text-align: left}

in order to make the text surrounded by paragraph (<p>) tags aligned to the left.

If you want to specify the same parameters for multiple tags, you can simply group them:

p,h1,h2,h3 {color: red}

If you set this line, all the text in those tags will be in red.

This, however, is a very basic example of the freedom and power that CSS gives you. Usually much more than one parameter is set to each tag. To make your definitions easier to read and follow, you can write each property on a separate line:

p
{
text-align: center;
color: red;
font-family: arial;
}

Those lines will define the alignment, color and the font of the text in each one of your paragraphs.

In the creation process of your website, you may want to have multiple styles for each tag. For example, you may want to have a paragraph that is aligned to the left and colored in red and another one that is aligned to the right and colored in blue. To achieve this result, you need to use classes. For example, you can define two classes named "my_left" and "my_right":

.my_left
{
text-align: left;
color: red;
}
.my_right
{
text-align: right;
color: blue;
}

Once you have done that, in your HTML code you can specify the class property of the items that you want to be formated this way. For the purpouses of this tutorial we will display two paragraphs:

<p class="my_left"> This paragraph will be left-aligned with red color in it. </p>

<p class="my_right"> This paragraph will be right-aligned with blue text in it. </p>

In some cases, however, this level of customization will not be enough. Let's say you would like to have one of your left-aligned paragraphs to use the Arial font. In this case, you can specify an "id selector" in your CSS file:

#arial {font-family: arial}

You should then define the HTML tag in your code as follows:

<p class="my_left" id="arial"> This text will be left-aligned with red text displayed with Arial font </p>

Those are only the very basics of CSS that you need to know in order to be able to make simple modifications to your website. CSS gives you great freedom to create the design you want. Actually, each design effect can be achieved in many different ways. It depends on you to organize and develop your website in a way that will best serve your needs.

Sample HTML and CSS files

Here we will show you a very basic page and the CSS file that it uses.

First we will use the following HTML code in order to make a simple page with a heading, table and a paragraph of text:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Page</title>
</head>

<body>
<h1>Heading title of our sample page </h1>
<table border="1">
<tr>
    <td><strong>Sample column</strong></td>
    <td><strong>Sample column</strong></td>
    <td><strong>Sample column</strong></td>
</tr>
<tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </td>
</tr>
</table>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</body>
</html>

At this point, your page has no CSS file included and should look like this:

Now, let's add some styling to the page. First, add the following line between the <head> and </head> tags in your HTML file:

<link rel="stylesheet" href="sample.css" type="text/css" />

It will tell the browser to load a sample.css file from the same folder your HTML resides in.

Next you should create the sample.css file (a simple text editor will do just fine) and add the following lines to it:

body {
    font-family: arial;
    }
h1 {
    background-color:#CCC;
    border: 1px solid;
    color:#39F;
    text-align: center;
    }

table {
    background-color: #F60;
    border: 1px solid #39F;
    width: 100%;
    }
td {
    border: 0px;
    text-align: center;
    }
p {
    color:#09F;
    text-indent: 20px;
    }

In it, we have defined the elements of our sample page. As you can see, after each element we have set different properties. Now save the sample.css file and load your HTML page in a browser. It should look like this:

You can play with the colors, borders and all the other settings in order to get used to working with CSS files. They provide you with the power to create the design you want and the only limit is your imagination!

Frequently asked questions

We have encountered many different requests and questions through the years. In this page we will post the most frequently asked questions that will require changes in the CSS file of a website.

Question: How to change the width of my Joomla 1.5 website?
Answer: To change the width of your website you should first check which class in the CSS file defines the width of your page. To do that, you have to see the HTML output of your website. With Firefox you can do that by clicking on the View -> Page Source menu and in Internet Explorer, from the View -> Source menu. Let's take a look at one of the free templates SiteGround provides - Aqua Blue. To change the overall width, you will need to modify the class for the outermost element. From the HTML output of the page, you can see that you should modify the style of a <div> element of class "wrapper". In the css/template.css file of the template you will find the following lines (since the file is quite big, it is a good idea to use the search function of your text editor):

div#wrapper {
margin-left: auto;
margin-right: auto;
width:980px; }

As you can see, you should change the value of the width property of the "wrapper" class. By modifying this value you will be able to change the width of your site.

Question: How to add a border to my Joomla 1.5 website?
Answer: You should bear in mind that different templates have different set of CSS classes. Even the .css files may vary. By viewing the HTML output of your website, however, you can easily see which class you should edit in order to make the desired change. In our example - the Aqua Blue template, we should add the following line to the div#wrapper class:

border: 1px solid #000000;

This will add a 1 pixel wide black border to your website. You can use different colors for it or to frame different parts of your website using the border property.

Question: How to change the background color of my website?
Answer: To change the background color of your website, you can search for the "background-color" property for the appropriate CSS class. Then you can modify its value to the desired color. If the background color is not set yet, you can add the following line to your CSS file:

body {background-color: silver}

You can change "silver" to the HTML code of the desired color. For additional information on that matter, you can check these tutorials.

You can always submit new questions using the "Feedback" button at the top of this page.