3d cartoon hands holding a phone

Unlock full course by purchasing a membership

Lesson 5

Adding Some Simple Styling


Adding Some Simple Styling

The main goal of this module was to start putting some of the Angular concepts we have been learning into practice. Although some elements of theming and styling will become more relevant in later modules, the goal of this course is not really to teach you how to style apps.

However… it’s just a little bit sad looking at our application with absolutely no styling. So let’s add a few basic styles.

If you want to make some global changes to your styles, you can do that in the src/styles.scss file. These will apply to all of the components in your application.

Add the following to src/styles.scss:

body {
  font-family: "Arial", sans-serif;
  background-color: #f5f5f5;
  margin: 3rem;

button {
  background-color: #0077cc;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

input {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;

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).