CSS Text Styling Cheat Sheet
Without CSS, websites would be sad and dull. CSS allows almost every detail on a website to be customized and styled. When you’re first learning CSS, it can get challenging to recall every property of every element that can be styled– especially text.
This will serve as a cheat sheet for some of the most common ways you can style text with CSS. Bookmark it for future reference! …or at least until you commit these to memory!
Size
Straightforward and simple. There are three units that you can use to size your text: pixel (px), em and rem, but we will be using pixels in this example. In your CSS file, define the class of text that you’d like to size and simply add in font-size: #px;
to your liking.
Family
font-family
applies a specific font to text. There are many web safe fonts including Arial, Courier New, Georgia, Times New Roman, Trebuchet MS and Verdana. These can generally be rendered on all computers. Add font-family: fontName;
to your CSS file to change the font of the body
, p
, <h1>
or whatever class of text you want.
Aside: there is so much more to fonts than just font-family
, mainly Google Fonts. I won’t be digging into it, but it is quite simple to implement on your website.
Color
Changing the color of text on your website is fairly simple. Just include color: colorName
in your CSS file. The colorName
value should be any CSS color unit, which includes color keywords (green
), hexadecimal values (#B5E244
) and RGB values (rgb(181, 226, 68)
).
Alignment
Adding text-align: center
, text-align: left
, text-align: right
are easy ways to justify your text.
Line Height
If you are looking to tighten or loosen up the leading (space between lines of text), the line-height: heightValue
can be employed. heightValue
should be one of the following options: normal
which uses the default height, a number
that is dependent on the current font size to set the height, a length
(in px, pt or cm) which sets a fixed line height or a %
of the current font size.
Italics
This is a vague one, but if you are looking to make your font italic (if the font you are using offers an italics version) or oblique (a simulated italic font which slants the regular font), utilize font-style: italic
or font-style: oblique
. Oppositely, font-style: normal
sets the text to the normal font without any italics.
Weight
font-weight
sets the boldness of your text. font-weight: bold
uses the bold version of the font you chose. font-weight: lighter/bolder
makes the text slightly less or more bold, depending on which you use. To get more precise control of the boldness, use font-weight: 100-900
, where 100 is less bold and 900 is more bold.
Transform
Transforming your text is easy with text-transform: value
. The value could be: none
which prevents transformation, uppercase
, lowercase
or capitalize
which capitalizes the first letter of every word.
Decoration
Adding a line under, over or through your text is also achievable through simple CSS styling. Just add text-decoration: value
to your stylesheet. The value could be none
which prevents any existing text decoration, underline
, overline
or line-through
.
Shadow
Last but not least, text-shadow
can be leverages to add drop shadows to your text. It takes in four values: the horizontal offset of the shadow, the vertical offset of the shadow, the blur radius (the higher the number, the wider it is dispersed with it defaulting at 0 with no blur) and the color of the shadow. An example is: text-shadow: 2px 2px 3px blue;
. Play around with the number values so they fit your website’s needs.
This barely scratches the surface of the full power that CSS can offer. MDN web docs is an amazing resource for more info on what CSS can do. In the meantine, hopefully this cheat sheet of CSS text styling is helpful to you in building your website!