Fundamental text and font styling - Learn web development
Beginner’s guide to styling text with CSS
CSS provides powerful properties to control the appearance of text, making websites visually appealing and readable. This guide covers essential CSS font and text styling properties to help you improve your web design skills.
The CSS fonts module defines font-related properties and how font resources are loaded in web page. It lets you define the style of a font, like as its family, size in pixels or points and weight, and the glyph variants to use when multiple are available for a single character.
font-family
(Choosing Fonts)
The font-family
property defines the typeface for an element. It is best to use web-safe fonts and specify fallback options.
Example:
body {
font-family: 'Arial', 'Helvetica', sans-serif;
}
font-size
(Text Size)
The font-size
property controls the size of the text. Using relative units like em
or %
improves responsiveness.
Example:
p {
font-size: 16px;
}
font-weight
(Boldness)
The font-weight
property adjusts the thickness of the text. Values include normal
, bold
, or numbers from 100 to 900.
Example:
h1 {
font-weight: bold;
}
font-style
(Italic or Normal)
The font-style
property specifies if text should be normal, italic, or oblique.
Example:
em {
font-style: italic;
}
line-height
(Spacing Between Lines)
The line-height
property sets the space between lines, enhancing readability.
Example:
body {
line-height: 1.6;
}
font-variant
(Small Caps)
The font-variant
property controls alternate glyphs, like small caps.
Example:
blockquote {
font-variant: small-caps;
}
font
Property
The font
shorthand property combines multiple font-related properties in a single declaration.
Example:
p {
font: italic bold 16px/1.5 'Times New Roman', serif;
}
text-align
(Text Alignment)
The text-align
property aligns text within an element.
Example:
h2 {
text-align: center;
}
text-decoration
(Underlines, Strikethroughs)
The text-decoration
property adds styling effects such as underlines or line-throughs.
Example:
a {
text-decoration: none;
}
text-transform
(Capitalization)
The text-transform
property controls text capitalization.
Example:
th {
text-transform: uppercase;
}
letter-spacing
(Spacing Between Characters)
The letter-spacing
property modifies the space between letters.
Example:
h3 {
letter-spacing: 2px;
}
word-spacing
(Spacing Between Words)
The word-spacing
property sets space between words.
Example:
p {
word-spacing: 4px;
}
text-indent
(First Line Indentation)
The text-indent
property indents the first line of text.
Example:
p {
text-indent: 30px;
}
white-space
(Handling Whitespace)
The white-space
property controls how whitespace inside an element is handled.
Example:
pre {
white-space: pre;
}
text-shadow
(Adding Shadow Effects)
The text-shadow
property adds shadow effects to text.
Example:
h1 {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
Mastering these CSS font and text styling properties will significantly improve your website’s visual appeal and usability.