Changing the font size in CSS
buayaberdiri.blogspot.com - In HTML elements we need text such as letters and numbers or other characters to display website information to provide information that users or visitors can understand.
Sometimes the size of letters or numbers or other characters is not what we expect, but we can change it in CSS.
In CSS we will get to know the font-size property which is used to change the display size of letters or numbers.
Example of using font-size in CSS :
<!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">
<script src="index01.js"></script>
<title>buayaberdiri.blogspot.com</title>
<style>
p{
font-size:32px;
}
</style>
</head>
<body>
<p>https://buayaberdiri.blogspot.com</p>
</body>
</html>
In the code example above we use the font-size property and the px (pixel) value. We can change the px value to 14px or 32px or 64px and others.
The size unit for font-size is not only px, this font-size property has several units, such as:
- px
- pt
- pc
- in
- mm
- cm
The unit value above is a fixed value and cannot adjust the screen size. Because the screen sizes on computer monitors and smart phones vary.
So the unit size above is unresponsive, if you want to make the size responsive to this unit, you can use the @media screen code in CSS and there you can change the size in the units that I mentioned above on the predefined screen size.
Relative Value Type For Font-Size
The unit of this value is a relative unit, this unit can be adjusted from the unit of length and height of the parent element.
Even though it adjusts the element's parent, because the element's parent also adjusts the size of the screen. Then the size of the font-size still cannot adjust the screen size.
You have to use the @media screen code to change the font size to the specified screen size to make it responsive to the specified screen size.
Several units of relative length :- %
- vw
- vh
- em
- rem
Example using % value to resize letters and numbers or other characters to be relative :
<!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">
<script src="index01.js"></script>
<title>buayaberdiri.blogspot.com</title>
<style>
p{
font-size:150%;
}
</style>
</head>
<body>
<p>https://buayaberdiri.blogspot.com</p>
</body>
</html>
Check out other articles about HTML:
- Learn Input Types In HTML For Login And Register Form
- Learn HTML List - How To Create Square, Circle, Number List
- How To Create Comments Line In HTML
- How to Add Text Formatting In HTML
- Adding The Fieldset Code To The Form In HTML
- How to Create a Search Box in Pure HTML
- Create Color Charts With Pure HTML