webhosting Web Hosting Wit.Com
Webhosting, Server and Web Site Help & Information
Internet Services
  Domain Names
  Web Hosting
  Accept Credit Cards
  SSL Certificates
  T1 Connections
 
Coding Tutorials
  HTML Tags
  HTML Code
  Style Sheets
  Javascript
  PHP Tutorial
  ASP Tutorial
  SQL (Database)
  ASP Code
  HTML Templates
 
Tips & Tricks
  Design Dos & Don'ts
  HTML Tips
  Useful Applications
  Search Engines
  My IP Lookup
 
Charts
CSS Support
  Cascading Style Sheets
  HTML and CSS
  CSS Support
 
Contact Us
Home Page
 
html basic code
free html codes
Style Sheets Tutorial
How to Make Style Sheets

What are Style Sheets?
Many people ask how do you make style sheets, and what are style sheets, or CSS? Style Sheets, or Cascading Style Sheets (CSS), is an easy and efficient way to add styles (such as fonts, colors, italics, etc.) to your text. The biggest advantage of using Style Sheets over conventional HTML formatting tags is that instead of using multiple tags to define the same format many times, you can set up one class that can be referenced as many times as you need.

For example, notice how many times the same HTML tags are used in defining the text inside the table cells:
<td><div align="center"><font face="verdana" size="2" color="#000090"><b><i>example text 1</i></b></font></div></td>
<td><div align="center"><font face="verdana" size="2" color="#000090"><b><i>example text 2</i></b></font></div></td>
<td><div align="center"><font face="verdana" size="2" color="#000090"><b><i>example text 3</i></b></font></div></td>
<td><div align="center"><font face="verdana" size="2" color="#000090"><b><i>example text 4</i></b></font></div></td>
By configuring one style sheet, we can eliminate all of the formatting tags.
.mystyle { text-align: center; font-family: verdana; font-size: 14px; text-color: #000090; font-weight: bold; font-style: oblique; }
This is what the new HTML code would look like:
<td class=mystyle>example text 1</td>
<td class=mystyle>example text 2</td>
<td class=mystyle>example text 3</td>
<td class=mystyle>example text 4</td>

And another big advantage to using Style Sheets, should you have to change any of the formatting elements, you're only changing it in one place, instead of every place.

Implementing Style Sheets
Here is how to make style sheets. First you'll need to create a new document. It doesn't matter what the name is, as long as the extension is .css . You will create all of your styles in this document, and reference it from your HTML files.

Second, open up one of your HTML files. Directly under your html tag should be a head tag. This is where your header information, such as your title, goes inside your HTML document. Make a new line, and insert the following code:
<link rel="stylesheet" href="path/filename.css">
If you don't have head tags, you'll need to add them. Insert an opening tag, <head>, the line of code above (for inserting your style sheet), and a closing tag, </head>.

You are now ready to implement style sheets into your HTML pages!

Quick Reference
The following are common instructions used in Cascading Style Sheets, with what they do and how to use them. You can either define your own style sheets, or re-define actual HTML tags.
The following will automatically re-define the H1 tag to use the desired specifications.
H1 { font-family: verdana; font-size: 30px; font-weight: bold; }
The following will define a variable for reference by your HTML pages to include the desired styles.
.mystyle { font-family: verdana; font-size: 30px; font-weight: bold; }

font-weight   Sets the font weight. The most common value to use is simply bold but you may also use normal, bolder, lighter, or values from 100 to 900 in steps of 100 to define the weight of boldness.
font-weight: bold;
font-weight: 500;
font-style   Sets the slant of the font. Use oblique or italic to turn italics on, and normal for no talics.
font-style: oblique;
font-family   Sets the font style of the text. If you're not using standard fonts, use a comma-separated list of font names the computer will search for if those are not found. Standard text-based fonts include: arial, arial black, comic sans ms, courier, courier new, georgia, impact, times new roman, verdana.
font-family: arial black;
font-family: chicago, verdana;
font-size   Sets the font size of the text. You can set the value of this in many different ways. Using an absolute size requires key words describing the size. These values are xx-small, x-small, small, medium, large, x-large, and xx-large. Using a relative size sets the size in relation to the current font size. Use either larger or smaller. Common ways to specify the values are in either points (pt) or pixels (px).
font-size: x-large;
font-size: smaller;
font-size: 12px;
font-stretch   Expands or condenses a font. Using an absolute size requires key words describing the size. These values are ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded. Using a relative size sets the size in relation to the current size. Use either wider and narrower.
font-stretch: extra-expanded;
font-stretch: narrower;
margin   Sets the margin width of the margin area of a box. You can use margin by itself, which would define all four sides, or define each side individually by using margin-left, margin-top, margin-right, or margin-bottom. Common ways to specify the values are in either percentages (em) or pixels (px).
margin-top: 5em;
margin-right: 20px;
padding   Sets the width of the padding area of a box. You can use padding by itself, which would define all four sides, or define each side individually by using padding-left, padding-top, padding-right, or padding-bottom. Common ways to specify the values are in either percentages (em) or pixels (px).
padding-top: 5em;
padding-right: 20px;
border-width   Specifies the width of the border area. You can use border-width by itself, which would define all four sides, or define each side individually by using border-left-width, border-top-width, border-right-width, or border-bottom-width. You can use word values to specify the border width (thin, medium, or thick) or use a numeric value. Common ways to specify the values are in either percentages (em) or pixels (px).
border-width: 5em;
border-right-width: 2px;
border-color   Specifies the color of the border area. You can use border-color by itself, which would define all four sides, or define each side individually by using border-left-color, border-top-color, border-right-color, or border-bottom-color. You can use word values to specify the border color (white, black, red, etc.) or use a color value. Common ways to specify the values are by hexidecimal (#4040FF), RGB values (rgb(64,64,255)), or RGB percetages (rgb(25%,25%,100%)).
border-color: rgb(49%,190%,49%);
border-left-color: #A84535;
border-top-color: blue;
border-style   Specifies the line style of the border area. You can use border-style by itself, which would define all four sides, or define each side individually by using border-left-style, border-top-style, border-right-style, or border-bottom-style. Use word values to specify the border syle: dotted, dashed, solid, double, groove, ridge, inset, outset, or none.
border-right-style: dashed;
border-style: solid;
line-height   Specifies the line height for a font. Common values to use to define the height are pixels (px) and percentages (em or %). Use normal to use the default font height.
line-height: 16px;
line-height: 125%;
background-color   Sets a background color for an element. You can use word values to specify the border color (white, black, red, etc.) or use a color value. Common ways to specify the values are by hexidecimal (#4040FF), RGB values (rgb(64,64,255)), or RGB percetages (rgb(25%,25%,100%)).
background-color: rgb(49%,190%,49%);
background-left-color: #A84535;
background-top-color: blue;
background-image   Sets a background image for an element. You must use an image from a URL, or use the keyword none to specify no background.
background-image: url("splash.jpg");
background-image: url("../backgrounds/blue.gif");
background-repeat   Specifies if and how to tile a background set by background-image. The word values to use for this are repeat (tiles the background vertically and horizontally), repeat-x (tiles the background horizontally only), repeat-y (tiles the background vertically only), and no-repeat (do not tile the background).
background-repeat: repeat-x;
background-repeat: no-repeat;
background-attachment   Specifies whether to scroll a background set by background-image or not. The word values to use for this are either scroll (scroll the background with page movement) or fixed (keep the background in place during page movement).
background-attachment: scroll;
letter-spacing   Specifies the spacing between text (values can be negative). Common values to use to define the space are pixels (px), percentages (em), or centimeters (cm). Use normal to use the default letter spacing.
letter-spacing: -1px;
letter-spacing: 2em;
letter-spacing: 1.5cm;
word-spacing   Specifies the spacing between words (values can be negative). Common values to use to define the space are pixels (px), percentages (em), or centimeters (cm). Use normal to use the default word spacing.
word-spacing: -3px;
word-spacing: 2em;
word-spacing: 4cm;
text-transform   Specifies the capitalization effects of the text. The word values to use for this are capitalize (will make the first letter of each word uppercase), uppercase (will make all letters uppercase), lowercase (will make all letters lowercase), or none (which specifies no capitalization effects).
text-transform: lowercase;
text-transform: capitalize;
text-decoration   Specifies the decoration of the text. The word values to use for this are underline (will underline all text), overline (will put a line above all text), line-through (will put a line through all text), blink (will make the text blink), or none (which specifies no decoration).
text-decoration: underline;
text-decoration: blink;
text-align   Specifies how to align the text. The word values to use for this are left (will left-justify text), right (will right-justify text), center (will center text), or justify (will double justify text).
text-align: right;
text-align: justify;
text-indent   Specifies the indentation for the first line of text. Common values to use to define the space are pixels (px), percentages (em), or centimeters (cm).
text-indent: 20px;
text-indent: 3cm;
color   Specifies the foreground color for the text. You can use word values to specify the text color (white, black, red, etc.) or use a color value. Common ways to specify the values are by hexidecimal (#4040FF), RGB values (rgb(64,64,255)), or RGB percetages (rgb(25%,25%,100%)).
color: rgb(49%,190%,49%);
color: #A84535;
color: blue;

2003 Web Hosting Wit.Com and its licensors. All Rights Reserved
Designed by Fencl Web Design