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!
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.
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
<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.
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)).
text-align: right are easy ways to justify your text.
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.
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.
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.
Transforming your text is easy with
text-transform: value. The value could be:
none which prevents transformation,
capitalize which capitalizes the first letter of every word.
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,
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!