codescracker


css

CSS Tutorial



« CodesCracker Home Next 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:

A Simple CSS Example

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 codescracker.com</p>

<h2>CSS Tutorial</h2>
<p>This is CSS Tutorial at codescracker.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:

css tutorial

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 codescracker.com</p>

<h2>CSS Tutorial</h2>
<p>This is CSS Tutorial at codescracker.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:

learn css

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. This tutorial is divided into these parts:

CSS Basics Tutorial
Homepage of CSS Tutorial Syntax of CSS
Selectors in CSS Inclusion of CSS in HTML
Inheritance in CSS Colors Names and Codes in CSS
Image Handling using CSS Change Fonts using CSS
Style Texts using CSS
CSS Background Tutorial
Set Backgrounds using CSS Set Background Color using CSS
Set Background Image using CSS Set Background Repeat using CSS
Set Background Attachment using CSS Set Background Position using CSS
Set Background Origin using CSS Set Background Size using CSS
Set Background Quantity using CSS Set Background Spacing using CSS
Set Background using CSS Background Shorthand
CSS Border Tutorial
Set Border using CSS Set Border Width using CSS
Set Border Color using CSS Set Border Style using CSS
Set Border Radius using CSS Set Border Image using CSS
Set Border using CSS Border Shorthand
CSS Box, Dimensions, Padding, Margin, Float Tutorial
Box Model in CSS Set Dimensions using CSS
Set Padding using CSS Set Outline using CSS
Set Margin using CSS Set Width and Height using CSS
Set Box Float using CSS Set Content Overflow using CSS
Set Rotate Box using CSS Multi Column Model in CSS
CSS Display, Position, Float, and Align Tutorial
Set Display using CSS Set Position using CSS
Set Float using CSS Set Align using CSS
CSS Lists, Links, and Navigation Bar Tutorial
Create Lists using CSS Set List Style Type using CSS
Set List Style Image using CSS Set List Style Position using CSS
Set List Style using CSS List Style Shorthand Create Links using CSS
Create Navigation Bar using CSS Attribute Selectors in CSS
CSS Tables Tutorial
Style Tables using CSS Create Table Layout using CSS
Caption Side using CSS Collapse Table Border using CSS
Create Table Border Spacing using CSS Create Table Empty Cells using CSS
CSS Pseudo-Classes and Pseudo-Elements Tutorial
Pseudo-Classes in CSS Anchor Pseudo-Class in CSS
Target Pseudo-Class in CSS Language Pseudo-Class in CSS
Structural Pseudo-Class in CSS Negation Pseudo-Class in CSS
Pseudo-Elements in CSS
CSS Frames and Controls Tutorial
Create Frames using CSS Set Controls using CSS
CSS3 Basics Tutorial
Homepage of CSS3 Tutorial Combinators in CSS3
Create Background Clip using CSS3 Create Gradients using CSS3
Create Marquee using CSS3 Line Box Model in CSS3
Template Layout Model in CSS3 UI Pseudo-Classes in CSS3
CSS3 Shadows Tutorial
Create Text Shadow using CSS3 Create Box Shadow using CSS3
CSS3 Effects Tutorial
Create Effects using CSS3 Create Image Opacity using CSS3
Create Transitions using CSS3 Create Animations using CSS3
Create 2D Transform using CSS3 Create 3D Transform using CSS3

What to Learn before CSS ?

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


« CodesCracker Home Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test