Breadcrumbs

CSS Basics

What is CSS?

CSS is the style of the web, providing another way to display HTML. CSS, standing for Cascading Style Sheets, is a powerful styling method and easy to learn. CSS replaces display attributes for HTML tags such as bgcolor, width, and height.

CSS is either stored externally or within <style> tags. <style> tags are placed in the <head> tags of an HTML document:

Code: XHTML

<style type="text/css">
    
</style>

External style sheets keep the code neater and are stored in .css extensions. External style sheets are linked to using the <link> tag, like the <style> tag, <link> tags are placed in the header:

Code: XHTML

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

Why use External?

External style sheets are good when you are applying the CSS to multiple pages, so you preserve storage space. Personally I prefer external style sheets as it makes the base page contain less coding, keeping your pages more organized.

Id and Classes

When using CSS you have ids and classes. When you assign a tag an id/class you can further specify the attributes on that item in the CSS. For example here are two table cell tags (<td>) assigned an id and class:

Code: XHTML

<td class="table-cell"></td>
<td id="header"></td>

Now in the CSS you use the id operator (#) for ids and the class operator (.) for classes. So for the HTML above we could use:

Code: CSS

.table-cell {
    
}
#header {
    
}

Note the proper labeling and use of operators in the CSS code above. The difference between a class and id is that and id can be assigned to more than one object. So this is valid:

Code: XHTML

<td class="table-cell"></td>
<td class="table-cel"></td>

An id can only be assigned to one object. So this is not valid:

Code: XHTML

<td id="header"></td>
<td id="header"></td>

Ids are ideal for when you are making CSS layouts and you have attributes that are used for only one thing. Classes are good for table cell attributes you use all over.

Set Attributes for a Tag

You can also set attributes for an entire tag. This is done by not using an operator and placing the tag name. For example here is how we can apply attributes to all table cells:

Code: CSS

td {
    
}

CSS Syntax

Now that the HTML half is covered we move on to the CSS syntax. You start out with the operator (if for a tag there is none), then the class/id/tag name, then two curved braces ({}), and between those are the CSS properties:

Code: CSS

name {
    css properties
}

Here is an example of a piece of CSS code to take away the margins/padding (depends on your browser) in the body:

Code: CSS

body {
    margin: 0;
    padding: 0;
}

Note the ; after the CSS property value, don't forget this or the following CSS code won't work properly.

CSS Properties

A CSS property specifies and attribute for a particular element. There are many CSS properties to do anything from position the element to setting the colors of its borders. For more information on each property visit W3Schools.com (external link).

Applying Attributes to Multiple Elements

You can also apply the same properties to multiple elements. You do this by listing the appropriate operator and element name using a comma between each one.

Code: CSS

.cell, td, #header {
    
}

This applies the attributes in the curved braces to the cell class, td tag, and header id.

Summary

Now with a generic knowledge of CSS you only need knowledge of all the attributes and design technique before you are a master of CSS.