CSS

Why do you need CSS?
In the early days of the Internet, web pages consisted mostly of text and images. The text was
matted using plain HTML, using tags like <strong> to make the text bold, and the <font> influence the font family, size, and color. Web developers soon realized that they needed more
to format their pages, so CSS was created to address some of HTML’s styling shortcomings.

Problems of HTML formatting.

One of the problems with using HTML for formatting is that it offers only a limited set of options
to style your pages. You can use tags like <em>, <strong>, and <font> to change the appearance of
text and use attributes like bgcolor to change the background color of HTML elements. You also
have a number of other attributes at your disposal for changing the way links appear in your page.
Obviously, this feature set isn’t rich enough to create the attractive web pages that your users expect
and demand.
Another problem of HTML with a lot more impact on how you build your web pages is the way the
styling information is applied to the page. By design, HTML forces you to embed your formatting in
your HTML document, making it harder to reuse or change the design later. Consider the following
example:

<p><font face=”Arial” color=”red” size=”+1”>
   This is red text in an Arial type face and slightly larger than the default text.
</font></p>
The problem with this code snippet is that the actual data (the text in the <p> element) is mixed
with the presentation (the formatting of the text with the <font> tag in this example). Ideally, the
two should be separated, so each of them is easier to change without affecting the other.
Imagine you used the <p> and <font> tags to mark up the first paragraph of every page in your site.
Clearly, this code is difficult to maintain. What happens when you decide to change the color of the
font from red to dark blue? Or what if your corporate identity dictates a Verdana font instead of
Arial? You would need to visit each and every page in your site, making the required changes.
Besides maintainability, another problem with HTML formatting is the fact that you can’t easily
change the formatting at runtime in the user’s browser. With the HTML from the previous code snip-
pet, there is no way to let your visitor change things like the font size or color, a common request to
help people who are visually impaired. If you want to offer your visitors an alternative version of the
page with a larger font size or a different color, you’d need to create a copy of the original page and
make the necessary changes.

How CSS fixes formatting problems.

CSS is designed to format your web pages in almost every possible way. It offers a rich set of options
to change every little aspect of your web page, including fonts (size, color, family, and so on), colors
and background colors, borders around HTML elements, positioning of elements in your page, and
much more. CSS is widely understood by all major browsers today, so it’s the language for visual
presentation of web pages and very popular among web developers.