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

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 all repparttar 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 wihin repparttar 105166 following tags:

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

All css or links to repparttar 105167 external stylesheets have to go in between repparttar 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 within repparttar 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, and repparttar 105170 like.

Creating ID 's

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

#navigation { float:left; }

To insert repparttar 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 controls repparttar 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 and repparttar 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.

From repparttar 105164 other side some web developers implement repparttar 105165 CSS on wrong way. They write their CSS in HTML code of repparttar 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 of repparttar 105167 links on your site. You will have to edit ALL repparttar 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 change repparttar 105169 look of your site within minutes, regardless of repparttar 105170 number of pages, because your visual attributes are saved in ONE external CSS file. Edit that file, and you are done.

Benefits

Which are repparttar 105171 benefits of using CSS? List is quite long and I will list here only repparttar 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 of repparttar 105173 regular CSS file - You can forget about creating printer friendly version of your site using separate CSS file when user chooses to print repparttar 105174 web page. Avoiding standard HTML commands like: <font color="#0000ff"><font size=2>Product</font>

Cont'd on page 2 ==>