Docstoc

Css Tutorial

Document Sample
Css Tutorial Powered By Docstoc
					Cascading Style Sheets (CSS) are used to completely control the look and feel of your website.

When HTML was merged with xml to become xHTML, CSS took off because now we were able to create our own tags and
the possibilities became endless. You define how you want to add style to your pages in one of two ways. You embed the
CSS styling rules directly into the xHTML file or you link to an outside CSS file. It’s better to link to an outside file.


Embedding CSS Directly


You want to define your CSS, right after the title closing tag as I show here:


… <head>…<title>…</title>


<style>


h1 {


font-family: arial, sans-serif;


color: purple;


}


</style>


To start the CSS code create a <style> tag. Here we are going to change the default style of every <h1> tag in the entire
xHTML file. Every h1 styled text will now show up in arial or sans serif and have the color purple. Then you close your
styling area with a } and a closing style tag </style>.


Linking to a CSS File


Why do I want you to always link to a style sheet instead of embedding the CSS code? We’ll let’s say you style 300 pages
with the above h1 code and then the client calls and says he wants all the h1 tags changed to red. You would have to go
through every page and change them one by one.


If you linked to an outside CSS page, you would only have to change one file and it would filter out to every page on the
site. This is how you link to an outside CSS page.


… <head>…<title>…</title>


<link type=”text/css” rel=”stylesheet” href=”styles.css” />


Now all of your styles will be pulled from one source “styles.css”, site wide. Here is a description on what this code
means:


<link> : Links in external information


type=”text/css” : Tells the browser, that the information being linked is CSS code
rel=”stylesheet” : Explains further that the file is a stylesheet


href=”styles.css : Shows the browser where the file is located. This file can have any name, but must end with the
extension .css.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:11
posted:9/7/2012
language:English
pages:2