CSS Tutorials

Last update on August 19 2022 21:50:52 (UTC/GMT +8 hours)

What is CSS?

CSS, stands for Cascading Style Sheet is a computer language to describe presentation (for example width, height, color, background color, alignment etc.) of HTML and XML (and XML based languages like XHTML, SVG) web documents. In all the examples of our tutorials, we have used HTML for implementing CSS.

CSS is a standard specified and maintained by World Wide Web Consortium.

From its invention, CSS has evolved through different versions. The present version of CSS is CSS 2.1.

Next version of CSS is CSS3, which is under development but developers have already started using some of its features.

In the consequent pages, we will discuss CSS 2.1 in detail. Learning which, you will be able to implement CSS in your own web pages.

How CSS can be associated with an HTML web page

There are three ways to attach CSS to an HTML web page.

1. Writing CSS code in a separate file (CSS files are saved with .css extension) and including that CSS file in head section of an HTML page using <link> element.

Example of including CSS by using <link> element

CSS code:

p {color: maroon}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>A simple CSS example</title>
<link rel='stylesheet' href='/css-intro1.css' type='text/css' />
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est.
</p>
</body>
</html>

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est.

View an example of CSS using link element in a separate browser window.

2. Writing CSS code as a value of style attribute of an HTML element whose presentation you like to set. This is called as an inline style.

Example of writing CSS as a value of style attribute

HTML and CSS code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>A simple CSS example</title>
<link rel='stylesheet' href='/css-intro1.css' type='text/css' />
</head>
<body>
<p style="color: maroon">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est.  </p>
</body>
</html>

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est.

View example of writing CSS using the inline style in a separate browser window.

3.Writing CSS code within style tags, within the head section of the HTML page

Example of writing CSS code within style tags, within the head section of the HTML page

HTML and CSS code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>A simple CSS example</title>
<style type="text/css" >
p {color: maroon}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at nisi velit, aliquet iaculis est.  </p>
</body>
</html>

View example of writing CSS within style tags in a separate browser window.

Advantages of CSS

1. Separation of content form presentation : Writing CSS code in another CSS file and attaching it to an HTML page, you can separate content from presentation. So, as an author, you need not be concerned about presentation and concentrate on content only.

2. Consistency : CSS can provide a consistent presentation for all of the pages of a web site.

3. The Increment in accessibility : If a particular page (or a number of pages ) needs a different look and formatting, with a change of a single line, that can be achieved by calling more than one CSS for the same page.

4. Save of bandwidth : Since CSS separates content form style, it makes a web document lightweight, causing saving of bandwidth and in turn faster loading of the page.

5. Ease of contribution : Content Management Systems (for example WordPress) uses CSS, so that people without bothering how their content will look, can submit their content. This has caused an exponential increase in User Generated Content.

Next: Features of w3resource CSS tutorials