CSS-Introduction

Definition

CSS stands for  that used to format the layout of the webpages. It describes how HTML elements are to be displayed on screen. It saves our work as it controls multiple webpage at once and to create a uniform look.

H1 {color: red; font size:10px;}

H1 : selector, HTML element which we want to style.

color: property                  font-size: property

red: value                            10px : value

p {
text-align: center;
color: red;
}

Types of CSS

There are three ways to insert CSS

css

External Style Sheet

We can just change the look of an entire website by changing just one file. And each page must include a reference to the external style sheet file inside the <link> element.

For HTML

<head>

<link rel= “stylesheet” type= “text / css” href= “test.css”>

</head>

<body>

<h1>Hello World</h1>

<h2>this is a test message</h2>

</body>

</html>

It must be saved in .css extension

Test.css

Body

{background-color:blue;

}

H1{

Color:red;

Margin-left:14px;

}

Internal Style Sheet

It is used in one single page with <style>.

Ex

<html>

<head>

<style>

body {

background-color: lime;

}

h1 {

color: blue;

margin-left: 20px;

}

</style>

</head>

<body>

<h1>Hello World</h1>

<h2>This is a test message</h2>

</body>

</html>

Inline Style

It is used to apply unique style for single document.

<!DOCTYPE html>

<html>

<body>

<h1 style=”color:red;margin-left:20px;”>Hello World</h1>

<h2>This is a paragraph</h2>

</body>

</html>