Fulfledge

Put a page together

INPUT · Slides

Size and typeface

01 / 05

font-size decides the size

The size of text is set with the font-size property. The unit people reach for is px (pixels).

px is a count of dots on the screen. A bigger number is bigger text.

p {  font-size: 20px;}

02 / 05

Keep the number and the unit together

Write 20 px with a space in between and it does nothing. It has to be 20px, joined up.

font-size: 20; with no unit does nothing either, because a bare number does not settle a size.

h2 {  font-size: 28px;}

03 / 05

You can resize headings too

<h1> comes out big from the start, but that is only the size the browser picked. Say so in CSS and you overwrite it.

You can even make it smaller. The division shows up again here: the tag carries the meaning, the CSS settles the size.

h1 {  font-size: 24px;}

04 / 05

font-family decides the typeface

The shape of the letters is changed with font-family. Start with the three big families.

  • sans-serif … strokes of even weight
  • serif … little finishing strokes on the ends
  • monospace … every character the same width
p {  font-family: serif;}

05 / 05

The HTML stays put, only the CSS moves

Size, typeface, colour — all of it changes inside style.css alone. index.html is not touched at all.

You can change how it looks without rebuilding what is there. That is the most welcome thing about CSS. Let us try it.

h1 {  font-size: 36px;  font-family: serif;  color: #6d4c41;}