Degrees
div.a {
transform: rotate(20deg);
}
div.b {
transform: skewY(20deg);
}
div.c {
transform: scaleY(1.5);
}For some CSS rules, we might use angles, such as in background gradients or rotations. To use degrees we use “deg”. For instance, “5deg” is rotate from the top by 5 degrees clockwise. We can use the opposite direction by making it negative, i.e. “-5deg”.
Multipliers
Some CSS rules can also take multiplier numbers, such as line heights and scale. This would be just a single number, which might include decimal places. For instance:
body {
line-height: 1.5;
}This means make the line height (or leading), 1.5 times the current font size.
Zero is zero
Some students ask, what’s the difference between using “0” and “0px” or “0em”. The answer is nothing — no pun intended — zero is zero no matter what unit you use!
Connecting HTML + CSS
Earlier, we were a little bit naughty and we skipped a bit. We didn’t talk about the general structure of HTML files and we need to add a few more tags to our page to split our sets of tags into two. One set of tags is the content of the page that our users see, such as image tags, paragraph tags and header tags. The other set of tags is to do with any other information. The content tags are put in a <body> tag and the other tags are put in a <head> tag (note: not <header>). Then both of these tags are put inside an <html> tag:
<html>
<head>
<title>My website</title>
</head>
<body>
<h1>Hey there!</h1>
</body>
</html>We’ve also added one more tag, the <title> tag, that lives in the <head> tag. The title isn’t included within the page’s content, but you’ll see the phrase “My website” in your browser tab and for your page’s headline in Google results.
To link up our HTML file with our CSS file, we need to add one more tag to our <head> tag because it’s not part of our content. If our CSS file is called “style.css”, we need to add a <link> tag:
<html>
<head>
<title>My website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hey there!</h1>
</body>
</html>
We can add multiple stylesheets on the same page by adding another
<link> tag:
<html>
<head>
<title>My website</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="slideshow.css">
</head>
<body>
<h1>Hey there!</h1>
</body>
</html>The order of the stylesheet is only important if you’re overwriting styles in more than one file — the bottom file will be the one that overwrites styles in the top one.
For now, most of the tags we’ll use will be within the body tag of our page.
Typography
Now we know how to use some basic styles, let’s show some of the CSS rules for typography and how you use them.
Font sizing
We talked about this earlier but we use:
p {
font-size: 16px;
}to give the font a particular size. Notice there’s no space between the number and the “px” — it’s all one word.
Font weight and how to make fonts bold
To make a font bold, we give it a font-weight:
p {
font-weight: 700;
}This number correlates to a typographic weight. There are essentially nine weights to pick from:
| 100 | thin |
| 200 | extra light |
| 300 | light |
| 400 | regular |
| 500 | medium |
| 600 | semi bold |
| 700 | bold |
| 800 | extra bold |
| 900 | black |
The default font weight is 400. Watch out, as not all typefaces have all the weights. If that is the case, your text will default to the nearest weight it can find (e.g. if there are only 400 and 700 weights and you select 900, it’ll display as 700).
Typography and text
To change the typeface of the site, you can change the font’s family:
p {
font-family: Arial;
}By default, there are not many fonts to pick from, just the standard ones such as Arial, Georgia, Helvetica and Times New Roman. We’ll talk later about how to add web fonts into your site.
Make the font italic
To make the font italic:
p {
font-style: italic;
}To overwrite an italic font and make it normal again:
p {
font-style: normal;
}Leading or line heights
To change the ratio between the height of the lines between text, we change the line height:
p {
line-height: 1.5;
}The number is a ratio based on the font size, so for instance if the font size is 16 pixels, the space between each line would be 24 pixels (16 times 1.5). A tight leading would be around 1.2 and a looser leading would be around 1.6.
You can also use pixel sizes for this:
p {
line-height: 24px;
}But it’s better to use ratios as you may change the font size later on.
Letter spacing or tracking
To change the distance between characters in text, we can change the letter spacing. To increase the spacing by one pixel per character, we can add:
p {
letter-spacing: 1px;
}To reduce the space, we can use negative pixels:
p {
letter-spacing: -1px;
}Aligning text
When it comes to aligning text, you’re not really handling the typography but how the text works, so the rules look slightly different:
p {
text-align: left;
}There are four different values you can put in: left, center, right and justify (watch out for “center” not “centre”, British people!).
Underlining text and removing underlines
You might want to add underlines to your code:
p {
text-decoration: underline;
}You may notice that by default links have underlines, if you want to get rid of them, add:
a {
text-decoration: none;
}MAKING TEXT SHOUT
Sometimes you need to make your text shout out! We could just go back to our HTML and delete the content and replace with an upper case version, but there’s no need to rewrite your HTML. Having uppercase letters could be a branding style, and therefore we could do it in CSS.
You can make all the letters upper case by adding:
p {
text-transform: uppercase;
}You could also make each first letter capitalized too:
p {
text-transform: capitalize;
}Putting them all together
Remember you can add several of these rules together in one style or across multiple styles:
p {
font-family: Arial; font-weight: 900; font-size: 16px; line-height: 1.5; text-align: center;
}The order of the rules doesn’t matter as long as you don’t include two of the same rule. If you do, the latter one will take effect. For example:
p {
font-size: 14px; font-size: 16px;
}The font size will be 16 pixels as the first one gets overwritten by the second.