Style Sheets Coding Tutorial - How to make style sheets and Webhosting, Server, and Web Site Help and Information

Web Hosting Wit.Com
Webhosting, Server and Web Site Help & Information

Internet Services

Coding Tutorials

Tips & Tricks

Charts

CSS Support

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;