3.5  Typography, Colours, and Backgrounds

 

Typography, Colours, and Backgrounds

/* TYPOGRAPHY */

body {

  font-family: 'Segoe UI', Arial, sans-serif; /* Font (with fallbacks) */

  font-size: 16px;        /* Base size */

  line-height: 1.6;       /* Space between lines (1.6x the font size) */

  color: #2C3E50;         /* Text colour (dark grey-blue) */

}

 

h1 {

  font-size: 2.5rem;      /* rem = relative to root font size */

  font-weight: bold;       /* normal | bold | 100-900 */

  text-align: center;      /* left | center | right | justify */

  text-transform: uppercase; /* none | uppercase | lowercase | capitalize */

  letter-spacing: 2px;    /* Space between characters */

}

 

/* COLOURS (CSS accepts: names, hex, rgb, hsl) */

.header { background-color: #1A3C5E; }  /* Hex colour */

.success { color: rgb(30, 132, 73); }    /* RGB colour */

.warning { color: hsl(45, 80%, 40%); }  /* HSL colour */

 

/* BACKGROUNDS */

.hero {

  background-color: #1A3C5E;

  background-image: url('campus.jpg');   /* Background image */

  background-size: cover;                /* Fills the entire element */

  background-position: center;           /* Centers the image */

}