As you might imagine, CSS offers plenty of ways to change the look and feel of any text displayed on your screen. Let's take a look at all these ways.
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.
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
*/
}
Now that we got comments out of the way, back to styling text!
Font Family
To change the font that is used to render text, you specify it using the font-family property. If you want to use Times New Roman, it looks like this:
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
Font Weight
You can give fonts weight using the font-weight property. 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.
Text Transform
You can use text-transform to change the cases of the text. This property has four values:
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. This property also has four values:
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.
<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.
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.
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.
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;
}
That's pretty much it for working with fonts and styling text in CSS. In our next one, we'll dive into everything regarding backgrounds!
