Angular 6 CSS

Angular 6 CSS

Let's add some CSS rulesets to make our app look better. First, open up /src/styles.css. Any CSS/Sass defined here will apply to the HTML templating of all components, while component-specific CSS files only apply to that component's HTML template.
Add the following rulesets:

/* You can add global styles to this file, and also import other style files */
body {
     margin: 0;
     background: #F2F2F2;
     font-family: 'Montserrat', sans-serif;
     height: 100vh;
}

#container {
    display: grid;
    grid-template-columns: 70px auto;
    height: 100%;

    #content {
        padding: 30px 50px;

        ul {
            list-style-type: none;
            margin:0;padding:0;
        
            li {
                background: #fff;
                border-radius: 8px;
                padding: 20px;
                margin-bottom: 8px;
        
                a {
                    font-size: 1.5em;
                    text-decoration: none;
                    font-weight: bold;
                    color:#00A8FF;
                }
        
                ul {
                    margin-top: 20px;
                    
                    li {
                        padding:0;
        
                        a {
                            font-size: 1em;
                            font-weight: 300;
                        }
                    }
                }
            }
        }
    }
}

This is a little lengthy because I don't want to keep revisiting this file. The rulesets here are applying to some elements that we haven't yet defined. Nothing too exciting is happening here though, just some standard Sass/CSS.
Next, open up the sidebar CSS file /src/app/sidebar/sidebar.component.scss:

nav {
    background: #2D2E2E;
    height: 100%;

    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;

        li {

            a {
                color: #fff;
                padding: 20px;
                display: block;
            }

            .activated {
                background-color: #00a8ff;
            }
        }
    }
    
}

Great. View your browser and the result should look like this: