Click the Next button to learn about CSS!

What does CSS stand for?

Cascading Style Sheets

What does CSS do?

Describes how HTML elements are to be displayed on screen, lets you make fun changes to your website, like changing color!

Color

Black text on a white background can be harsh on the eyes. Opting for a softer shade of black for body text makes the page more comfortable to read.

Try typing a color like "lightblue" or "green", or use this to pick a color, then enter the 6-digit code with a hastag in front

Changing background-color changes the background color, and changing color changes the text color

body {
          background-color: ;
          color: ;
        }

Now try changing colors in the header!

header {
        background-color: ;
        color: ;

      }

Centering

Long lines of text can be hard to parse, and thus hard to read. Setting a limit of characters per line greatly enhances the readability and appeal of a wall of text.

Try changing the margin and max-width values! Click Change Centering to update the page

Hint: try making the margin 100 and the max width 40

body {
  margin:  px;
  max-width: em;
}

Now try giving the html a different background color to better see the spacing

html {
  color: ;
}

After styling the text blocks, what about styling the text itself?

Font family

The browser's font defaults to "Times", which can look unappealing (mostly because it is the "unstyled" font). Switching to a sans-serif font like "Helvetica" or "Arial" can vastly improve the look of your page.

Select a font from the dropdown to test some different fonts!

body {
  font-family: ;
}

While this makes the text more appealing, let's also make it more readable.

Spacing

When a page looks "broken" to a user, it's usually a spacing issue. Providing space both around and within your content can increase the appeal of your page.

Hint: try making line-height 1.5 or 2

body {
  line-height: ;
  padding: em em;
}

h2 {
  margin-top: em;
  padding-top: 1em;
}

While the layout has greatly improved so far, let's apply more subtle changes.

More Color & contrast

And in order to keep a decent level of contrast, let's pick a darker shade for important words

h1,
h2,
strong {
  color: ;
}

Try entering a color for the strong words

While most of the page has been improved visually, some elements (like the code snippets) still seem out of place.

Balance

It only takes a few additional touches to correct the balance of the page:

pre {
  background: ;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}