-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss-units-blog.html
150 lines (150 loc) · 6.11 KB
/
css-units-blog.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- CDN for line icons -->
<link href="https://cdn.lineicons.com/3.0/lineicons.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<title>CSS Units | Blog</title>
</head>
<body>
<nav class="navigation container">
<a class="link nav-brand" href="index.html"> Prabhjot Kalsi</a>
<ul class="list-non-bullet nav-pills">
<li class="list-item-inline">
<a class="link" href="index.html"
><i class="lni lni-home"></i> Home</a
>
</li>
<li class="list-item-inline">
<a class="link" href="blogs.html"
><i class="lni lni-popup"></i> Blogs</a
>
</li>
</ul>
</nav>
<header class="hero">
<h1 class="hero-subheading">Basics of CSS Units</h1>
<h2 class="hero-heading">Progressive Web Application</h2>
</header>
<div class="container container-center">
<article>
<h2 id="units-in-css">Units in CSS</h2>
<p>
In our daily lives, we use units to measure a variety of things, such
as length, volume, and mass. And there are numerous ways to measure
them, which are referred to as <span class="blog-highlight">units</span>. In CSS, multiple
units are used to measure the dimensions of many Element properties
such as padding, border thickness, width, and so on. Below is the
description of how units can be used with the compatible CSS property.
</p>
<pre class="code-example"><code><span>css-query-selector</span>
{
<span>width</span>:<span>8px</span>;
}
</code>
</pre>
<p>
In the code above, I have used <span class="blog-highlight">px</span>(pixel) which is one of
the most commonly used CSS units.
</p>
<h2 id="types-of-units">Types of Units</h2>
<p>Units in CSS are divided into two parts</p>
<ol>
<li>Absolute</li>
<li>Relative</li>
</ol>
<p>
<strong>Absolute</strong> units are like the selfish kids in the family who
don't care about their surroundings, or in technical terms, those who
don't care about the window size or parent elements. Types of Absolute
Units:
<span class="blog-highlight">cm</span
>,<span class="blog-highlight">mm</span>,
<span class="blog-highlight">Q</span>,
<span class="blog-highlight">in</span>,
<span class="blog-highlight">pc</span>,
<span class="blog-highlight">pt</span>,
and <span class="blog-highlight">px</span>.
</p>
<p>
<span class="blog-highlight">px</span> is the only widely used absolute unit. I never had to
use other absolute units in my one and a half years as a front-end
developer. The majority of these other units are used for printing
output on paper rather than for screens/devices.
</p>
<p>
<strong>Relative</strong> units are concerned about their parents and
siblings; in technical terms, they are relative to other length
properties such as the parent element's font size, or viewport size.
Using these units makes the life of a front-end developer easier.
</p>
<blockquote>
<p>
Knowing these units and when and why to use the particular relative
units can decrease your stress levels and frustrations.
</p>
</blockquote>
<p>
Types of Relative units :
<span class="blog-highlight">em</span
>,<span class="blog-highlight">ex</span>,<span class="blog-highlight">ch</span>,<span class="blog-highlight">rem</span>,
<span class="blog-highlight">vw</span>,<span class="blog-highlight">vh</span>,<span class="blog-highlight">vmin</span>,<span class="blog-highlight">vmax</span>,
and <span class="blog-highlight">%</span>.
</p>
<p>
These units are all related to various properties, elements, and
conditions. <span class="blog-highlight">%</span> refers to the parent element, whereas
<span class="blog-highlight">rem</span> refers to the root element's font size.
<span class="blog-highlight">vw</span> refers to the width of the viewport, while
<span class="blog-highlight">vh</span> refers to the height of the viewport. Another
important and widely used relative unit is <span class="blog-highlight">em</span>, which is a
multiple of the element's font size and is relative to it.
</p>
<p>
To read more about this, check out these links:
<a target="_blank" class="link blog-link"
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages"
>MDN Docs- Values and Units</a
>
</p>
</article>
</div>
<footer class="footer">
<p class="footer-header">We can connect on:</p>
<ul class="social-links list-non-bullet">
<li class="list-item-inline">
<a
class="link"
title="github"
target="_blank"
href="https://github.com/PsKalsi19"
><i class="lni lni-github-original"></i
></a>
</li>
|
<li class="list-item-inline">
<a
class="link"
title="linkedIn"
target="_blank"
href="https://www.linkedin.com/in/prabhjot-kalsi-8390a6240/"
><i class="lni lni-linkedin-original"></i
></a>
</li>
|
<li class="list-item-inline">
<a
class="link"
title="twitter"
target="_blank"
href="https://twitter.com/kalamaurcode"
><i class="lni lni-twitter-filled"></i
></a>
</li>
</ul>
</footer>
</body>
</html>