CSS Style Divs Classes

HTML Divs and Classes Style CSS:

CSS Style Divs Classes: Before we actually begin to learn and implement our CSS styles to different HTML elements and entities, we must understand the difference between HTML Divs and Classes and their scope both within HTML docs as well as in CSS documents. 

Difference between Divs and Classes in HTML: 

  • A “div” is meant for a segment in HTML document. 
  • Every div is a separate entity in HTML.
  • A class is meant to reproduce the same styling in different segments of the web documents.
  • A div must not be repeated or duplicate; a class is meant to be duplicate to avoid styling efforts.
  • While styling a document segment separated by “div”, we use “#” for the styles. An example is placed below:

HTML Div:

<div id = “test”>

<p> My first CSS Lessons</p>

</div>

CSS styling of this HTML Div:

#test{backroundcolor:blue;color:pink;float:left;}

 

Example of styling a document with class: 

HTML Class:

<div id“test”>

<p class=”number1″> My 1st HTML Class</p>

<p class=”number2″> My 2nd HTML Class</p>

</div>

 CSS handling of an HTML Class:

Unlike divs, for a class . is used instead of #

.number1{align:right;color:pink;font: blue;}

 

If you like the content, do share us on social media. 

 

 

 

 

Leave a Reply