Since styling isn't the main purpose of this book, we've left this for the end; if you aren't interested, jump to the chapter summary.
While our application is functioning very well right now, it's certainly not easy on the eyes. Let's fix that. First, we'll link to a stylesheet from the <head> element in the index.ejs file as follows:
<link rel="stylesheet" href="/style.css" />
Now, create that file in style.css within public. We'll start with some generic styling:
body {
font-family: sans-serif;
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}It's really just a mini reset; we use several <ul> elements in this application, so this will be important.
The next few lines of code are mainly for styling the list of users:
#users, #rooms {
float: left;
width: 13%;
margin: 1%;
font-size: 80%;
}
#users li {
padding: 5px;
border-bottom: 1px solid #ccc;
}
.highlight {
font-weight: bold;
background: #ececec;
}The...