Using CSS for Better Design

This is an introductunary article for people who are new to CSS. Basic HTML knowledge is required.

Introduction

CSS is a fundamental web design element. It is a markup language just like html, but unlike html it is not representing a document but a document's style. Back in the day developers used to define element styles in the html itself, just like this:

<b><font size="3" color="red">This is some text!</font></b>

Nowadays instead of doing this we could use CSS and write something like this:

<span class="myclass">This is some text!</span>

The class attribute defines the css class that the element uses and myclass is the actual class defined in css. That way we separate the style form the presentation, so when we change the css the html will not have to be changed as well.

CSS Syntax

The CSS syntax is made up of three parts: a selector, a property and a value, the combination of the three is called a style rule:

selector {property: value}

The selector is normally the HTML element or class you wish to define, the property is the attribute you wish to change, each property must have a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color: black}

If the value contains multiple words it is recommended that you put quotes around it:

p {font-family: "sans serif"}

If you wish to specify more than one property, you must separate each property with a semicolon.

p {text-align:center;color:red}

You could also make definitions more readable by setting one property per line:

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

CSS Selectors

These are the different css selectors:

Classes

This selectors define a custom class that can be applied to a html element trough the class attribute. A class name should begin with a dot:

.myclass {color: blue}

To use the class the class attribute has to be added:

<p class="myclass">Some text</p>

Elements

Element selectors define the style that a specific html element should have:

body {color: black}

Id's

Id's  are just like classes, there are only  few differences. Unlike classes id's use the id attribute instead of class. There can not be elements with duplicate id's where by classes this is allowed. An id selector should begin with a # symbol:

#myid {color: blue}

To use the id just add the id attribute:

<p id="myid">Some text</p>

Advanced Selectors

These selectors can be used to select an element, class or id inside a class, element or id, just like this:

.myclass a {color: red}

The above statement makes all a elements inside an element with class set to myclass have red color. The same can be done the other way around:

a .myclass {color: red}

Here is another combination:

.myclass .myclass2 {color: red}

The above selector applies to all elements with class set to myclass2 within an element that has its class set to myclass

Pseudo Classes

Pseudo classes are selectors are used to define special style and functionality to tags:

a:link {color: #FF0000;} /* changes the color of an unvisited link */ a:visited {color: #00FF00;} /* changes the color of an visited link */ a:hover {color: #FF00FF;} /* changes the color when the mouse over event occurs */ a:active {color: #0000FF;} /* changes the color of a selected link */

Pseudo Elements

Pseudo elements are used to define a style to a specific part of an element like the first letter of an p element:

p:first-letter {color: red;}

There are many other pseudo elements but they are beyond the scope of this article.

CSS Properties

Here is a list of some of the most commonly used css properties:

• color - sets the color of an element
• font-size - sets the font size of an element
• font-family - sets the font of an element
• font-weight - sets the font size of an an element
• background-color - sets the background color of an element
• background-image - sets the background of an element
• width - sets the width of an element
• height - sets the height of an element

Note that this is just a very small fraction of all the css properties.

Putting it All Together

Now since you know the basic css syntax and structure you can see it in action. You can either write your css directly  into the html file, directly into the html elements or make a css file.

Creating a CSS file

A css file is a simple text file which contains style rules, it is very simple to put one together, here is an example of an css file's contents:

.myclass {myproperty: myvalue; mypropery2: myvalue2;} myelement {myproperty:myvalue; mypropery2: myvalue2;} myelement2 {myproperty: myvalue; mypropery2: myvalue2;}

Basically a css file is a collection of style rules and nothing else, after you have created your file you just have to embed it.

Embedding a CSS file

To embed a CSS file add the following tag inside the head tag:

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

Writing CSS directly to a  html document

To embed a directly to a  html document add the following tag inside the head tag:

<style type="text/css">.myclass {myproperty: myvalue; mypropery2: myvalue2;}</style>

Writing CSS directly to an element

You can also embed the css directly to a html element, however this is not good designing practice.

<element style="myproperty: myvalue; mypropery2: myvalue2;">This is some text!</element>