Code / Web Basics: HTML & CSS / Unit 3: CSS basics: colour and style

Text and fonts टेक्स्ट और फ़ॉन्ट

Lesson 8 of 14 · about 12 minutes · Font families, alignment, spacing and capital letters.

⚡ 0 XP

Step 1 of 1

Making text look good

Useful text properties:

font-family: Georgia, serif; — a list of fonts; the browser uses the first one it has. Always end with a generic family like serif, sans-serif or monospace
font-size: 2rem; — size (rem is relative to the normal text size)
text-align: center; — left, right or center
text-transform: uppercase; — CAPITAL LETTERS without retyping
line-height: 1.6; — space between lines, easier to read

Example

h1 {
  font-family: Georgia, serif;
  text-align: center;
}
.tag {
  text-transform: uppercase;
}

Style the poster:

the h1 gets its own font-family list ending with a generic family (like Georgia, serif)
the h1 is centred
.date is in UPPERCASE with text-transform
.info has a line-height (for example 1.6)

Try twice to unlock the solution (0/2)

style.cssCtrl ⏎

Preview

Console

Output from console.log appears here.

Checklist

Press Run to check your code.

Lesson notes (text version)

Useful text properties:

font-family: Georgia, serif; — a list of fonts; the browser uses the first one it has. Always end with a generic family like serif, sans-serif or monospace
font-size: 2rem; — size (rem is relative to the normal text size)
text-align: center; — left, right or center
text-transform: uppercase; — CAPITAL LETTERS without retyping
line-height: 1.6; — space between lines, easier to read

                h1 {
  font-family: Georgia, serif;
  text-align: center;
}
.tag {
  text-transform: uppercase;
}

Style the poster:

the h1 gets its own font-family list ending with a generic family (like Georgia, serif)
the h1 is centred
.date is in UPPERCASE with text-transform
.info has a line-height (for example 1.6)