CSS Tutorial

This tutorial will teach you all about CSS from very basic for beginner to advance.

What is CSS ?

CSS stands for Cascading Style Sheet, is a text file with .css extension and is commonly used to define styles and layouts of Web pages written in HTML and Extensible Hypertext Markup Language (XHTML).

A Brief History of CSS

CSS was invented by Hakon Wium Lie on 10th Oct, 1994 and maintained by a group of people within World Wide Web Consortium (W3C).

Why CSS ?

CSS simplifies the task of maintaining a Web document by separating its style information, such as font size, font color, line width, and background color etc. This separation allows you to apply the same style rules to multiple Web pages. CSS also allows you to apply a style multiple times in a single Web page.

Why to Use CSS ?

Suppose, you have a Web page that contains multiple tables and you want to apply some style on the table caption, table header, and table cells. To do this, you just need to write the code once in a CSS style sheet and apply this style sheet to all the tables of your Web page. This reduces the complexity and redundancy of code in the Web page and saves your time, as you do not need to write the same code again and again.

CSS Recommendation

The CSS file contains the style code for the structure, such as headings, paragraphs, and links. The styles patterns and layouts defined in a CSS file can be modified by making the required changes in the code of the CSS file. CSS also provides a pattern that helps in applying the style rules on specific elements. This pattern is known as a selector. Some of the most-commonly used CSS selectors are universal, type, and class.

Advantages of CSS

Here are some advantages of using CSS to style HTML documents:

CSS saves more time
CSS provides faster page loads
CSS is easy to maintain
CSS has superior styles to HTML
CSS provides multiple device compatibility
CSS provides global web standards
CSS provides offline browsing
CSS is platform independence

Here is a simple CSS example. Here, we are going to apply style to a HTML document using CSS.

Let's suppose we have this HTML document.

<!DOCTYPE HTML>
<html>
<head>
	<title>CSS Tutorial</title>
</head>
<body>

<h1>CSS</h1>
<p>You are learning CSS at fresherearth.com</p>

<h2>CSS Tutorial</h2>
<p>This is CSS Tutorial at fresherearth.com</p>

</body>
</html>

Save the above file with .html extension like filename.html. Now, when you open this in your browser, the web page will look like this:

Now we are going to create a CSS file, to style the above HTML document (Web page). The file contains:

body{background-color:silver;}
h1{color:green;}
h2{color:blue;}

Save the above CSS code in a file ending with .css extension like filename.css. Now to use the above CSS code to style the HTML document, we have to provide link (address) of this CSS file in the HTML document as shown here:

<!DOCTYPE HTML>
<html>
<head>
	<title>CSS Tutorial</title>
	<link rel="stylesheet" href="filename.css">
</head>
<body>

<h1>CSS</h1>
<p>You are learning CSS at fresherearth.com</p>

<h2>CSS Tutorial</h2>
<p>This is CSS Tutorial at fresherearth.com</p>

</body>
</html>

Now after inserting the address of the CSS file, open your HTML file in your browser, your web page will look like this:

Later, if you want to change the heading, paragraph, or background color, you have to only make changes in the CSS file. After that, your whole web page changed.

You can also apply CSS in a HTML document at the time of creating HTML elements i.e., inline CSS.

You will learn all about CSS in this tutorial series.

What to Learn before CSS ?

You must have basic understanding of HTML before going to this CSS tutorial series.

Audience

This tutorial is designed and developed to all those CSS lover, who wants to learn CSS as beginner or advance. As here we have included a lot of CSS code to get more and more idea about it.

You feel free to get all the codes given in this tutorial series to develope some design to your website.

Prerequisites

Before start learning CSS, you must have some prior knowledge about HTML as told earlier. Because CSS is used to design HTML elements, therefore you must have some idea about what the HTML or any other in it, is. Otherwise, if you have already some idea about HTML, then you can proceed to learn CSS.

« fresherearth Home Next Tutorial »