Introduction to CSS
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
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
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
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 :
