Eazy HTML - So eazy it's Child's Play

Quick Menu

Intorducing CSS
CSS - Quick Tutorial
Linking A StyleSheet
CSS Reference
Back Grounds.
Lists
Cursors
Borders
Positioning
Scroll Bars
Layers
Float
Margins
Padding
Fonts
Text
Pseudo Elements

CSS - Tutorial

Style Sheets allow your style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of your HTML page, or linked in an external CSS file. You can also use inline styles. And you can even use multiple external Style Sheets that can be referenced inside a single HTML document.

CASCADING ORDER
What style will be used on my document when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by using the following rules, where number four has the highest priority:

Browser Default.
External Style Sheet.
Internal Style Sheet. (inside the <head> tag)
Inline Style. (inside the actual HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value).

Site Stats

There are 7 users online

click to see where

149,437 total unique visitors

486,648 total pageviews

63 visitors in the last 24 hours

61 total visitors today

210 pageviews today

This page has been visited 1,347 times

get this script

Most users online at once:
63 on 01/18/2010

A style sheet is made up of style rules that tell a browser how to present a document. There are various ways of linking these style rules to your HTML documents, but the simplest method for starting out is to use HTML's STYLE element. This element is placed in the document HEAD, and it contains the style rules for the page.

<html>
  <head>
   <title>Your Page Title</title>
    <style type="text/css">
     <!--
	 
     -->
    </style>
  </head>
  <body>

Note that while the STYLE element is a good method of experimenting with style sheets, it has disadvantages that should be considered before one uses this method in practice. A few of the disadvantages of using a internal style sheet is making your document size larger with all the style information encoded into the page, also if your web site has the same layout on every page the user has to download the same information every time a page is loaded.

This is what makes linking to an external style sheet so much more appealing. Each page you create links to the style sheet and is only needed to be downloaded once because it is cached into the users computer making download time faster.

SYNTAX OF STYLES
The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define the style to, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon and surrounded by curly braces and end with a semi-colon:

body {background-color: #000000;}

Multiple style declarations for a single selector may be separated by a semicolon as well:

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

But to make styles more readable your best to put one property on each line like this:

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

So the above style works on every <p>(paragraph) tag that is in your web document from top to bottom. But what if you only want it on one paragraph? Then what? Read Below...

CLASS SELECTORS
With the class selector you can define different styles for the same type of HTML element. Lets say that you wanted to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align: right;}
p.center {text-align: center;}

Now you have to use the class attribute in your HTML elements in your document:

<p class="right">
This paragraph will be right-aligned.
</p>

<p class="center">
This paragraph will be center-aligned.
</p>

Note: Only one class attribute can be specified per HTML element! The example below is wrong:

<p class="right" class="center">
  This is a paragraph
</p>

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:

.center {text-align: center;}

In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:

<h1 class="center">
  This heading will be center-aligned
</h1>
<p class="center">
  This paragraph will also be center-aligned.
</p>

GROUPING
You can also group selectors by separating each selector with a comma. In the example below we have grouped all the header elements. Each header element will be green and centered:

h1,h2,h3,h4,h5,h6 
{
color: green;
text-align: center;
}

CSS COMMENTS
You can insert comments in CSS to explain your code, which can help you when you edit the source code at a later date. A comment will be ignored by the browser. A CSS comment begins with "/*", and ends with "*/", like this:

/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}

OK! so that's the general run down on the syntax of CSS.