Skip to content

Instantly share code, notes, and snippets.

@JohnReeves

JohnReeves/website_css.md Secret

Last active Oct 11, 2017
Embed
What would you like to do?

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

Imgur

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:

Imgur

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:

Imgur

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:

Imgur

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;
}

Imgur

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:

Imgur

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: Imgur

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!

Imgur

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment