Introduction
Cascading Style Sheets (CSS) is a styling language used to describe the appearance of HTML elements on a webpage. One important aspect of CSS is how text looks and behaves. The font property to style an HTML page plays a key role in defining text appearance, helping developers create content that is both visually appealing and easy to read.
Code syntax
In CSS, the font property to style an HTML page and its related properties enable developers to control text presentation by adjusting style, size, and typeface. The font shorthand allows multiple text-related properties to be set in one declaration, although each can also be defined individually.
Primary Font-Related Properties
- Font-family – Specifies the typeface (e.g., Arial, Times New Roman, sans-serif).
- Font-size – Defines the size of text (e.g., 16px, 1.2rem).
- Font-style – Sets how text appears (e.g., normal, italic, oblique).
- Font-weight – Controls thickness or boldness (e.g., normal, bold, 700).
- Line-height – Sets spacing between lines.
- Font-variant – Applies small-caps or other typographic effects.
Font Size Units
Values for font size and spacing are measured using units such as:
- Pixels (px) – Fixed, absolute sizing ideal for precise layouts.
- Rem – Relative to root element’s size, useful for scalability.
- Em – Based on size of parent element, ideal for flexible design.
- Percentage (%) – Also relative to parent element’s size.
For further reference read these materials:
- W3schools – https://www.w3schools.com/css/css_font.asp
- Tech altum tutorial: https://tutorial.techaltum.com/cssfontproperties.html
Code example:
The image below shows a written code shows an example of how t is used.
Code output:
The image below is an output of the code example
