×

Html & Html5

The World's best Software Development Study Portal

Syntax Of CSS



A CSS syntax always consist of selector (HTML element) and declaration:block;
For example:-

                      h1   {color:red;  }


  • here h1 is known as the selector.
  • our declaration box is inside "{ }"
  • here 'color' is the property and 'red' its value.
  • than again 'font-size' is the property and '20px' its value.
  • here " ; " is used to end up any property and its value.


So like this in CSS we have to select the selector or the element in which we want to style first. than we have to create any declaration box where we will be assigning property and it's value to the particular element.







Types of selectors



Here in CSS we can choose the element on the basis of their element name , id , class, attribute and etc.




Element selector :- it just selects the element on the name of element itself.



Let's understand this by the following program :-
<html>

<head>

<style>

p{ color:red; font-size:40px; } </style>

</head>

<body>

<p> Let's see here </p>

<p> I am Manish Singh Bhakuni </p>

</body>

</html>

Output of the program



Let's see here

I am Manish Singh Bhakuni


So here through the element selector 'p' we just give colors to both of our paragraph.




id selector :- it just use the id attribute in HTML element, which must be unique in a page and than by typing that id name following by '#' we can give the styling .



Let's understand this by the following program :-
<html>

<head>

<style>

#main{ color:red; font-size:20px; } </style>

</head>

<body>

<h3> Let's see here </h3>

<p id="main"> I am Manish Singh Bhakuni </p>

</body>

</html>

Output of the program



Let's see here

I am Manish Singh Bhakuni


So here through the id selector 'main' we just give colors to our paragraph.




class selector :- it just use the class attribute in HTML element, which must be in a page and than by selecting that class name following by '.' we can give the styling .



Let's understand this by the following program :-
<html>

<head>

<style>

.center{ color:red; font-size:40px; } </style>

</head>

<body>

<p class="center"> I am Manish Singh Bhakuni </p>

</body>

</html>

Output of the program



I am Manish Singh Bhakuni


So here through the class selector 'center' we just give color and change the font size.










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