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.

Action

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;
}