Programming

Appearance

Return to top
On this page

Styling Your Website

Here are some basic CSS rules you'll use for each website.

Variables

Make variables for all of the colors and styles you plan on using.

css
:root {
    --main-color: #222;
    --secondary-color: white;
    --accent-color: hotpink;
    --main-margin: 16px;
}

#main {
    background-color: var(--main-color);
    color: var(--secondary-color);
    margin: var(--main-margin);
}

Body / HTML

Style your entire website.

css
html,
body {
    height: 100vh;
    width: 100vw;
    font-size: 0.875em;
    background-color: var(--main-color);
    color: var(--secondary-color);
}

Aligning Content

Flexbox makes laying out your content so much easier. Make sure to start by adding display: flex.

  • flex-direction: column, row, column-reverse, row-reverse
  • justify-content: center, space-evenly, space-around, space-between, flex-end, flex-start
  • align-items have the same values as justify-content
css
#main {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}