Angular 6 for Enterprise-Ready Web Applications

Fine-tuning styles

The tagline can benefit from some top and bottom margins. This is common CSS that we're likely to use across the application, so let's put it in styles.css:

1. Implement vertical-margin:

src/styles.css.vertical-margin {  margin-top: 16px;  margin-bottom: 16px;}

2. Apply vertical-margin:

src/app/app.component.ts<div class="mat-caption vertical-margin">Your city, your forecast, right now!</div>

Current Weather has the same style as the City Name; we need to distinguish between the two.

3. In app.component.ts, update Current Weather with a mat-headline typography:

src/app/app.component.ts<mat-card-title><div class="mat-headline">Current Weather</div></mat-card-title>

4. The image and the temperature aren't centered, so add fxLayoutAlign="center ...