In this article, I would like to give you a brief overview of the units of measurement used in Cascading Style Sheets along with information about fonts and text properties.
The CSS protocol agrees to a number of measurements, including relative units, such as inches, dots, centimeters, points, and relative measures, em units and percentages. To express a length, CSS has several length units, such as 3em, 5px, and so on. You will need values when you specify different measurements in your style code.
All the units of measurement used in CSS are listed below:
Relative lengths:
- em: an em unit is equivalent to the selected size of a font or 2
- vw: 1% of viewport width
- vmin: 1vw or 1vh, whichever is lower
- vmax: 1% of viewport larger dimension
- vh: 1% of the height of the viewport
- rem: rem units are scalable as em units, but do not obey the same compilation rules; if the font size is 2 rems, that means 32 pixels in height
- ex: defines a measure relative to the height of a font
Absolute lengths:
- mm: determine a measurement in millimeters
- cm: determines a centimeter measurement
- pt: determine a point measurement. A point is defined as 1/72 inch
- px: determines a measurement in monitor pixels
- in: determines an inch measurement
- pc: determine a measurement in picas. O pica is corresponding with 12 points
These absolute length units are fixed, but they are not recommended for use on the monitor because dimensions can vary.
In the following lines you will find an example for pixels
Listing 1
<html>
<head>
<style>
h1 {font-size: 60px;}
h2 {font-size: 40px;}
p {
font-size: 30px;
line-height: 20px;
}
</style>
</head>
<body>
<h1>About CSS units.</h1>
<h2>In the following lines you will find an example for pixels. </h2>
<p>In the following lines you will find an example for pixels</p>
<p>In the following lines you will find an example for pixels</p>
</body>
</html>
CSS Values
These may contain generic data types, are most widely-used by the general public and contain information on use, keywords, and so on. A property value can have one or more components.
Values types: types of databases that are displayed between “and” prefixes, keyword values that appear without using quotation marks, types that have the same set of values, bearing the same denomination and types that do not have the same name as a property, non-terminal name. Other property values can include parentheses, plus (mathematical sign, obligatory quotes), commas, or slashes.
Component values are as follows: a double bar, parentheses, a double ampersand, or allied components.
The latter are preceded by:
- a set of comma-separated numbers
- a hash mark
- an exclamation point
- a plus
- a question mark
Font Properties
The style sheet font properties are used to configure the appearance of individual characters from a text line or a word. Unfortunately, there are problems with the fonts that are not available and with the glyphs in the character positions. The font CSS is an abbreviation for setting CSS properties such as font variant, font-weight, font-family, font-size, font-style.
Font-family: there are two types of names – the family of fonts, with specific fonts such as Arial or Calibri and the generic font family, being similar fonts like Serif, Sans Serif, or Georgia.
Attention! Specify multiple fonts using commas, as the browser may not accept the first font, allowing the browser to choose the next font.
Font weight: this CSS property specifies the weight of the font. The availability of font weights is closely related to the font family you want to use, meaning that some fonts are only available in normal mode.
Font variant: this CSS property specifies whether the text is displayed or not in a lower-case font; if you use a lower-case font, it will be converted into capital letters.
Listing 2
<html>
<head>
<style>
p.nor {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>The font-variant Property</h1>
<p class="nor">About the font-variant property.</p>
<p class="small">About the font-variant property.</p>
</body>
</html>
Font-style: this property is used to set the font style (oblique or italic).
Font-size: this CSS property defines the font size, the size can be specified as relative, absolute, percentage, and length.
Listing 3
<html>
<head>
<style>
div.o {
font-size: 15px;
}
div.p {
font-size: large;
}
div.r {
font-size: 210%;
}
</style>
</head>
<body>
<h1>The font-size property</h1>
<div class="o">About the font-size property.</div>
<div class="p">About the font-size property.</div>
<div class="r">About the font-size property.</div>
</body>
</html>
Text properties
Through these properties, you can style the text by color change, alignment, decoration and so on. Thus, you can use the list below:
Text color: this property of CSS is used for color setting, this property can be used with the background color property.
Text align: this property is used to align elements (center, left, right), applies to the entire inline content of a container. Possible values: start, end, center, justify, left, right, match parent.
Text indent: this property refers to the indentation of inline content lines in a particular block: when you use text-indent, the line is considered as a margin applied to the edge of the line box start.
Listing 4
<html>
<head>
<style>
p {
text-indent: 90px;
}
</style>
</head>
<body>
<p>This property refers to the indentation of inline content lines in a particular block: when you use text-indent, the line is considered as a margin applied to the edge of the line box start</p>
</body>
</html>
Text transform: this property is used to force the text to become title boxes, lowercase or capital letters; possible values: capitalize, uppercase, lowercase, full-width.
Listing 5
<html>
<head>
<style>
o.uppercase {
text-transform: uppercase;
}
o.lowercase {
text-transform: lowercase;
}
o.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<o class="uppercase">This is uppercase text.</p>
<o class="lowercase">This is lowercase text.</p>
<o class="capitalize">This is capitalize text.</p>
</body>
</html>
Text decoration: the text decoration property is used for setting text-decoration-line, text-decoration-color, text-style decoration; possible values for:
- text-decoration-line: underline, line-through, overline, blink
- text-decoration-style: dotted, navy, dashed, double, solid
- text-decoration-color: you can choose any color from the palette
Text direction: the property of the CSS direction is used together with the Unicode-bidi property to specify the direction in which the text should run (left-> right, right-> left); Possible values: line-right-to-line-left, line-left-to-line-right
Text shadow: this property of CSS is used to create the shadow effects of the text, other shadow effects and shine, many effects can be applied in a single statement, separating them by commas, the first value of the length shows the gap produced by the horizontal shadow, the second length the vertical gap produced, the third value specifies the blur radius.
Word spacing: this property of the CSS is used to control the spacing between words, positive values (not the zero value), increase the spacing, and the negative ones reduce the spacing, possible values: length – specify the spacing in addition to the distance between predefined words font and percentage – specifies the spacing as a percentage of the width of the modified character advance.
Listing 6
<html>
<head>
<style>
p {
word-spacing: 25px;
}
</style>
</head>
<body>
<p>
Here some text about word-spacing</p>
</body>
</html>
Letter spacing: this property of the CSS is used to determine the space between the letters; you can also use negative values to rasp the space between the letters.
Unicode-bidi: this property of the CSS is used along with the property of the direction to specify text direction directives (right to left and right to right); possible values: normal, isolated, embed, plaintext, isolate-override.
Conclusion
It is very useful to learn more about CSS values and units and the best way to learn them is by practicing them. I hope this article was easy and accessible!
