JohnReeves/website_css.md Secret

## website_css.md

      
        

          Raw
        
        
          
            
          
          
            
              website_css.md
            
          
        
      
    
  
    1. Introduction
So before starting this worksheet, you should have a some content on your website in JSBin that we can change the style using CSS.
We then need to make sure we have the CSS panel open (click it once at the top of the page) so we can start changing the colours of our website. Your page should look something like this

2. Background Color
First thing we're going to look at doing is changing the background colour of our website. In the CSS window write the following:
body{
  background:#ffcc00;
}
This'll tell everything inside the <body> tags to have that background colour. Try changing it to a better colour, you can even pick one from google's list of colours = www.google.co.uk/design/spec/style/color.html#color-color-palette
Your website should look something like this:

You can even use gradients thanks to CSS3 (the newest version of CSS) - try changing your background to this :
background:linear-gradient(#D81B60 , #1976D2);
It should look something like this:

3. Text Colours
Next we'll probably want to make it so our text is actually readable. Because my background is now very dark, I'm going to make all of by text white by adding in a color (CSS was invented by americans 😦) option like this:
color:#e9e9e9;
Like this:

4. Just H1 colour
So what if we wanted to change the text colour of our h1 tag instead of everything? That's super easy too by adding a css class like this:
h1{
  color:#ffcc00;
}

You could change each of the header tags to be a completely different colour if you liked!
5. Text Sizes
Using CSS we can do more than just colours, we can also change the text size and font too! If we wanted to make our h1 tag bigger, we could set it's text size like this:
font-size:5em;
We use em to make things easier to understand over different computers. 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
Mine looks like this:

6. Different Fonts
Finally, we can use different fonts too as I'm sure nobody really like Times New Roman.
font-family:Courier New;
There are only a small set of fonts that you can actually choose from though, so check them out here - http://www.w3schools.com/cssref/css_websafe_fonts.asp
Mine looks like this:

7. Finishing
Make sure you've changed all the colours to things you want, though don't go too much like I've done!!!
Don't forget to save your JSBin link, as we'll need it next week!
You can hide the HTML and CSS window to then see what your website would look like in full. Here's what mine would look like!