Home Link to Us Affiliate? History About Me Contact Me Staff

CSS Tutorial

By JirachiFan

What is CSS? CSS stands for Cascading Style Sheet. it is a new way of giving your HTML elements (chosen by a defined rules called a selector) some formatting and style (called rules). This saves typing of full of <FONT> tags, and also follows the Web standard.

Let get started by writing the Hello World HTML document: 

<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>Lorem ipsum dolor amet text here.</p>
</body>
</html>

Looks plain, isn't it? Let's decorate the page with dark-grey background, light-blue heading and white text!

<html>
<head>
<title>Hello World</title>
</head>
<body bgcolor="333333">
<h1><font color="0088FF">Hello, world!</font></h1>
<p><font color="white">Lorem ipsum dolor amet text here.</font></p>
</html>

Looks cramped with attributes and <font> tags, won't work for larger documents. This is where CSS comes to use.

A CSS stylesheet is a set of rules, a rule is made or a selector and the list of properties, surrounded by { braces }.
Let's look at an example:

p {
 color: white;
}

The rule above is simple, the selector of the rule is p. The simplest selector consists only a tag name. The rule p, as you can see, selects all <p> tags in the document.

The rule body is a set if property-name: value; pairs (called declarations) seperated by semicolons. You tell how the selected elements are styled. There are hundreds of properties, each comes with a different syntax.

The first property we saw here is the color, as name implies, it sets the text color of the selected elements. Colors in CSS can be experessed in different ways:

  • Color names such as "black", "red" or "white"
  • Hex code such as #FFFFFF, consult s color table for more details.
  • rgb notation such as rgb(255, 255, 255). Values must be 0-255 or 0%-100%.

To apply a CSS stylesheet, wrap them in the <style> tags, they are placed in the head section of an HTML document and often contain the type="text/css" attribute.

<html>
<head>
<title>Hello World</title>
<style type="text/css">
body {
 background: black;
}
p {
 color: white;
}
h1 {
 color: #0088FF;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Lorem ipsum dolor amet text here.</p>
</body>
</html>

We saw the new property here: background, it defines the background color or background image of the elements. To use a background image, wrap the image URL like url(http://www.example.com/images/example.png).

Load that page up and you see, black background and white text, which is what you expected. To make it look better, add fonts. The properties to set fonts are font-family and font-size. The font-family property takes a list of fonts, if the font before does not exist, the next one will be used. You must quote font names with spaces. Here is an example: font-family: "Times New Roman" serif; Notice "serif" is not a font name, actually, it refers to a family of fonts, and the browser (or the user's configruration) gets to choose what font to use. There are more of them such as sans-serif, monospace, fanatasy.

font-size sets the sizes of text. To describe sizes in CSS, we must use measurement units (except for 0, which is same in all units). There are absolute and relative units, absolute units are same across the whole page, while relative units transforms something's existing value to a new value.

cm, mm, in and pt (typograhy points) are self-explainatory, units we may already know. They are examples of absolute units. Now let's look at the relative units: em and %. 1.5em means 1.5 times larger size, while 50% means half size.

This concludes the CSS introduction. Hope you understood what CSS is now. Feel free to tweak the example page, and move on by buying a CSS book or reading layout design tutorial.

Shoutbox

Credits go to Umbreon's Palace for the Shoutbox smilies. ^^
Friends: Team Rango Onogori Achamo~Torchic Sky Pillar Cute Jirachi
Kasumi is owned and copyrighted by Misakii, aka Wishjirachi. No content, graphics, or designs shall be redistributed anywhere on the internet. Design/CSS by Miko Reznor.