Cascading Stylesheets Advantages: 5 Reasons To Use CSS

Because you are able to create a separate Stylesheet and link it to all your webdocuments, you have great control over how your website looks. So if you want to change a certain aspect of your page, you only need to alter one file: your Stylesheet!

This Of course, generates some great flexibility. This flexibility is not available when your website is using tables for layout, inline font tags or inline defined colors.

A single CSS file can contain positioning, layout, font, colors and style information for an entire web site.

2. You site uses less bandwidth and loads faster

Because stylesheets are so lightweight, your website will load much faster. The main reason is because you do not need table layouts anymore for the positioning of elements. Since text loads really really fast your website will be visible in a flash.

This means that visitors will be happier when surfing your website. They only have to download the Stylesheet once, and it's automatically reused for every page. So the only thing that needs to be loaded is the actual content.

On average a website will load five to ten times faster if it makes use of cascading style sheets.

3. Your website will automatically gain better search engine results

With CSS, you can position any element, anywhere you want. So if your menu is at the bottom of your HTML document, you can bring it up using absolute positioning. The reason this is useful is to make sure the search engine spiders pick up the main content first.

Another advantage you automatically gain is that your HTML code is much cleaner. So the search engine spider will not have to separate the junk code from the real content.

So make sure you put your logo text and your menu at the bottom of your HTML document at put it at the top using CSS!

4. CSS is compatible with newer browsers

Because more and more browsers are used other than Internet Explorer on a Windows machine, you need to be sure that your website is accessible by all major and newer browsers.

By using webstandards, defined by the w3c, you are making sure your content is viewable in the future.

Because there are so many browsers these days, it is impossible to test your website in all these browsers on different configurations. Coding to standards is then the only practical solution.

5. CSS can be used to display the same content on different media.

Because you are able to define different stylesheets for different media you have great flexibility in presenting your content.

The printer for example, is a medium on itself. If someone prints out your website, you will be able to modify the look of it. Add an extra black and white logo, remove the advertisements and change the colors to black and white values. It's all done easily by using cascading stylesheets. And the best thing is, visitors do not even have to know you created a new Stylesheet especially for the printer.

Stylesheets can also be created specifically for PDA's and such. As you will understand, this adds some great flexibility to the presentation of your web document.

Conclusion

Cascading Style Sheets are created to make things easier. It gives you great control of your website and makes your visitors happy when they are surfing your website.

You are prepared for the future and will gain better search engine results automatically. Start using CSS to its full potential today! It will suit you well.

Acerca del contenido de este blog

-

Este blog es en ESPAÑOL, nada mas que estoy probado dividir las entradas con "leer más" , por eso, tome de la pagina free css articles tres articulos relaionados con el tema(css).. Dentro de unos dias borraré esas entradas y las reemplazaré por el verdadero contenido del blog. disculpe las molestias.

The Low Down On Cascading Style Sheets

-

CSS has been around for more than 10 years beginning in its development in 1997 but it seems it has been in the public consciousness for only a relatively short time. The reason for this is because it wasn’t until the year 2000 that many web browsers began using the capabilities of CSS beyond its more basic color and font characteristics. Of course things are way different now and virtually all modern day browsers feature support for all CSS Level 1 aspects, many aspects of CSS Level 2 and some web browsers have even gone beyond that to support some of the capabilities of CSS Level 3.

Indeed, it is rare that you find a web site nowadays that does not utilize some form of CSS in their design and development. For better or worse, web sites that rely solely on HTML are quickly going the way of the dinosaur. May industry pundits as well as end users have even gone so far as to consider a thorough knowledge of CSS as being far more necessary than a thorough knowledge of HTML. While in truth they are both equally important and will continue to be an important facet of the web for many years to come, there is no denying the widespread impact that CSS has brought upon the World Wide Web.

CSS was originally developed as a means by which web developers could define both the look and the feel of their web pages. With its inception, web designers were now able to treat content and design as two separate entities, thereby allowing HTML to function more in accord with its intended purpose, which was to focus on the markup of a particular web site’s content and leaving the responsibility of the design and layout to CSS.

The term CSS itself is an abbreviation for Cascading Style Sheet. The style sheet in this particular instance refers to the document itself. The concept of style sheets itself is nothing new; designers have used them in their documents for many years. Strictly speaking, style sheets are the set of technical specifications that govern a particular layout, whether it is online or on print. The purpose of these of course is to ensure that any subsequent designs will conform to the predetermined specifications upon printing.

This concept can be translated easily enough to the World Wide Web only in this particular case, Cascading Style Sheets not only determine the technical specifications of a particular document on the web but also has the added function of communicating to the viewing vehicle (in this case the web browser that the end user is using to surf the Internet) exactly how the document that is being viewed is to be rendered.

One of the most important things to remember in all of this is the key word Cascade. Much like a stream of water running of a cliff or elevated area comes into direct contact with the rocks and soil that line the full course of the incline, yet is ultimately only affected in terms of its final destination by the land elements at the end of the slope, Cascading Style Sheets by their very nature flows or cascades through any number of separate style sheets. To follow the stream of water analogy even further, the appearance of a particular web site is ultimately dependent upon the user agent style sheet, which in many cases is the default style that the Web browser will utilize in the task of displaying a particular web page in the absence of any other set of instructions.

Of course more often than not, a web designer will probably provide any number of his own instructions that are embedded in the web page in question. The Cascading Style Sheet in this particular scenario will be tasked with dictating to the web browser which particular set of instructions will have top priority. The most commonly seen usage of this is in the fonts that are used for a web site. Even if your web browser is set to display web pages in a specific font and type size, say Arial narrow 10 points, the font size and family that is specified in the Cascading Style Sheet will take precedence overriding the default values that have been set in your browser.

Cascading Style Sheets go far beyond font specifications however into the areas of XHTML and XML markup. This means that Cascading Style Sheets could be used to define the look of any XHTML and XML markup that you use in your web site.

Clearly Cascading Style Sheets are one of the most powerful tools that any web designer can have in his or her arsenal and they can have a tremendous impact on the whole look and feel of a web site. If you are at all interested in becoming a professional web designer, a thorough knowledge of Cascading Style Sheets is crucial.

Introduction to CSS (Cascading Style Sheets)

-

A Cascading Style Sheet is a set of rules that specify how a HTML document should be presented.

Cascading Style Sheets are used to format HTML. You should have at least a basic understanding of HTML before starting to learn CSS.

There are three types of style sheet: external, internal, and inline. Cascading Style Sheets get their name from the hierarchy assigned to them. The inline style sheet has the highest priority when formatting the HTML, followed by the internal style sheet, and finally the external style sheet. This means that if there are conflicting values in an inline style sheet and an external style sheet for example, only the style defined within the inline style sheet will be applied (the rest of the external style sheet will be applied as normal however).

The only major difference between style sheets is their location in relation to the document. Inline style sheets are contained within the specific element's tags, and will be only be applied to that element. Internal style sheets are included between the head tags of the document, and will only be applied to the elements within that specific document. External style sheets are separate .css documents that are applied to elements in pages that they are linked to. This makes them very useful for applying the same style to different documents. The link to the external style sheet is included in the head tags.

The CSS structure is comprised of 3 components: the selector, the property and the value. The selector defines which HTML element is being formatted. The property defines what aspect of the HTML element needs to be changed. The value specifies how the aspect will be changed.

The selector is defined first, followed by the property and the value contained between curly braces and separated by a colon, like so: Selector{property:value}

For example, if we wanted to define a 2 pixel border for all the tables in a document:
Table{border-width:2px}

Note: the word "attribute" is often used instead of "property".

The structure is slightly different for inline style sheets, as they are specific to the element in which they are contained; there is no need for the selector or the curly braces. If we wanted to define a 2 pixel border for one specific table, the tag would look like this



(An apostrophe has been included after the starting tag to avoid being recognized as HTML).

Once you know the structure of CSS, all you need to know is the different selectors, properties and values. You define your own selectors using classes and IDs. An ID is unique and can only be used once in a document, whereas you can classify any number of elements in a document using classes. Remember not to start the name of your ID or class by a number as this not supported by some browsers. There is also a 'wildcard' selector: the asterisk *.

If you are interested in learning more about CSS, there are many good resources online.