Code It All.com

Menu

- Home
- Help Forum
- CIA Topsite
- Getting Started
- HTML Tags
- Links
- Graphics
- Text
- Display Your Code
- Site Formatting

- CSS
   - What is CSS?
   - Why Use CSS?
   - How to Use CSS
   - Linking to CSS
   - CSS Example

- PHP
- Javascript
- Guestbooks / Shoutbox
- Lists
- E-mail
- Extras
- Site Tips

Tools

- Color Chart
- Scrollbar Gen
- ASCII Chart
- HTML Cheat Sheet
- MySpace Ad Remover
- Xanga Ad Remover

Contact Me





Site Links

- MySpace Icons
- Your link here
- More Affiliates...

CSS

Alright, CSS, the Style Sheets.  Personally I love this stuff and wish someone told be about it before I made any websites with multiple pages.  This idea of a style sheet is simple anything you'd place inside of <style> </style> tags can be placed on a page called name.css Below you will see a few examples explaining what the set up of the sheet would look like as well as how to use it on all of your websites pages.



What is CSS?

CSS is a page of information describing the layout of a page or pages.  They can be used to choose the background image, the color of fonts, links, as well as much more that will be explained later on.

 Top



Why use CSS?

CSS allows you to change information on one page (the page.css) and have information on every page that uses that file change.  It cuts the amount of work in half when trying to change your sites layout.

 Top



How do I use CSS?

Well, the first thing to show you is the layout of the page.css file.  For starters it would just be blank.  NOTHING on it what so ever.  Each step provided is simply an addition to the blank page.

For example say you want to place a background image on your webpage.  Then you would need the code below.

body{
    background:url(images/example.gif);
    }

Body (located before the open brackets) tells the site that the background is set for the body of the page.  Also if you wanted the background image to repeat type the word repeat after the closed paranthesis ")".

Within the body's brackets aside from background-image you can change the font color.  That's done by typing color:#colornumber; in the code below we set the background to example.gif and the font color to red.

body{
      background:url(images/example.gif);
      color:ff0000;
    }

Not only can you set the fonts color but the font family and size as well.  When choosing font family you just need to type the name of the font (if the fonts name has a space in it be sure to place it withing quotations or it will not work).  Below we will choose three fonts, when three fonts are chosen the second font is only used if the first one is not available on the visitors computer and the third is only used if the second and first are not available.

body{
      background:url(images/example.gif);
      color:ff0000;
      font-family:Arial, Impact, "Arial Narrow";
      font-size:18;
    }

The code above shows font size set to 18 (normal is 12), and the font family is Arial as my first choice followed by Impact and Arial Narrow.
Font-style is another option about the text on the body of the page.  This allows you to add italic font.  If you want to bold the font you need to use font-weight:;, to underline you will need text-decoration:;.

body{
      background:url(images/example.gif);
      color:ff0000;
      font-family:Arial, Impact, "Arial Narrow";
      font-size:18;
      font-style:italic;
    }


Thats pretty much the basics about the bodys changes through CSS.  Now for links, links can be changed in a few different ways.  The information inside is the same as the body tag.  We can use color, font-family, font-size, text-decoration, font-style and font-weight.  The way in which we do this is through changing the word body to a, a:link, a:hover, a:active, or a:visited.   For example purposes I just use a to describe all links, and a:hover to show an example of when you hover over a link.

body{
      background:url(images/example.gif);
      color:ff0000;
      font-family:Arial, Impact, "Arial Narrow";
      font-size:18;
      font-style:italic;
    }

a{
      color:0000ff;
      font-family:Impact, "Arial Narrow";
      font-size:10;
      text-decoration:underline;
    }

a:hover{
      color:ff0000;
      font-family:"Arial Narrow";
      font-size:12;
      font-weight:bold;
    }

Here the color will change from blue to red when the link is hovered over, and the font family and size will change.  Also the underlined link will change to bold.  An example of everything will be linked to at the end.

You can also change the way already specified tags work.  For example, h3 is a specific code which makes a header of a certain font size.  In this example I want h3 to also underline the headers.  This is done by using the code below.

body{
      background:url(images/example.gif);
      color:ff0000;
      font-family:Arial, Impact, "Arial Narrow";
      font-size:18;
      font-style:italic;
    }

a{
      color:0000ff;
      font-family:Impact, "Arial Narrow";
      font-size:10;
      text-decoration:underline;
    }

a:hover{
      color:ff0000;
      font-family:"Arial Narrow";
      font-size:12;
      font-weight:bold;
    }

h3{
      text-decoration:underline;
    }

name tags, class tags, or id tags can be used by CSS style sheets as well.  For example this site uses a div class in which I labeled outerline.  This is how I get the place the codes within the boxes without typing large codes.


<div class="outerline">code text here.</div>

Below is the example of how to use the outerline class in the CSS sheet to make it outlined.

body{
      background:url(images/example.gif);
      color:ff0000;
      font-family:Arial, Impact, "Arial Narrow";
      font-size:18;
      font-style:italic;
    }

a{
      color:0000ff;
      font-family:Impact, "Arial Narrow";
      font-size:10;
      text-decoration:underline;
    }

a:hover{
      color:ff0000;
      font-family:"Arial Narrow";
      font-size:12;
      font-weight:bold;
    }

h3{
      text-decoration:underline;
    }

div.outerline{
      border-width:1;
      border-style:solid;
      border-color:black;
    }


Div id is basically the same thing but if you choose to use that instead there are some differences you will need to know.  The div code looks like this:

<div id="outerline">code text here.</div>

and the css would be changed to this:

body{
      background:url(images/example.gif);
      color:ff0000;
      font-family:Arial, Impact, "Arial Narrow";
      font-size:18;
      font-style:italic;
    }

a{
      color:0000ff;
      font-family:Impact, "Arial Narrow";
      font-size:10;
      text-decoration:underline;
    }

a:hover{
      color:ff0000;
      font-family:"Arial Narrow";
      font-size:12;
      font-weight:bold;
    }

h3{
      text-decoration:underline;
    }

#outerline{
      border-width:1;
      border-style:solid;
      border-color:black;
    }


If you want to use class tags with links follow this example.  For example this site uses name tags for the menu.  <a class="Menu"...>Link</a> is used to name the links for the menu.  This makes it easier to change certain parts of the menu without changing the appearance of every link on the page.

body{
      background:url(images/example.gif);
      color:ff0000;
      font-family:Arial, Impact, "Arial Narrow";
      font-size:18;
      font-style:italic;
    }

a{
      color:0000ff;
      font-family:Impact, "Arial Narrow";
      font-size:10;
      text-decoration:underline;
    }

a:hover{
      color:ff0000;
      font-family:"Arial Narrow";
      font-size:12;
      font-weight:bold;
    }

h3{
      text-decoration:underline;
    }

a.Menu{
      color:#0000FF;
      font-weight:bold;
      text-decoration:underline;
      font-size:20;
    }


In the end this is all the basic material about creating CSS that is needed to get started making your page more simple.

 Top



But how do I link to CSS Sheets?

That's simple, it all depends where you save it on your website.  If it's located in http://www.site.com/style/style.css then the code would be:

<LINK REL=StyleSheet HREF="http://www.site.com/style/style.css" TYPE="text/css" MEDIA=screen>

Any page that has this link in it will have its appearance changed as the style.css page is changed.
 Top



CSS Example

Click to see an example of the CSS created above in use.

 Top
Code It All - Copyright 2008
users online

Valid HTML 4.01 Transitional