CSS Basics Series: The Box-Model
In this series we go over the fundamentals of CSS. This tutorial is aimed jr. developers who are just starting out or need a quick refresher!
What is CSS?
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media using the Box-Model
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS files
So, what is the Box-Model?
‘The box model impacts the presentation of each HTML element. Every element in HTML can be considered a rectangular box.’ — Team Treehouse
The Box Model is made up of 4 distinct parts:
- Content — Size is determined by the amount of element text
- Padding — creates space inside the box. Space between content and border.
- Border — hidden by default. Can adjust width with CSS.
- Margin — exists outside of the box. Represents space around the border.
p {
font-size: 12px;
padding: 10px 20px 10px 20px;
border: red 1px solid;
margin: 10px 20px;
}In the example above, the size of all four parts of the box model are declared.
You may notice there are 4 values for the padding. You read these clockwise. So in this example, the padding of the paragraph will be 10 pixels for the top, 20pixels of space on the right, 10pixels of space on the bottom, and 20 pixels for the left side.
This should be shortened to be:
p{
font-size: 12px;
padding: 10px 20px;
border: red 1px solid;
margin: 10px 20px;
}^^^When there are only 2 values: the first value represents the top & bottom, while the second value represents the left and right.
p{
font-size: 12px;
padding: 10 20px;
border: red 1px solid;
margin: 10px;
}^^^Similarly, when there is just a single value… this means there is an equal amount of margin on all 4 sides of the box, equal to the value set. These rules are applicable to both padding and margin.
The border, non-visible by default, will be shown around the p tag as a 1px, solid red line in this example.
Congratulations! You now understand the basics of the CSS box-model. Hopefully this helps some junior web developers out there. Follow me for weekly CSS tutorials!
Sources:
Connect with me on LinkedIn: https://www.linkedin.com/in/eric-christine/
Check out my projects: https://eric-christine.web.app/
Improve your web development skills daily on TeamTreehouse or FreeCodeCamp
