Time for some Basic User Interface Polish

Our interface sucks right now, and we both know it. It's all a bit HTML 3.2, right? It is well out of the scope of this tutorial to start teaching you CSS, but before we go any further I want to take a few small steps to start making this whole application look the tiniest bit nicer.

The first step is to create a new file in your dist folder called style.css. We're going to add a handful of CSS rules:

dist/style.css

body {
    line-height: 1.428571429;
    font-family: sans-serif;
}

h1 {
    font-weight: 100;
    font-size: 250%;
    margin-bottom: 0;
    color: #0275d8;
}

a {
    color: #0275d8;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a.active {
    color: black;
}

button {
    padding: 5px 20px;
    background-color: white;
    margin: 10px;
    border: 1px solid #aaaaaa;
    border-radius: 5px;
    outline-width: 0;
}

button:active {
    background-color: #dcdcdc;
}

To make that work you'll need to modify your index.html page so that it pulls in that stylesheet. Here's the updated version:

dist/index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

If you want to add some more CSS please go ahead, but you might find it better to read the next chapter first otherwise you might break something!

Buy the book for $10

Get the complete, unabridged Hacking with React e-book and take your learning to the next level - includes a 45-day no questions asked money back guarantee!

If this was helpful, please take a moment to tell others about Hacking with React by tweeting about it!

< Previous: Making Usernames Clickable: My Solution

Next: Adding React Router Breadcrumbs with Link and IndexLink >