Selecting HTML elements in CSS

Selecting html elements

So lets look at how to target a specific html element to your style sheet from your html document. Think, you want to style all the <div> elements in your html document. you can select all the <div> elements by simply typing this in your style sheet.

div {
       /*inside this curly brackets you can style all <div> elements*/
}

here you can see i've used /* */ around the text. This is how we should comment in CSS. the comment should go inside the /* and */.

now lets look at another method of how to select a specific element in your html document. So if you want select a specific <div> element in your html document first you should declare an ID inside that <div> element

this is an example code of that,

<div id="selector">this is the text inside the div</div>

So as you can see I've declared a id inside the <div> element. so by this code we can select that specific <div> in the style sheet.

#selector {
      /*styling should do here */
}

So think that if you want to select bunch of element once, you can do that by declaring a class inside that element which you want to select, like this,

<h1 class="selector">header</h1>
<p class="selector">paragraph</p>
<div class="selector">content</div>

So if you want select all these element at once and give them a color of red, you can do that by this css code.

.selector {
     color: red;
}

So now lets look at some example codes

This is the .html code



this is the .css code



this is the output which you get from all of above codes.



So this is all for this lesson. I will talk more about css in future. keep in touch with me.