Intriduction to CSS and Selectors

Introduction to CSS :

CSS is Cascading Style Sheet used to design any webpage. CSS is very powerful we can literally design anything with CSS. But since we're starting with basics, we won't go that much in-depth.

Let's begin with CSS Selectors which is our 1st topic.

CSS Selectors :

CSS Selectors are simply used to select a specific element in HTML. For example, if we want the colour of the Paragraph in green so with the help of CSS Selectors we can simply make it green using CSS Selectors.

You might be wondering how many Selectors are there, so let's discuss the types of selectors.

1. Universal Selector :

   So what happens is by default our browser has some styling like margin & padding. In order to select everything on a webpage, we use Universal Selector.

   Syntax :

   *{

   padding: 0px;

   }

   Let me just show you an example of a Before and After Universal Selector.

• Before Using Universal Selector :

  

  If you see above there's a space in left and above of Heading. As we haven't used any Selectors.

• After Using Universal Selector :

  

  If you see in the above Image after making margin 0 in Universal Selector all the extra margin which was by default is gone.

1. Individual Selector :

Individual Selectors are used to target a specific element in complete HTML page. It will target that element in whole everywhere it's being used.

For Example :

p {

color : green ;

}

Now what will happen it will make color of all paragraphs Green. Lemme share you the example of Individual Selector.

Example of Individual Selector :

If you see in above Image, all the paragraphs are green.

1. CSS Class and ID Selectors :

Basically in this we use our Class and ID in order to change the style of an element. Let's say if we don't want all Paragraphs in Green colour and want only 1 paragraph in Green. We can do that using Class or ID.

Using Class :

This is how we can do that using class selector.

Using ID Selector :