1. Introduction
2. Basic knowledge
3. Seeing through the backdoor
3.1 HTML elements
3.2 CSS defaults
3.3 Display Property
3.4 Display attributes
4. Conclusions
1. Introduction:
Learning HTML and CSS is the common door for people who want to become a web developer. Many of them start from zero and have no programming knowledge at all. Others have some coding experience. I had a programmer background when I started learning HTML but had no idea about this new world. Going through tutorials helped me memorize some properties and styling the elements.
While I was learning people were struggling to display or position HTML elements. We were all trying to, but we didn't knew which property will do the job and we'd try them one by one until we found the one. HTML and CSS can be very confusing if you don't get the real core of it, what do I mean by "Get the real core of it"? Actually what I mean is to undress the structure itself, to see what happens behind the curtains.
This will change the rest of your journey with HTML and CSS. It'll make you faster at coding and you'll easily find out how to position elements on a web page. You'll even find out how did elements were positioned in other web pages just by looking at it.
2. Basic Knowledge:
There are 3 main things I'd like to address here so you can see what I'm talking about. These 3 main qualities will get you to understand how things run in the background of HTML and CSS. Before getting into it, please make sure you already know how to create HTML documents and to apply styling to its elements. If you don't know how to create HTML documents and to add styling to its elements, please go to freecodecamp.org and complete the basic tutorials.
3. Seeing Through The Backdoor Of HTML And CSS:
As I said before there are 3 main things you should be aware of while learning HTML and CSS. The main thing you should understand is the way an HTML document is filled. What do I mean by this? What I mean is that the document will be filled out with the elements you add to it. But they certainly won't be positioned as you expected.
3.1 Filling The Body Of The HTML Document
Once you understand that the document will be filled from left to right, from top to bottom. You'll know that the HTML body works like a container on which elements will be added one next to the other, from left to right (depending on their display property). Once the line has been filled, the next element will go to the first space of the next line, this will be repeated as a new line is required. An HTML document can be filled 100% in width but not in height, otherwise, you wouldn't be able to scroll up or down and the page would be limited in vertical space.
Imagine 5 division elements, all of them were set with width and height of 50px, how would they look on the page? Try it yourself! Were you expecting them to be under one line instead of one column? It seems like is not filling the page as I told you before, right? This is because divisions have a display default value to block. Even if the width was bnh to 50px it'll occupy the whole line, limiting its content to 50px. This is because you have set a 50px width and the previous division is a block and it needs to fill his line completely.
Note: The body needs to be set first, set the width to 100% and the height to 1000px. This way you can work inside this container.
3.2 CSS Defaults
You need to know that CSS defaults are applied to the elements by the browser, What does this mean? It means that if the browser doesn't apply the defaults to the HTML elements they would all be the same. Divisions, anchors, forms, paragraphs, all of them would be the same. This means that basic elements like divisions, anchors, and all of them would load as an element with no value within its properties and they would look all the same. Being aware of this will let you understand that you don't need to overthink which elements to use.
3.3 Display Property
Displaying and positioning are 2 things must of us struggle with. Knowing the 2 main things I mentioned before will make it easier for you to position elements any way you want. But the real deal is in the display property. The display property will change the behavior of the element positioning and display. Remember the defaults I mentioned before? Yeah! The display property is already set to a value on all HTML elements, so they will be displayed as the default value dictates.
The default value for division elements is "block", this means it will occupy the whole width of a line. Remember the divisions we added before? You can make them show in a row just by changing the display property on each! Give it a try with the inline-block value. Do you see it now? Divisions are shown in a row instead of a column. Now try this: Box 1 - block, Box 2 - inline, Box 3 - inline, Box 4 - block, Box 5 - Inline-block. The display property can be set to other values like flex, inline-flex, inline-table, etc.
Your code should look like this:
HTML:
html lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="box1 size">Box 1</div>
<div class="box2 size">Box 2</div>
<div class="box3 size">Box 3</div>
<div class="box4 size ">Box 4</div>
<div class="box5 size display">Box 5</div>
</body>
</html>CSS:
body{
width: 100%;
background-color: gray;
height: 1000px;
}
.box1{
display: block;
background-color: blue;
}
.box2{
display: inline;
background-color: yellow;
}
.box3{
display: inline;
background-color: red;
}
.box4{
display: block;
background-color: green;
}
.box5{
background-color: orange;
}
.size{
width: 50px;
height: 50px;
}
.display{
display: ;
}3.4 Display attributes
Last but not least, I wanted to add that there are properties that are specific for a type of display value.
This means that when you set a display value to an element, you can address it with some specific properties like the flex display value for example. The Flex display value can only be "handled" by properties like: align-content, justify-content, align-items, flex-direction. Setting a different display value will make you change the way you are "addressing" to it.
Conclusions:
Putting these 3 main things together expands your notion of positioning and displaying of HTML elements and now you can easily accommodate elements by:
- Knowing how the page is going to be filled, depending on the display property of the element itself.
- Determinate what display value works the best for the element you are adding to your layout.
- Knowing some CSS defaults were loaded to the element you just added, you can try to override the default value to position better your element.
- Using the correct properties for each display value.
Now you can go ahead and try exploring a website, pick an element on that web page, and ask yourself...How could I position that element the same way they did? If you are having some ideas go ahead and try them! Even if they don't look the same, you could use only the container with some borders!