CSS: The Basics - ID's and Classes ... Correct

Written by Eric McArdle


Css

Cascading Style Sheets

Two types of style sheets: Internal and External

Internal - You insert your style code right into your html code. These stylesheets should only be used if you are intending to create a specific page with a specific style. If you want to be able to make global changes to your website using only one style sheet, you have to use....

External Stylesheets - Instead of putting allrepparttar style code into your html code, you can create a single document with your css code and link to it within your webpages code. It would look something like this

{head} {title}Webpage title{ itle} {link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/css" rel="nofollow"} {/head}

If you decide to use an internal stylesheet, you have to put your css style wihinrepparttar 105166 following tags:

{style type="text/css"} {/style}

All css or links torepparttar 105167 external stylesheets have to go in betweenrepparttar 105168 {head} tags

Now about Css Classes vs. ID's

The one major difference between a class and an id is that classes can be used multiple times withinrepparttar 105169 same page while an Id can only be used once per page.

Example:

ID - The global navigation of your site, or a navigation bar. A footer, header, etc. Only items that appear in only one place per page.

Class - Anything that you would use multiple times in your page, such as titles, subtitles, headlines, andrepparttar 105170 like.

Creating ID 's

To create an Id in your css, you would start withrepparttar 105171 number sign (#) and then your label ofrepparttar 105172 id. Here's an example

#navigation { float:left; }

To insertrepparttar 105173 id in your html, you would do something like this

{div id="navigation"} {/div}

You can also insert an id within another one like this

{div id="navigation"} {div id="left}

CSS - Maximum benefits

Written by Zoran Makrevski


What is CSS?

CSS is a simple file which controlsrepparttar visual appearance of a Web page without compromising its structure. Using CSS we can control our font size, font color, link color and many other attributes on our web page. This will make our HTML code much more readable andrepparttar 105163 page size will be reduced.

Why to use it and how to use it properly

If you donít use CSS on your web pages and you have many tables and content on them, chances are that your HTML file size will be quite big. Fact is that we live in a busy world, and people are not will to wait more than 5 seconds web page to load.

Fromrepparttar 105164 other side some web developers implementrepparttar 105165 CSS on wrong way. They write their CSS in HTML code ofrepparttar 105166 page, like this:

<html> <head> <title>My Page</title> <style> A { font-family: Verdana; font-size:8pt; color:black; text-decoration:none } </style> Ö..

What is wrong with this technique? Well, imagine that you have site with more than 50 pages. One day, you decide that you want to change font color and colors ofrepparttar 105167 links on your site. You will have to edit ALLrepparttar 105168 pages on your site, and do to that you will need time, because you place your CSS in your web page.

Better way is to save your visual attributes in separate, external CSS file, and to link that file with your page like this:

<html> <head> title>My Page</title> <link href="myStyle.css" rel="nofollow" rel="stylesheet" type="text/css"> Ö.

Using this technique, you can changerepparttar 105169 look of your site within minutes, regardless ofrepparttar 105170 number of pages, because your visual attributes are saved in ONE external CSS file. Edit that file, and you are done.

Benefits

Which arerepparttar 105171 benefits of using CSS? List is quite long and I will list here onlyrepparttar 105172 most important.

- Your web page will load faster - Web page will become more search engine friendly - You can change you site appearance within minutes - You can write separate CSS file for handheld devices which will be called up instead ofrepparttar 105173 regular CSS file - You can forget about creating printer friendly version of your site using separate CSS file when user chooses to printrepparttar 105174 web page. Avoiding standard HTML commands like: <font color="#0000ff"><font size=2>Product</font>

Cont'd on page 2 ==>
 
ImproveHomeLife.com © 2005
Terms of Use