Github and Website Workshop/CSS-stylesheet: Difference between revisions

From OpenHatch wiki
Content added Content deleted
imported>Auria
(Created page with "Welcome to Challenge 5 of the [https://openhatch.org/wiki/Github_and_Website_Workshop Github and Website Workshop] - setting up a stylesheet The goal of this is to create our...")
 
imported>Auria
No edit summary
 
(One intermediate revision by the same user not shown)
Line 20: Line 20:
* font size
* font size
* font weight
* font weight
* we recommend you remove the margins
* we recommend you make it so there are no margins (the default margins are not 0)
* and finally - your new font
* and finally - your new font


Line 27: Line 27:
font: 20px 'Source Sans Pro'; /* Font size and font family */
font: 20px 'Source Sans Pro'; /* Font size and font family */
</code>
</code>

Save the changes and reload index.html. When you’re satisfied, [https://openhatch.org/wiki/Github_and_Website_Workshop/git-commit-changes commit the changes].


Try to add these styling yourself, using your previous knowledge of CSS and [https://openhatch.org/wiki/Github_and_Website_Workshop/HTML_CSS_review#CSS this reference]
Try to add these styling yourself, using your previous knowledge of CSS and [https://openhatch.org/wiki/Github_and_Website_Workshop/HTML_CSS_review#CSS this reference]


However, if you'd like to refer to the solutions to this challenge, click [http://pastebin.com/amWJKUJY here].
However, if you'd like to refer to the solutions to this challenge, click [http://pastebin.com/amWJKUJY here].

Save the changes and reload index.html. When you’re satisfied, [https://openhatch.org/wiki/Github_and_Website_Workshop/git-commit-changes commit the changes].

[https://openhatch.org/wiki/Github_and_Website_Workshop/header Next: Challenge 6]

Latest revision as of 15:04, 6 March 2015

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

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