Skip to content
View lessons Login
3d cartoon hands holding a phone

Unlock full course by purchasing a membership

Styling and Theming

Styling and Theming

We are basically done at this point — the application is functional… it’s just not particularly good looking.

Making the application pretty was not really one of our goals for this module. Some of the later modules get into the styling side of things a bit more (including creating themes with Angular Material), but for now we are just going to set up some basic CSS styles to make this application look decent.

Global Styles

First, we are going to add some global styles to our styles.scss file. Styles we add here will apply to our entire application.

:root {
--color-primary: #32db64;
--color-secondary: #2dd36f;
--color-dark: #1c1d3b;
--color-light: #ffffff;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
background: var(--color-dark);
font-family: "Roboto", sans-serif;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem;
background: var(--color-light);
}
section {
height: 100%;
padding: 2rem;
background: var(--color-primary);
}
button {
height: 30px;
}
.dialog-container {
position: absolute !important;
background: var(--color-dark);
top: 0;
bottom: 0;
right: 0;
left: 0;
}
STANDARD STANDARD

Thanks for checking out the preview of this lesson!

You do not have the appropriate membership to view the full lesson. If you would like full access to this module you can view membership options (or log in if you are already have an appropriate membership).