Github and Website Workshop/CSS-stylesheet

From OpenHatch wiki
Jump to navigation Jump to search

Welcome to Challenge 5 of the Github and Website Workshop - setting up a stylesheet

The goal of this is to create our stylesheet and change the font styling of the page

First let's create the file:

  • type touch template.css in the terminal
  • Open template.css in your text editor

We’re going to be using Google Fonts to import a spiffy font

  • Select either a serif or sans serif font
  • Click “Add to Collection” on your desired font and select the “Use” tab
  • Select a light, normal, and bold font weight
  • Scroll down to step 3 and select the “@import” tab and copy that code into template.css

Example: @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900,300);

The challenge[edit]

Add some style to the body tag of your html file, using CSS

  • font color
  • font size
  • font weight
  • we recommend you make it so there are no margins (the default margins are not 0)
  • and finally - your new font

e.g. of using imported font:

font: 20px 'Source Sans Pro'; /* Font size and font family */

Try to add these styling yourself, using your previous knowledge of CSS and this reference

However, if you'd like to refer to the solutions to this challenge, click here.

Save the changes and reload index.html. When you’re satisfied, commit the changes.

Next: Challenge 6