The websites developed in html often have a specific layout. A layout is basically how the text or content is arranged in the website. To design a layout we need to use CSS and HTML Blocks. Now i haven’t started with my CSS tutorials and if you don’t know CSS then don’t worry. We aren’t going to go in deep with CSS. However i am going to use inline CSS in the HTML Document.
Inline CSS is achieved by using style attribute for HTML tags. Lets understand with the help of an example.
If i want to write a statement. I will use the <p> tag.
<p> Hello World, I am about to learn Inline CSS </p>
The above example would result into a simple text on the web page. But if i want to add style, such as background to it without using internal or external CSS then i will use inline CSS as follows:
<p style="background: #00ff00" >Hello World, I am about to learn Inline CSS </p>
And it would result into a text with a green background.
Inline CSS Background Property and Hex Color code
Now let me explain the code, First we used style attribute. And style attribute has more properties like background. So we set the background to #00ff00. Now if you are a total beginner then this might scare you. But actually its very simple. The code #00ff00 gives the value of the color. This is called as hex color code. Hex means 6.
The hex color code #00ff00 has 6 places. The color code is basically #RGB which means first two places are for red, next two places are for green, and next two are for blue. In this case we used #00ff00. We set red as 00, green as ff, blue as 00. So the color turns out to be green. Because f is highest value while 0 is lowest value. In our code only green has highest value. And red, blue has zero value.
HTML Blocks – Division Tag
Now lets move on to html <div> tag. Division tags helps us to set up blocks in html. This will in turn help us to create a HTML Layout. But first let us create few blocks using div tag.
Consider this code
<div style="padding: 10px; background: #000000;"> <div style="padding: 10px; background: #cccccc;"> <div style="padding: 10px; background: #00ccff;"> <div style="padding: 10px; background: #ff0000;"> <div style="padding: 10px; background: #00ff00;"> <div style="padding: 10px; background: #ffffff;"> Hello World </div> </div> </div> </div> </div> </div>
So you can see in the result, we have a colorful box and inside it we have Hello World text.
Lets understand the code given above from the most inner division tag. The most inner division tag gives the background as white and has text Hello World. But it also has padding 5 pixels. Which simply means that there will be 5 pixel of space left from top, right, bottom and left. You can see the Hello World text has 5 pixel white space around it.
The most inner division tag <div> and </div> forms a HTML block. This block is inside several other HTML blocks which has different background colors. Try it yourself and you will find out that the outer block is of black background, next comes grey, blue, red, green and finally white block.
I have created a short video which will give you an idea on how to create basic layouts in HTML.
If you have any questions, feel free to comment below. Thanks !