Most useful HTML elements all Blogspot and WordPress Bloggers should know #Tutorial Part2 – div Element

On the first part of this Tutorial we have discussed on various attributes of span element and have seen examples over that! You can access the tutorials from here.

Now today we shall see a more advanced HTML element called

2. div element:

Let us first take a look at the following example.

Hello how are you

We have designed the above HTML code with the help of div element which we are going to discuss
Here is the main code template of this element:

<div style=“border: 2px inset HEXCODE; padding: 2px 3px 0px 0px; background: HEXCODE none repeat; width: 80%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; font-size: 9pt; color: HEXCODE; font-family: Comic Sans MS; margin-left: 20px; margin-right: 20px; text-decoration: blink; text-align: center;”>YOUR TEXT HERE</div>

The modifications of red highlighted color codes are already included under the tutorial of span element. So we shall directly see our newer and advanced modifications which we can do

• style=” ” : In between the quoted section different style elements are defined. Read below to learn the style definitions.
• YOUR TEXT HERE: This will be the out put of the text. Means that HTML modifications will get applied over these texts
• HEXCODE: Obviously you need to replace this with hex color code which you can generate from here. For example #45B4DA or #B1DAB6
• Attibute Name: Attribute value: You should not change the Attribute name and work with the attribute values only. Here is the list of Attribute names and their respective values
1. border: 2px inset HEXCODE: It sets the style of the border in the following order> border: border-width border-style border-color.
   • You can set any value of border width in px unit like border: 4px.
   • The possible border styles are none / double / dashed / dotted / groove / inset / outset / ridge . Explore through them to learn more. For example border: 4px ridge;
   • Obviously you need to replace the HEXCODE with the code you prefer.
2. padding: 2px 3px 0px 0px : Its is the space left on respective direction of texts. The directions are on the order of
   padding: top▲ right► bottom▼ left◄.
   So on this code for top the text will leave 2px height and another 3px space for right. For bottom and left it wont leave any space. Change the value to what ever that suits you

3. background: HEXCODE none repeat : This sets the color and background image [if any] for the div element.
   • Replace HEXCODE the with the one you like.
   • Leave none as it is if you dont want any background image. Else change it to url(Direct_Image_URL) and that image will get set over the background.
   • repeat is for repeating the image. Leave the value to repeat on both x and y direction. Whereas change it to repeat-x and repeat-y for x AND y respectively.

   For example background: #000000 url(mypic.jpg) repeat-x;

4. width: 80% : It sets the width of the background. You can either have the units in %-age or in pixel.
   For example width: 500px;

5. margin-left: 20px; AND margin-right: 20px : The name says it all! It leaves given amount of margin on left and right. You can either set pixel amount or %-age.
   For example margin-left: 10%;
   NOTE: You can also add margin-top: and margin-bottom: if you want

6. text-align: center : Defines the alignment of text. Possible values are left (Default) , right , center and justify .
   For example text-align: justify;

That’s all! It was not that tough isnt it. Here is the code of the above shown example to clear up your concept >

<div style=”border: 2px inset #011A35; padding: 2px 3px; background: #DEEBFF none repeat scroll; width: 400px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial; font-size: 9pt; color: #012416; font-family: Comic Sans MS; margin-left: 20px; margin-right: 20px; text-decoration: blink; text-align: center;”>YOUR TEXT</div>

That’s it for today! If you have any problem do discuss through the comments. On the next and last section of this tutorial we shall focus on some useful and miscellaneous HTML codes