CSS and Text for Beginners [2022]

Font Colour (color)

You can style a tag such as p (paragraph) with:

p {
color: #fff;

…and the font colour within the paragraph will be white (fff is hexadecimal shorthand for white)


Font-size can be used to dictate the size of the text. You can use pixels (absolute measurements), but you can use rems and ems/


“the rem unit means “The root element’s font-size” (rem stands for “root em”)”

Text source


 the em unit means “my parent element’s font-size” in the case of typography”


The thing with percentages is that they are always set relative to some other value. For example, if you set an element’s font-size as a percentage, it will be a percentage of the font-size of the element’s parent. If you use a percentage for a width value, it will be a percentage of the width of the parent.


By default, in UK, USA etc. the text will be left aligned.

“text-align: center;” will align the text in the middle of the page or the element

text-align: justify;

Text-align: justify, will stretch the text across the page. Sounds weird but usually looks quite nice. I used to use this in Word for my uni assignments.

CSS justify text


There are lots of ways to use “display” to present the text on your webpage.

W3 schools has a table full of all the values, including “inline” which is a pretty popular option


The easiest way to get familiar with the main “display” values, is probably to use this editor tool, thingy on W3 schools:


Change the value after “display:” to see the different effects:

Remember to click the green button “Run” at the top if you make changes to the code

Importing Google Fonts

Google fonts is a free service, that lets you choose from a wide range of fonts for your webpages.

How to import Google Fonts:

  1. Go to https://fonts.google.com/
  2. Find the font you like and click it (a card with the font), then, click “+ Select this style”. On the right side, you’ll see a container with the name “Selected family”.
  3. Click “Embed” and choose <link> or @import depending on where you need to add the font (in HTML or CSS).
  4. Copy/paste the codes you need.

If for example, you choose the “Muli” for the body of your webpage/html and “Quicksand” font for your h1s,

Import the font using the following code taken from Google Fonts:

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

Declare the Muli font in your body CSS

body {
font-family: ‘Muli’, sans-serif;

Declare the Quicksand fault in your h1 styles/stylesheet:

h1 {

font-family: ‘Quicksand’, sans-serif;



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s