CSS offers plenty of ways to change the look and feel of any text displayed on your screen. Fonts and text can be customized to match your brand, to match your website's design, or to match your company's branding. Let's look at some of the ways you can use CSS to change the look and feel of your text.
Comments
While technically not part of styling text, it is useful to know how to write comments in CSS. The browser will ignore any text that is commented out, even if it is otherwise valid CSS. Comments can be used to explain what the code does, or to explain why the code is not working.
Single Line Comments
For single line comments, just prepend your comment with /* and append with */, like so:
body {
background-color: red;
/* I'm a comment */
}
Multiple Line Comments
For comments spanning multiple lines, simply do the same as before and prepend the comment with /* and append with */. Everything in between that will be commented out and ignored.
Here's an example:
body {
background-color: red;
/* I'm
a
comment
*/
}
Font Family
To change the font that is used to render text, you specify it using the font-family property. The value of this property is a list of font names, separated by commas.
body {
font-family: "Times New Roman";
}
CSS allows you to specify fallback fonts in case your user did not have the font you originally specified. For example, if you wanted to use the Arial font followed by a serif font as a backup, it would look like this:
body {
font-family: "Arial", serif;
}
Here is a list of fonts that are generally deemed safe to use on the web, also known as web safe fonts.
- Arial
- Helvetica
- Times New Roman
- Times
- Courier New
- Courier
- Verdana
- Georgia
- Palatino
- Garamond
- Bookman
- Comic Sans MS
- Trebuchet MS
- Arial Black
- Impact
Web safe fonts are generally used as fallback fonts for browsers that do not support the font you want to use.
Font Weight
You can give fonts weight using the font-weight property. The value of this property is a number between 100 and 900, where 400 is normal, 700 is bold, and 900 is heaviest. The default value is 400. The following is a list of all the valid values for a font's weight.
- 100
- 200
- 300
- 400 or normal
- 500
- 600
- 700 or bold
- 800
- 900
Font Style
Your text can be rendered with a certain style if you change the font-style property. While you usually want it set to normal, you also have two additional values, italic and oblique. These values are used to render text in a slanted or oblique style.
Text Transform
You can use text-transform to change the cases of the text. The following is a list of all the valid values for this property.
capitalize: This capitalizes the first letter in every word.uppercase: This capitalizes every letter.lowercase: This lowercases every letter.none: This applies no effect to the text.
Text Decoration
You can use text-decoration to change the decoration of the text. The following is a list of all the valid values for this property.
underline: This adds a line under the text.overline: This adds a line over the text.line-through: This puts a line directly through the text.none: This removes any decoration effects.
Text Decoration Style
In addition, you can also apply a style to your text decoration. The values for text-decoration-style can be found below:
solid: This is the default.wavy: A wavy line.double: Two solid lines.dotted: A dotted line.dashed: A dashed line.
If you apply these styles:
h2 {
text-decoration: underline;
}
.solid {
text-decoration-style: solid;
}
.wavy {
text-decoration-style: wavy;
}
.double {
text-decoration-style: double;
}
.dotted {
text-decoration-style: dotted;
}
.dashed {
text-decoration-style: dashed;
}
to this markup:
<h2 class="solid">I have a solid line.</h2>
<h2 class="wavy">I have wavy line.</h2>
<h2 class="double">I have two lines.</h2>
<h2 class="dotted">I have a dotted line.</h2>
<h2 class="dashed">I have a dashed line.</h2>
You'll get this:
Text Shadows
You can apply a shadow effect to text by using the text-shadow property. To declare it, you need to give it two values with an optional two more.
The first and second value is the horizontal and vertical offset from the text that you want the shadow.
The third and fourth optional values is the blur radius and the color of the shadow. Without a color, it will render as the same color as the text, and without a blur radius, it will be just as sharp as the text.
h1 {
text-shadow: -4px 4px 4px red;
}
Text Spacing
There are three main ways to control the spacing around and between text.
Line Height
When you want to change the height of the lines, use the line-height property. Since this adjusts the height of a line of text, when lines are stacked, this basically increases or decreases the spacing between those lines.
The value will be a percentage, a length in any unit, or normal. The default value is normal.
<p class="a">I have 1rem of line height.</p>
<p class="b">I have 3rem of line height.</p>
<p class="c">I have 10rem of line height.</p>
p {
background-color: lightblue;
margin: 0;
border: solid 1px blue;
}
.a {
line-height: 1rem;
}
.b {
line-height: 3rem;
}
.c {
line-height: 10rem;
}
Letter Spacing
If you want to change how much space is between individual letters, use the letter-spacing property. The value will be a length in any unit. The default value is normal. The value can also be negative.
p {
letter-spacing: 0;
letter-spacing: 2px;
letter-spacing: 4px;
}
Word Spacing
Word spacing is similar to letter spacing, except that the space you're adjusting is between the words instead of the letters. You declare this with the word-spacing property. The value will be a length in any unit. The default value is normal. The value can also be negative.
p {
word-spacing: 0;
word-spacing: 6px;
word-spacing: 12px;
}
Text Layout
When it comes to basic layout of text, you have two properties at your disposal.
Text Alignment
You can align text inside an element to the left, right or center, by using the text-align property. The default value is left.
p {
text-align: left;
text-align: center;
text-align: right;
}
Text Indentation
Additionally, you may indent the first line of a paragraph by any specified length you want by using the text-indent property, like so:
p {
text-indent: 2rem;
}
Text indentation is a property that affects the first line of a paragraph. It is not a property of the whole paragraph, but only the first line.
