All about CSS3 for Absolute Beginners: Part 4
Welcome back to the blog series, everyone! I hope you're making great progress in learning CSS. Let's continue our journey from borders.
Box Model in CSS
The box model consists of 3 major properties: margin, border and padding.
Padding in CSS
Padding is the area between the content and the border. To visualize, let's create a basic box and give it some margin, a border and write some content in it. It may look like this:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">best web apps in 2025</div>
</body>
</html>
Now with this setup, observe the box. Now add a padding equal to 10 pixels. Notice the difference.
Padding adds space around the content. The content, for example, is "best web apps in 2025" or anything else you wrote between the divs.
box-sizing property
After adding box model properties like margin, border and padding, the height and width of your box will obviously increase. But if you want to restrict the dimensions, then the box-sizing property is for you. It's quite convenient for staying consistent in building designs.
Set the property box-sizing to border-box for effect.
Now you can experiment by changing the values of height and width for an extra analysis of different behaviors.
Comments in CSS
Since you have a good idea of CSS, your code may need comments. To recall, comments are some text that is ignored by the computer. It is used to write little descriptions or notes about specific pieces of code. They make it easy for you and other developers to understand and analyze the code.
The syntax is a little different from HTML. You will put an asterisk and a slash to start and the same to end a comment. For example:
/* text here will be considered a comment */
You can also have multi-line comments by pressing the enter key.
/*
This is a multi-line comment.
*/
When to use comments?
You should not use comments for code that is basic and self-explanatory. Comments are generally used for code that is complex and might cause confusion. You can also state reasons behind writing specific lines of code. It is preferred to write about "why" instead of "what.". For example, why I wrote this line of code, instead of saying, what is this line of code?
However, when you're practicing on a personal project, you can use comments in whatever way you feel comfortable.
Positions in CSS
Position Relative in CSS
Sometimes, you may want to adjust the position of an element, such as moving it 25 pixels to the left from its original position or 40 pixels from the bottom. CSS allows you to control such adjustments by setting an element's position relative to its current placement. This means the element remains in the normal document flow while shifting according to the specified values.
Let's test it by creating a box using a div tag and applying some basic styling for better visualization:
.box {
width: 300px;
background-color: lightblue;
padding: 20px;
margin: 20px;
position: relative;
}
Now you can see a nice box on your webpage. Since we've set position: relative;, we can now use the following four properties to move the element: top, bottom, left, and right.
Try adding left: 20px; and notice that the box shifts to the right. Experiment with different values to understand how relative positioning works.
Pseudo-class Hover in CSS
For an enhanced user experience, CSS provides the :hover pseudo-class, which applies styles only when the user hovers over an element. This is a handy feature to create interactive effects.
Here’s an example:
.box {
margin: 15px;
border: 7px solid blue;
}
.box:hover {
left: 25px;
background-color: lightcoral;
}
Now, when you hover over the box, it shifts to the right by 25 pixels, and the background color changes. Try experimenting with different properties to understand how :hover works.
Position Absolute in CSS
The position: absolute; property can seem tricky at first, but with consistent practice, you will be able to use it effectively to create dropdown menus, sidebars, modals, and more.
Absolute positioning removes an element from the normal document flow and positions it relative to the nearest positioned ancestor. If no such ancestor exists, it positions relative to the <body> tag by default.
Consider the following example:
<div class="big-box">
<div class="small-box"></div>
</div>
In this case, the .big-box is the nearest positioned ancestor for .small-box.
Here’s the CSS to visualize how absolute positioning works:
.big-box {
width: 200px;
height: 200px;
background-color: lightblue;
border: 1px solid black;
padding: 10px;
}
.small-box {
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: coral;
border: 1px solid black;
}
With this code, the .small-box will be positioned 20 pixels from the top and left inside the .big-box, overlapping it.
Wrapping up
Some positioning concepts may seem challenging at first, but with consistent practice, you'll realize they provide greater control over design and layout.
Thanks for reading the blog! If you have any questions, feel free to leave a comment or contact me via the Contact Us page. I'll be happy to assist you.