Introduction
Cascading Style Sheet, usually used in its abbreviated form as CSS, is a style sheet language designed to enable the separation of a document’s content from the way it is intended to be presented. Introduced by the W3C consortium in 1996, CSS is used to describe the ‘look and feel’ of a document written in another markup language, such as XML or XHTML.
In this blog article, we shall go through the basics of CSS and see a few examples of how it is to be used. We shall also see some cross-browser techniques to make a piece of CSS code work in the same way on all the major browsers.
It is assumed that the reader knows HTML and how to create HTML pages.
What is CSS?
To understand CSS, we first need to understand the concept of a Style Sheet Language – a language used to describe the layout of structured documents. A bare-bones example of this requirement would be displaying a table on a Web page. In this case, the content of the table is distinct from its layout, meaning, the table can use any font, background color and design whilst conveying the same information.
A collection of such style-defining rules is known as a style sheet and a language which enables defining such rules for a particular application or purpose is known as a style sheet language.
Put another way, a style sheet allows a Website developer to define the content of the Web page in one file and the way that content is to be presented in another. Using a technique, these two files are ‘linked’ to generate the required output in the desired manner.
CSS is a powerful tool for a Website developer, allowing him to be consistent with the look and feel of his Web pages while giving him much more control over the layout and design than straight HTML ever did.
As mentioned in the preceding paragraphs, the styles take care of displaying the Web page and are defined in separate files. So if multiple styles are declared for an element, they will cascade into one and that is the reason these sheets are known as Cascading Style Sheets or CSS.
The cascading order of what style to be used when there is more than one specified for an HTML element depends on the following order, in increasing levels of priority:
- Browser default: Look for the style element that is created; if it is not in the document, use the default rules in the browser.
- External Style Sheet: Determine if any of the style rules are marked as important and apply those to the appropriate elements.
- Internal Style sheet (declared inside the <head> tag): Any style rules in the document will have precedence over the default browser settings.
- In-line style sheet (declared inside the HTML element – this has the highest priority): The more specific the style rule, the higher the precedence it will have.
So, an in-line style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag in an external style sheet or in a browser (a default value). Finally, if two rules apply to the same element, the one that was loaded last will have the highest precedence.
The basics of CSS
The basic purpose of CSS is to allow the designer to define style declarations (formatting details such as fonts, element sizes, and colors), and to apply the defined styles to selected portions of HTML pages using selectors – references to an element or group of elements to which the style is applied.
Let’s understand it with the help of a simple example:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>A Simple Page</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<style>
h1, h2
{
font-family: sans-serif;
color: #3366CC;
}
</style>
</head>
<body>
<h1>First Title</h1>
<p>. . . </p>
<h2>Second Title</h2>
<p>. . .</p>
<h2>Third Title</h2>
<p>. . .</p>
</body>
</html>
It can be seen from the sample code above that both the content as well as the style of the Web page are separately defined (although for ease of understanding, they have been shown in the same file). The font and font colors to be used for the page are defined in the <style> block, whereas the actual content, that is, the text of the page, is defined separately within the <body> block.
Different ways in which styles can be applied
Now let’s understand the different ways in which CSS can be applied to a Web page.
- In-line Styles
When the style rules are defined for an HTML element using the <style> attribute in the Web page itself, these are known as ‘in-line styles’. As mentioned above, these style rules have the highest priority. An example of inline styles is shown below:
<p style=”font-family: sans-serif; color: #3366CC;”> Amazingly few discotheques provide jukeboxes. </p>
With inline styles, there are some advantages such as:
- The styles are available in the page source itself.
- These rules will be applied as they have the highest priority.
But there are also some disadvantages such as:
- No re-usability of rules: As the styles are specific to the element, you have to specify these styles for all the elements.
- Code maintenance: Since the styles are going to be a part of the Web page, code maintenance is a problem.
- Embedded Styles
When the style rules are defined in the <head> tag of the page, they are known as embedded styles. An example of embedded styles is shown next.
<html> <head> <style type=”text/css”> /* Style rules here*/ </style> </head> <!—rest of the html of the page –> </html>
With embedded styles too there are certain advantages and disadvantages. The advantages are:
- The styles are available in the page source itself.
- The same style can be applied to multiple elements.
The disadvantages are:
- No re-usability: Though the style rules are now part of the page instead of the element, if the same style rules have to be applied to a different page, then the same rules need to be defined for the other page too.
- Code maintenance: Since each page is going to have rules, if a change is required to be made in the appearance of a particular element, then a change in all the pages where these style rules are defined will have to be made.
- External style sheets: When the style rules are defined in a separate file and used in the Web pages by providing a ‘link’, these are known as external style sheets. These files are saved with the .css file extension.
An example of an external style sheet is shown next.
/* START: External style sheet file name – eg.css */ /* style rules go here */ /* END: External style sheet file name – eg.css */ To link this file to your Web page, we add the following line in the <head> tag of the page: <html> <head> <link rel=”stylesheet” type=”text/css” href=”eg.css” /> </head> <!—rest of the html of the page –> </html>
External style sheets are highly recommended for any application since they present an advantage of re-usability as well as ease in code maintenance. However, this does not mean that one should never use embedded or in-line styles in Web pages, but it is recommended to use them only where absolutely necessary.
Before moving on to see more about style definition, we will understand one more term from Web 2.0 – Semantic Markup covered in next part of the blog. Watch this space for more.
Related posts:
- Understanding Cascading Style Sheets – Part 3 Introduction This is the concluding part in a three part blog on Cascading Style Sheets, or CSS. In the first part, we saw what CSS is and where and why...
- Understanding Cascading Style Sheets – Part 2 Introduction This is the second in a three part blog on Cascading Style Sheets, or CSS. In the first part, we saw what CSS is and where and why it...
