What is CSS? Benefits of CSS. How to use CSS with HTML.

Views 3 Likes Comments Comment
Like if this Guide is helpful
Style Sheets, or CSS is a method of controlling how an Internet
document is displayed on the web. The CSS controls are available for
just about every tag, which makes up an HTML document. Tags such as
<body>, <table> <td> and even <hr> and <b> can be controlled, as far
as their visual appearance, beyond the normal controls already
available to HTML.

For instance, in our document, lets say for a <b> tag, meaning bold,
we could also change the color of the words in between the bold tags
to green or blue or pink.

Style sheets have been around since 1994, introduced by Håkon and  by
a programmer for NCSA Mosaic named Marc Andreesen. Although the idea
wasn't new, the separation of document structure from the document's
layout had been a goal of HTML from its inception in 1990. Tim
Berners-Lee wrote his NeXT browser/editor in such a way that he could
determine the style with a simple style sheet. However, he didn't
publish the syntax for the style sheets, considering it a matter for
each browser to decide how to best display pages to its users. In
1993, NCSA Mosaic, the browser which made the Web popular, came out.
Stylewise, however, it was a backwards step as it only allowed its
users to change certain colors and fonts.

Style sheets have only become truly useful and popular in the last few
years however, because the many browsers out there didn't support much
of the CSS tool box, and those they did support, they rendered
differently, so it tended to be more frustrating than it was worth to
build maintainable websites with CSS controls. This has changed
drastically however, with browsers giving more support and the ability
to control the CSS sheets with languages such as Javascript and PHP.

Usage of Style sheets offers a level of control not only in the
viewing of a webpage, meaning, how it looks in a browser window, but
also in maintaining the look and feel of a website. You can place
Style controls right inside a tag, such as

<H1 style="font:arial; font-size:14px; color:blue"> Hello World</H1>

This is direct control, specifying how the H1 tag will be represented.
Better however is controlling the whole website through a single file.
With the above example, if we decided that H1 tags should be green or
yellow, we would have to change every file in our website. If you have
a website with hundreds of pages, this can be a large project, and
prone to typos and errors. But style sheets can be linked in the
Header area of an HTML document.

<link rel="stylesheet"
href="yourdomain.com/styles-site.css" type="text/css" />

This method allows the webmaster of a large site to change what ever
she needs to change in a single location, thus keeping the errors down
and the uniformity of the site high. Linking to a single file such as
this in one area of the website, gives single point of editing
control. You can also place the CSS styles in the Header of the
document, but again, this is not the best idea. Most browsers also
only download the external CSS document once, and then refer to it on
each refresh, making the pages load much faster, then if the CSS
instructions are in the header of each page.

CSS works not only with HTML documents, but also with XML documents,
and SVG documents, bringing completely new levels of control and
perfection to web design.

A great example page as to the power of CSS can be found on
Movabletype.org
movabletype.org/default_styles.shtml

Notice on this page that there are several CSS styles given as the
default available styles. The data and the content of the pages never
changes, nor do the table and header information, just the CSS setups
do, but the power of CSS over the look of the pages is amazing. On
sending the menu to one side, the other to the top, or bottom. Really,
there is very little you can not do with a patiently thought out CSS
document.
Have something to share, create your own Guide... Write a Guide
Explore more Guides