Introduction to CSS
In this tutorial, the basic concept of and Cascading Style Sheets (CSS) are described.
CSS, which stands for Cascading Style Sheets, is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language. It’s most common application is to style web pages written in HTML and XHTML (eXtensible Hyper Text Markup Language).
Every browser has its own way of rendering different HTML elements. So, the same website designed using HTML might have different look and feel across different browsers — which certainly creates a problem in web design. CSS was primarily introduced to maintain consistency in look and feel across different web browsers. By using CSS, we can define a customized and uniform style (or rule) for every HTML element. Thus, CSS removes the default styling of HTML elements and provides a foundation upon which we can implement the rendering behavior of our own choice universally across all the browsers.
CSS is also designed to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the colors, fonts, and layout. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as table-less web design).
Besides this, CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.
Features of CSS
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- Styles are normally stored in Style Sheets
- Styles were added to HTML to solve a problem
- Style Sheets can save us a lot of work
- External Style Sheets are stored in CSS files
- Multiple style definitions will cascade into one
Advantages of CSS
HTML tags were originally designed to define the content of a web document. They were supposed to say “this is a header”, “this is a paragraph”, “this is a table”, by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the web browser, without using any formatting tags.
As the major browsers like Mozilla, Chrome, Safari and Internet Explorer continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create web sites where the content of HTML documents was clearly separated from the document’s presentation layout.
To solve this problem, the World Wide Web Consortium (W3C) – the non-profit, standard setting consortium, responsible for standardizing HTML – created “styles” in addition to HTML. All major browsers support CSS.
The advantages of CSS are listed below one-by-one:
1. Flexibility
By combining CSS with HTML, a considerable amount of flexibility can be achieved. Styles are normally saved in external .css files. External style sheets enable us to change the appearance and layout of all the pages in our Web, just by editing one single CSS document.
We can say that CSS brought revolution in web design because it allows developers to control the style and layout of multiple web pages all at once. As a web developer we can define a style for each HTML element and apply it to as many web pages as we want. To make a global change, simply change the style, and all elements in the web page are updated automatically.
2. Separation of Content from Presentation
CSS facilitates publication of content in multiple presentation formats based on nominal parameters. Nominal parameters include explicit user preferences, different web browsers, the type of device being used to view the content (a desktop computer or mobile Internet device), the geographic location of the user and many other variables.
3. Site-wide consistency
When CSS is used effectively in terms of inheritance and “cascading” a global style sheet can be used to affect and style elements site-wide. If the situation arises that the styling of the elements should need to be changed or adjusted, these changes can be made easily, simply by editing a few rules in the global style sheet. Before CSS, this sort of maintenance was more difficult, expensive and time-consuming.
4. Bandwidth
A style sheet will usually be stored in the browser cache, and can therefore be used on multiple pages without being reloaded, increasing download speeds and reducing data transfer over a network.
5. Page reformatting
With a simple change of one line, a different style sheet can be used for the same page. This has advantages for accessibility, as well as providing the ability to tailor a page or site to different target devices. Furthermore, devices not able to understand the styling will still display the content.