Cascading Stylesheet Tutorial

Cascading Style Sheets are not as tough to use as one would think, this tutorial will give you all the basics to get started. To go beyond this tutorial go to w3c.org

Basics of CSS

Cascading style sheets are essential to create great looking websites.
CSS can be used for positioning of elements, inserting graphics, font color; type; size; etc.
Cascading style sheets make life a whole lot easier when you have to go back and edit a page, or a single element of a page. For instance lets say you are creating a website for a customer, they want all of the font changed from Aerial to Tahoma. With CSS this can be done by changing a few different choice words on a single stylesheet that will "cascade" or change the text throughout oh let's say 40 different pages. Enough chit chat, let's get to it.

Basic Code Example

element name
{
properties: what to change to;
}

These tags are used for creating basic stylesheets

Properties

Background

background-image - adds an image to the background
background-color - specifies a defined color to an element
background - sets all of the background properties
background-attachment - set the properties of the background image to a fixed position or if it scrolls
background-repeat - specifies if a background image will repeat itself

Alignment

text-align - specifies where to align the text in the element

Formatting text

color - specifies a defined color to an element
font-family - specifies font type
font-style - specifies font formatting
word-spacing - sets the spacing between words
letter-spacing - sets spacing between letters
text-decoration - sets the decorative properties of text(eg. underline, over-line, line-through, or blink)
text-align - aligns positioning of text

Positioning

margin-left - specifies size of margin on the left of the element
margin-right - specifies size of margin on the right of the element
padding-left; padding-right; padding-top; padding-bottom - specifies padding on top, left, right, or bottom of element

Length/Height(units)

px - pixels
% - percent
em - empty space
ex - x-height
in - inches
mm - millimeters
pc - picas
pt - points

Colors

Aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow
Or any other color that can be found in a hex chart, is defined as #ff00ff or what ever number is on the chart

Selectors

contextual selector - element name(eg. h1)
class selector - .class name
id selectors - #id name

Stylesheet Example

What it looks like

This is my h3 style

This is my #myId style

[Home]

[page1-HTML]

[page3-JavaScript-Part1]

[page4-JavaScript-Part2]

[page5-PHP]

To declare a style sheet in your html page you would type this in between the head tag as so
<html>
<head>
<title>TutorialCode-Created By:Gh0$7</title>
<link rel="stylesheet" href="stylesheet-name.css" />
</head>

To create an external stylesheet

Open your text editor, or crimson editor, create a new document and save it as "stylesheet.css"
The basic structure for a style sheet is as follows:

name of element
{
properties: what to change;
}

Notice that the actual element is followed by { and ends with the opposite }
this is essential for all element properties inside of the stylesheet
All properties must end with a semi-colon

Ok lets get started! Here's what the actual code looks like

Contextual Selectors - Html Elements

body
{
color: green;
font-family: aerial, helvetica, sans-serif;
background-image: url(location of your image);
}

The body tag can be changed to any other html element tag you wish

Class Selectors - Html class Tags

Lets say you have created a table, and want all text in the paragraph to be red. The following example can be applied to all Html tags

<table border="0">
<tr>
<td>
<p class="red">Some text inside here</p>
</td>
</tr>
</table>

Now that you have the class selector inside of the table tag, lets create the style in the stylesheet.

.red
{
color: red;
}

All class selectors have to have a period before the property as specified in the code example above. These can also be used in conjunction with the html element tags, so you can use the same name for different tags. For example

p.red
{
color: red;
}

h1.red
{
color: aqua;
}

The above code shows that you can use the same name ".red" and declare different colors for the specific html element that it is assigned to.

Id Selectors - Html id Tags

Id selectors are similar to Class selectors, except they cannot be used in conjunction with html tags (eg. h1.red) they are their own entity. We will use the above table example and change the id tag.

<table border="0">
<tr>
<td>
<p id="red">Some text inside here</p>
</td>
</tr>
</table>

Now lets look at the stylesheet snippet.

#red
{
color:red;
}

Notice the difference, the id selector uses a pound sign at the beginning instead of a period. This is essentially the only difference between the selectors.

That should do it for the structure of stylesheets. You can use stylesheets as a seperate file (external stylesheet), the same page as the html code(internal stylesheet), or in the actual html tag (inline style).

To use inline styles is essentially the same as an external sheet, below is an inline example.

<p style="color: red;">Some text here that will be red</p>

Now to declare a stylesheet in the html page with the stylesheet included in that page

<html>
<head>
<title>TutorialCode-Created By:Gh0$7</title>
<style type="text/css">
#red
{
color: red;
}
</style>
</head>

Internal stylesheets must be declared at the top of the page, inside of the head tags.