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!

This article was originally published by Peyton doyle on medium.