What is CSS?

CSS | Beginner | Blue_Chi

CSS (Cascading Style Sheets) is the standard technology used to format the styling of the web. It provides designers with more powerful styling options while separating the content of web pages from their design. This article will explore how the need for CSS emerged and what benefits it provides to web designers.

The Messed Up Web

HTML was originally made as a simple language to structure research documents by identifying headings, paragraphs, lists, tables, and links inside those pages. It did not originally concern itself with the formatting of the visual aspects of those structure elements it defined and instead let the browser deal on its own with decisions of what font to be used, what size to display those elements at and in what color.

The Mosaic browser emerged as the first browser to implement images and text in the same page making the infinite possibilities of how the web could develop apparent to all. Demand increased for new aesthetic HTML tags, structural elements, such as <table>, were increasingly misused to create presentational effects which ignored the original intended purpose of those elements.

The browser war between Microsoft's Internet Explorer and Netscape's Navigator contributed in making the situation worse by constantly adding new proprietary presentational extensions to HTML to gain an edge over the competitor and those only worked on the maker's browser. Creating websites became a tedious and expensive task to do as multiple versions had to be made for the website to work on competing browsers.

All of this lead to the use of a confusingly extensive amount of HTML code that was impossible to read, added nothing to the structure, made it very difficult for search engines to index the content of the page, and was impossible to be understood by screen readers used by disabled web users.

CSS to the Rescue

CSS came to the rescue by providing the means to control the formatting of web pages while retaining proper structure. Using CSS make it possible to control the styling of a page by linking to a separate file that contains all the formatting details to be applied when the page is displayed. There are many advantages for using CSS for styling instead of HTML, the most noteworthy of these are:

  1. Using CSS makes it possible to centralize the styling of a whole website by making all the pages of a given website link to a single CSS file. This file that could then be updated to affect the whole look of the website without the need to edit and update each and every page and that guarantees that the look of the website will be consistent throughout. This code centralization is also beneficial for individual pages as well since the developer does not have to search within the page to alter the look of a certain element in it.
  2. Using CSS saves time and reduces the developer's workload as there is less code to type. When using CSS you style an element once only and all the instances of that element will correspond to the style sheet no matter how many times they occur. It is also possible to style multiple elements at the same time as well.
  3. Pages that use CSS load faster because the amount of code is less as mentioned in the previous point and also because the external CSS file could be cached by the browser to avoid the need to download it again when accessed by other pages using the same style.
  4. CSS provides advanced styling options which are not available through HTML providing the designer with greater control over the layout. Those new options include control over the margin and padding around each element, the option to add borders and backgrounds to each element, control over capitalization of text, and control over the display of elements.
  5. CSS also makes it possible to control the way the website looks depending on the device that accesses the website. It is possible to use one style sheet to control the way the website looks when displayed on a normal browser, on a mobile phone, or even when printed. This removes the necessity to create multiple versions of a certain web page when serving different media types.

Learning CSS is essential for any web designer for all the benefits it provides. This process can be challenging at start as it requires us to 'unlearn' our previous practices for table-based design, but this is not hard to do as CSS is quite easy to understand and use. There are loads of resources offline and online that teach CSS. For those that prefer books, I recommend Eric Meyer's CSS: The Definitive Guide for beginners wishing to learn CSS. You can view the W3C CSS homepage for an online guide on the language.

-End of Tutorial