Code First Girls Edinburgh

Style your first page

General Assembly Dash Exercise

If you haven't before, go to Dash and sign up for an account. Once you've done so, go to the Projects and complete the one entitled Build a Personal Website. This will teach you the basics of adding CSS to your HTML, and should take you about thirty minutes.
Creating an external stylesheet

To add an external stylesheet to your simple index.html file:
1. Do not put any styles in your page's <head>. This is bad practice. Instead, we're going to add an external stylesheet (that just means that the stylesheet is elsewhere, and not in the index.html file).
2. So to add an external stylesheet, create a new folder in the same place as index.html, and call it 'css'.
3. In that folder, create a new file called style.css.
4. Add whatever CSS you fancy to this new file. Keep it simple for now; maybe a background color or some text alignments. Something like this:
```
  body { 
    background: blue; 
  }
  p { 
    text-align: center;
    color: green;
  }
```
  Remember, you do not need any <style> tags in your CSS file.
5. Once you're finished, save style.css, and return to index.html.
6. If you refresh index.html now, you'll see that nothing has happened. You need to link the stylesheet to it, so that index.html knows to look elsewhere to find CSS.
7. In the <head>, add your file using the following code snippet: <link rel="stylesheet" href="style.css">.
8. Now you can refresh your page, and see your new CSS in action! Now, feel free to add more, and make your page look the way you want it to.

CSS exercises

General Assembly Dash Exercise

Creating an external stylesheet