Element Types In Basic CSS and HTML

Tutorial # 7

Well before proceeding towards new concepts, it’s very important to discuss about element types that exist in CSS and HTML. There exist two types of elements, one is block level element and the other one is inline level element.

Block Level Element

Block level elements are layered vertically one after the other. In the manner like

<p> block

<p> block

Common examples of block level elements are paragraphs and HI, H2 headers. Whenever you create a new paragraph, you expected to come after the previous paragraph. But for each new <p> tag, A new vertical spacing is created. Just like in the above example.

Inline Level Elements

While Inline level elements are layered out in a horizontal manner. Like the one shown

< em > element , < b > element

In the above example the bold element is coming after an emphasized text element you wouldn’t expect any new vertical space unless it would be end of the line or something.

An element is block or inline this is controlled by using DISPLAY PROPERTY. Now lets explore display Property. This is code from the previous tutorial. In this code we are displaying some lines which are vertically separated.

<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>

See Output 1

block elements

Now what I am going to do is change above paragraph’s into inline instead of block level elements. To do this we have to specify a new selector.

<html>
<head><title> Tutorial # 6 Grouping selectors </title>
<style type=”text/css”>
<!–.blue {color:blue}
h1#red,p {color:red}P {display:inline}–></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>

See Output 2

inline elements

So by using this line of code ( P {display:inline} ) , The paragraphs display property is set to inline instead of block level. The above screen shows the results of using display property clearly and accurately.

Now for example if you want to hide any paragraph’s or heading, just according to requirements, then the same display property is used. So just for fun we are going to hide Header H1. Let see in the code what happens.

<html>
<head><title> Tutorial # 6 Grouping selectors </title>
<style type=”text/css”>
<!–.blue {color:blue}
h1#red,p {color:red}h1 {display:none}P {display:inline}–></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>

See Output 3

display none property

See Tutorial#6

See Tutorial#8

3 thoughts on “Element Types In Basic CSS and HTML”

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>