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 color within the paragraph will be white (fff is hexadecimal shorthand for white)

Font-size

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/

Rem

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

Text source

Em

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

Percentages

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.

Text-Align

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.

Display:inline

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

https://www.w3schools.com/cssref/pr_class_display.php

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

https://www.w3schools.com/cssref/tryit.php?filename=trycss_play_display

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;

}