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>

CSS Print Media Tutorial

Written by Karl Regis


The power of print + CSS So you've made yourself a cutting edge web page. What next ? Well maybe you want your visitors to be able to print pages in a certain style. Heavy graphical content can be removed, background colour changed and navigation items removed, infact anything to make a printer friendly version of your page. All this can de done with CSS.

Printer friendly pages with CSS CSS can effectively be used to create formated documents ready for print. This is quite a simple process and all we have to do is create and attach a second style sheet withrepparttar attributes required for our print output. Therefore we have a stylesheet that controlls what you see onrepparttar 105162 screen and a style sheet that controls what is printer. Easy......

Markup changes So, we will have already attached an external stylesheet inrepparttar 105163 head code of our document. It should look something like this:

The tag here has an attribute called media which can have a variety of options such as screen or print. For a full description of media types please view our glossary here.

Now, if we want to separate our media into two types - one forrepparttar 105164 screen and one for print we must alter our code:

We have now defined a separate style sheet for both screen and print.

The css sheets are now called screen.css and print.css. This means when a web browser requests your web page screen.css kicks in for your screen display. When a request is made for a print preview or printrepparttar 105165 style is defined by print.css.

This is not an automatic process and we will have to write a new style sheet called print.css that works in accordance with your original html document.

Inrepparttar 105166 next section we look atrepparttar 105167 CSS involved in setting up a page for print output.

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