Introduction to CSS

Updated on: September 18, 2018
  • CSS stands for Cascading Style Sheet

  • CSS helps to give a design to HTML web page

  • It is used for giving a preferred layout to your HTML web page.

  • Using CSS you can change the text color, background color of the web page, change the display layout, change the font style displayed on the web page.

Versions of CSS

  1. Cascading Style Sheet 1 : CSS 1 released in December 1996, CSS 1 introduced features like text color, background color, alignment of text, margin, border, padding between the elements

  2. Cascading Style Sheet 2 : CSS 2 developed and published in May 1998, CSS 2 added features like positioning of elements such as fixed, relative, absolute and z-index and media specific style sheet e.g. printers, aural, speech media type

  3. Cascading Style Sheet 3 : CSS 3 drafts were published in June 1999.  CSS 3 is divided into several separate modules, each modules extends the features defined in CSS 2 but preserving the backward compatibility. CSS 3 introduced with lot of changes and it made easier for designers to handle entire document layout based on resolutions by using media queries. Following are the CSS 3 modules

  • Selectors

  • Box Model

  • Backgrounds and Borders

  • 2D / 3D Transformations

  • Text Effects

  • User Interface

  • Animations

  • Multiple Column Layout

  • Speech Module

  • Hyperlink Presentation

How to implement CSS

There are three ways to implement CSS

  • External Style Sheet

  • Internal Style Sheet

  • Inline Style

External Style Sheet :

With external style sheet, you can use a single CSS file to change the look and feel of entire website. You will have to add the link of this single CSS on each page.

<html>

<head>

<title>External Style Sheet Demo</title>

<link  rel="stylesheet" type="text/css" href="common.css">

</head>

<body>

<h1> My External Style Sheet Demo </h1>

<p> Paragraph on the web page </p>

</body>

</html>

Contents of common.css

body{

background-color:blue;

}

h1{

text-align:center;

}

p{

color:white;

}


Output of above html web page after implementing external stylesheet :

Internal Style Sheet : 

Internal style sheet is used to give styles to a single page, we can add internal style sheet to a web page by adding styles in <head> <style></style> </head> tag. following is the way to implement Internal Style Sheet

<html>

<head>

<title>External Style Sheet Demo</title>

<style>

body{

background-color:blue;

}

h1{

text-align:center;

}

p{

color:white;

}

</style>

</head>

<body>

<h1> My External Style Sheet Demo </h1>

<p> Paragraph on the web page </p>

</body>

</html>

Output of the above Internal Style Sheet html web page :


Inline Styles :

Inline Styles is used to give styles to a particular element. But it will apply only to the elements to which you are applying, that means if you have applied inline styles to first <p> tag on the web page, then it will not apply the same style to other <p> tag on the same web page.

Following is the way to implement Inline Styles:

<html>

<head>

<title>External Style Sheet Demo</title>

</head>

<body style="background-color:blue;">

<h1 style="text-align:center;"> My External Style Sheet Demo </h1>

<p style="color:white;"> first Paragraph </p>

<p> Second Paragraph <p>

</body>

</html>

Output of the above Inline Style html web page :