CSS: CSS - Maximum benefits

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>

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 with repparttar attributes required for our print output. Therefore we have a stylesheet that controlls what you see on repparttar 105162 screen and a style sheet that controls what is printer. Easy......

Markup changes So, we will have already attached an external stylesheet in repparttar 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 for repparttar 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 print repparttar 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.

In repparttar 105166 next section we look at repparttar 105167 CSS involved in setting up a page for print output.

Cont'd on page 2 ==>