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”)”
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:
- Go to https://fonts.google.com/
- 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”.
- Click “Embed” and choose <link> or @import depending on where you need to add the font (in HTML or CSS).
- 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;
}