All about CSS3 for Absolute Beginners: Part 7
Hi everyone. I hope you're enjoying CSS and are curious to learn more. Let's continue our journey from color models onwards.
Block and Inline Elements in CSS
To recall what we learned in the HTML series, block elements always take up the full available width of the webpage, forcing other tags to come on a new line.
Inline elements take as much width as they need. Other elements are not forced to start on a new line and they can fit on the same line if there's sufficient space available.
However, width and height properties cannot be applied to inline elements. Their width and height are measured according to the content in them.
Inline-block Elements
These elements behave both like block and inline elements. In terms of setting height and width, they behave as block elements and allow them. But when taking up width, they behave like inline elements and only take up as much width as they need.
There are no inline-block elements by default in HTML. However, you can take an element and make it an inline-block element with the help of CSS. Here is how to do it:
span {
display: inline-block;
}
I chose span to give inline-block in this example. You can choose any element you want to test.
CSS allows you to change an element's display property between block, inline, and inline-block. Just put display equals block or inline for effect.
Measurement Units in CSS
So far, we have been using pixels to set dimensions for our elements. CSS is not only limited to pixels but provides us several more units for convenience and different use cases. Let's explore:
These units are divided into two main categories: absolute units and relative units.
Absolute Units in CSS
These units have a fixed value. The most used example is pixels. There are other absolute units as well, like inches, points, cm, and more, but they're very rare. You can try them if you want.
Relative Units in CSS
Relative units come in handy when crafting responsive designs. A responsive design means that your webpage responds to different screen sizes.
Let's say your website is open on a 6.5-inch mobile phone, a 12-inch tablet, a 16-inch laptop and a 32-inch TV. In this case, the screen sizes are varying significantly in size. You need to adjust your website according to different screen sizes.
Here relative units and media queries are most effective. We will study media queries later in the series.
There is a variety of relative units; let's have a look at each one by one:
Percentage Unit
By giving a width of some percentage, you mean to take up a width equal to that of the parent element. For example, there is a container box and a small box inside that, like this:
<div class="big-box">
<div class="small-box"></div>
</div>
CSS
.big-box {
By 50% and 25% height and width, we mean that the small box should have a height equal to 50% of the height of the parent and a width 25% of the parent's width.
In this case, the big box has a height of 300 pixels. It's 50% will be 150 pixels. So 150 pixels will be the height of the small box. Calculate width on your own.
Em and rem units in CSS
These are used for font sizes. The em will calculate font size equal to the parent element and rem would calculate with the default HTML font size.
Let's imagine we have two boxes, the small box inside the big box, exactly like the previous example.
.big-box {
In this example, the small box will have a font size double the font size of its parent, i.e., 20 pixels. If you added 4em then it would have 4 times the font size of the parent.
In rem, the font size is calculated based on the font size of the HTML tag. If the HTML tag has a font size of 24 pixels, then 2 rem would result in a 48-pixel font size. You can change the font size of an HTML tag by simply targeting it with a tag selector like this:
html {
font-size: 24px;
}
Viewport Height and Width Units in CSS
This depends on the size of your screen. If your screen is 1000 pixels in height then 100 viewport height will equal to 1000 pixels of height. The same is the case for width.
This is really useful when you want your webpage to adjust itself according to the screen's dimensions in which it's open. It's a reliable option to ensure that your webpage doesn't break on different screen sizes. Here is a quick example:
.big-box {
In this case, the big box will only take up 20% of the viewport's height and 30% of its width.
Wrapping up
In this blog, we also had an introduction to responsive design which is a fundamental today. We have covered relative units, and next, we will dive into media queries. Soon we will study this and you will be the master of responsive design.
That's it for today. If you have any questions or want to share your thoughts, drop a comment or reach out via the Contact Us page!