×

Html & Html5

The World's best Software Development Study Portal

CSS3

Introduction to CSS


CSS selectors


IN CSS there are several types of selectors by which we can give styling to our HTML elements. Through these selectors we can choose our HTML elements and give them styling as we want.
Some of these selectors are as follows :-

  • CSS element selector
  • CSS Id selector
  • CSS Class selector
  • CSS Group selector
  • CSS Universal selector

Let's talk about these selectors one by one :-


Element selector


Here through selecting particular element we can give style to that particular element

Let's understand this by the following program :-

<!DOCTYPE html>

<html>

<head>

<style>

p { text-align: center;

color: blue;

}

</style>

</head>

< body>

<p> My name is Manish Singh Bhakuni </p>

<p> And I am a good boy </p>

</body>

</html>

Output of the program


My name is Manish Singh Bhakuni

And I am a good boy


So we can see the changes here by just giving styling through selecting the "p" element only.



Id selector


Here we just include id attribute in an HTML element and than through this id selector we can give styling to any element. And to select this selector we use the '#' followed by the id name. And the id name must be used once in one page.

Let's understand this by the following program :-

<!DOCTYPE html>

<html>

<head>

<style>

#demo { text-align: center;

color: blue;

}

#demo1 { text-align: right;

color: red;

} </style>

</head>

< body>

<p id="demo"> My name is Manish Singh Bhakuni </p>

<p id="demo1"> And I am a good boy </p>

</body>

</html>

Output of the program


My name is Manish Singh Bhakuni

And I am a good boy


So we can see the changes here by just giving styling using the id selector.



Class selector


Here we just include class attribute in an HTML element and than through this class selector we can give styling to any element. And to select this selector we use the '.' followed by the class name. But we can use multiple times the same class name if in order to give the same styling to every elements.

Let's understand this by the following program :-

<!DOCTYPE html>

<html>

<head>

<style>

.demo { text-align: center;

color: blue;

}

</style>

</head>

< body>

<p class="demo"> My name is Manish Singh Bhakuni </p>

<p class="demo"> And I am a good boy </p>

</body>

</html>

Output of the program


My name is Manish Singh Bhakuni

And I am a good boy


So we can see the changes here by just giving the styling using the same demo class.



Group selector


If in case we want to provide the same styling to our different-different selectors than that time we can also select all the elements in which we want our styling and can separate them by commas and include the same styling.

Let's understand this by the following program :-

<!DOCTYPE html>

<html>

<head>

<style>

h1,p { text-align: center;

color: blue;

}

</style>

</head>

< body>

<h1> My name is Manish Singh Bhakuni </h1>

<p> And I am a good boy </p>

</body>

</html>

Output of the program


My name is Manish Singh Bhakuni

And I am a good boy


So we can see the changes here by giving both h1 and p element the same styling.



Universal selector


If we want to select all the elements of the webpage than we can use the universal selector which we use to denote by the '*' sign.

Let's understand this by the following program :-

<!DOCTYPE html>

<html>

<head>

<style>

*{ text-align: center;

color: blue;

}

</style>

</head>

< body>

<p> My name is Manish Singh Bhakuni </p>

<p> And I am a good boy </p>

</body>

</html>

Output of the program


My name is Manish Singh Bhakuni

And I am a good boy


Through this universal selector(*) we can give styling to every elements inside the body.







CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute