Using The HTML’ < 'div '>‘ Tag In CSS

Tutorial # 8

The div tag is a generic way of adding structure to a html document. The most important thing to remember is that it is a block level element, which means you can’t use it with in a paragraph of text. Div creates a vertical spaces on either sides. It is important to note here, most of the browsers inserts an empty line before and after the div. Consider the following example

<div class=”bold”><p> <strong> Paragraph 1 </strong></p>

<p> <strong> Paragraph 2 </strong></p>

<p> <strong> Paragraph 3 </strong></p>

</div>

In the above a class is initialized in the div tag. There are some 3 paragraphs in the div opening and closing. Div is started using <div> tag and it is closed using </div> tag. Div represents an area occupied some where in web. To understand this more accurately see the following screenshot, the div area is highlighted by using the inspect element in the chrome just right click on the text area and select inspect element. Just like the one shown here…

inspect element

After inspect element you will see a menu like the one shown below. Just search for the starting div and click on the line of code. You will see the whole div will be highlighted.

inspect element-1

Now here you can see the starting div, I am going to click on the starting div of class bold. The result will be starting and ending area of the div will be highlighted by the browser.

DIV Tags

Now to understand the concepts of div tag, lets take a more complex example of div tags. I am going to use the code from the last tutorial.  This sample initial code.

<html>
<head><title> Tutorial # 6 Grouping selectors </title>
<style type=”text/css”>
<!–.blue {color:blue}
h1#red,p {color:red} –></style>
</head><body><h1 id=”red”> This is H1 Heading </h1><p class=”blue”> THis is first paragraph </p>

<p class=”blue”> This is 2nd paragrpah with <em>emphasized</em> word </p>

<p> This is 3rd paragraph and this with <em> new emphsized word </em> </p>
</body>

</html>

Here is its Output

css

See Real Time Output

See Output 1

Now lets say we wanted to is, first two paragraph have particular background color that the 3rd paragraph did not. One way we can can do that the since both the paragraph are appearing in the adjacent part of the page is by applying style to the div element. So by making changes to above code. I am making the following changes.

  • Enclosing first two paragraph in the div tag with initializing a class named top.
  • Also defining a CSS for making background color blue.
  • The changes are highlighted in color blue.
<html>
<head><title> Tutorial # 6 Grouping selectors </title>
<style type=”text/css”>
<!–.blue {color:blue}
h1#red,p {color:red}
.top { background-color:#E7F5FB}–></style>
</head><body><h1 id=”red”> This is H1 Heading </h1>
<div class=”top”><p class=”blue”> THis is first paragraph </p>

<p class=”blue”> This is 2nd paragrpah with <em>emphasized</em> word </p>

</div>

<p> This is 3rd paragraph and this with <em> new emphasized word </em> </p>
</body>

</html>

 See Real Time Output

See Output 2

background color

Now note that div tag is block level element. Div tag is doing the following things.

  • It is creating a vertical spacing above and below the paragraph, for example in the above image you can see there’s a vertical space between the Header H1 and first paragraph.
  • Its extending all the way across the horizontal page.

Now If I want to make first two paragraph bold Simple I will insert the CSS rule into the top class.

<html>
<head><title> Tutorial # 8 DIV tags </title>
<style type=”text/css”>
<!–.blue {color:blue}
h1#red,p {color:red}
.top {background-color:#E7F5FB;
font-weight: bold;
}–></style>
</head>

<body>

<h1 id=”red”> This is H1 Heading </h1>
<div class=”top”>

<p class=”blue”> THis is first paragraph </p>

<p class=”blue”> This is 2nd paragrpah with <em>emphasized</em> word </p>

</div>

<p> This is 3rd paragraph and this with <em> new emphsized word </em> </p>
</body>

</html>

 See Real Time Output

See Output 3

bold text

Now what if I extend the vertical length of div closing tag, that is by including the 3rd paragraph inside the div opening and closing tags

<html>
<head><title> Tutorial # 8 DIV tags </title>
<style type=”text/css”>
<!–.blue {color:blue}
h1#red,p {color:red}
.top {background-color:#E7F5FB;
font-weight: bold;
}–>

</style>
</head>

<body>

<h1 id=”red”> This is H1 Heading </h1>
<div class=”top”>

<p class=”blue”> THis is first paragraph </p>

<p class=”blue”> This is 2nd paragrpah with <em>emphasized</em> word </p>

 

<p> This is 3rd paragraph and this with <em> new emphsized word </em> </p>

</div>

</body>

</html>

 See Real Time Output

See Output 4

DIV Tags scope

See Tutorial # 7

See Tutorial # 9

5 thoughts on “Using The HTML’ < 'div '>‘ Tag In CSS”

  1. I think this is one of the most significant info for me.
    And i am glad reading your article. But should remark on few general things, The website
    style is perfect, the articles is really great : D. Good job, cheers

    My web site :: help skin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>