CSS: A Beginner’s Guide

So you want to know what CSS is aye?

CSS stands for Cascading Stylesheet - it is basically the language which makes all of your websites look nice and pretty. To put it simply, if we didn’t have CSS, every website today would go back to looking like this.

Hahah. Seriously now. CSS is incredibly versatile - you can even make purely CSS layouts if you wanted to - check out csszengarden for some AWESOME inspirational ideas!!.

CSS can be incorporated into a single html page or used as an external stylesheet. For most purposes, using an external stylesheet is ideal as it saves you a LOT of work when reupdating your website’s theme/layout. All stylesheets end with a .css and they are often linked of every page of a website(this of course can differ depending on the nature of your website). If you want to change your entire website’s formatting and color scheme in one go, all you need to do is edit that one CSS file and ka-boom your whole layout is up to date!!

Using CSS on your Website

There are 3 main ways to use CSS on a website - that is with a linked stylesheet, a list of styles in the header tags, or custom CSS incorporated into individual elements.

To link an external stylesheet to a page:

<LINK REL=stylesheet HREF="http://www.yoursite.com/style.css" TYPE="text/css">

To include styles on a single page:

<style type="text/css">
<!--
body {color:#222}
div {position:relative;
top:0}

etc. etc.
-->
</style>

To incorporate CSS into a single element on a page:

<img src=”http://yoursite.com/image.jpg style=”border:none”> or
<div id=”main” style=”overflow:auto;width:100;height:100″> or
<table id=”content” style=”border:1px #000 solid; width:50%”>…..</table>

As you can see you can incorporate a lot of little style tags into most elements of a layout.The different options for using CSS on a page are really up to personal preference, but the linked stylesheet is always the easiest option - especially if you want to easily change and customize your layout.

CSS styles in between the header tags override linked CSS stylesheets though - and similarly, elements with CSS attached has top priority when being translated by the browser.

Note: Linked stylesheets AND separate style rules should always be in between the <head> tags of your page.

Writing a stylesheet

If you want to write an external stylesheet, you really only need a simple editor such as notepad or textedit. Stylesheets do NOT need an opening or closing tag (<style type=”text/css”>) as in custom CSS on one singular page. All a stylesheet consists of is the element tags and their formatting. eg:


body {
background-color: #d6b76f;
color: #5f5530;
font: 11px "Lucida Grande", Lucida, Verdana, sans-serif;
letter-spacing: 1px;
background-image: url(images/bg.png);

}

#content {
width: 398px;
height: 203px;
overflow:auto;
padding-right: 3px;
}

#main {
background-image: url(top.png);
background-repeat: no-repeat;
margin: 0 auto;
}

a:link, a:active, a:visited       {
border-bottom:1px solid #000000; color: #795616; cursor: crosshair; font-size: 12px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif; letter-spacing: 0;border: none;
text-transform: uppercase;border:none;text-decoration: none;

}

a:hover      {

color: #d4915a; cursor: crosshair;
font: bold 12px Georgia, "Times New Roman", Times, serif;
text-decoration: none;
}

Notice how each tag is separated from each other. They all also have curly brackets surrounding its individual formatting to define its style from the rest of the elements. These curly brackets are essential - if one is left out it renders the CSS below it useless.

Each property is followed by a colon, then its variant - :. eg. color: #222. Each different element is separated by a semicolon - ;. These are also important if you want your stylesheet to work.

Text Comments

If you want to include text comments inside your stylesheet, you must write it between a forward slash and an asterix like so:

/* Copyright Jakki 2008 */

This avoids any confusion and interference with the element tags. You can include comments anywhere within the stylesheet though - as long as it is NOT inside an element tag:

YES

/* Copyright Jakki 2008 */

body {
background-color: #d6b76f;
color: #5f5530;

}

NO

body {
background-color: #d6b76f;
color: #5f5530;
/* Copyright Jakki 2008 */

}

Grouping tags together

Grouping tags can come in extremely handy especially for long amounts of CSS. Grouping tags involves the grouping together of normally similar or related tags for easy reference. Grouping is not at all necesssary but it definitely does make your CSS neater and more readable and referencable!!!

To group certain elements, simply type:

/* @group groupname */

eg.

/* @group Linkage */

a:link, a:active, a:visited       {
border-bottom:1px solid #000000; color: #795616; cursor: crosshair; font-size: 12px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif; letter-spacing: 0;border: none;
text-transform: uppercase;border:none;text-decoration: none;

}

a:hover      {

color: #d4915a; cursor: crosshair;
font: bold 12px Georgia, "Times New Roman", Times, serif;
text-decoration: none;
}

/* @end */

Grouping Elements

CSS also makes it possible to group certain elements together when writing CSS. For example:


h1, h2, h3, p, pre, blockquote, form, fieldset, ul, ol {
margin: 1em 0;
list-style-position: inside;
}

This is useful if you want to group elements together which have the same styles and properties!

Well that’s about all for writing a CSS stylesheet. You can use the above rules for also writing an individual style on a single html page. CSS is overall a very easy language to get used to, and learn - once you figure it all out, CSS can become your best friend in web design