From the course: Angular: Progressive Web Apps

Unlock this course with a free trial

Join today to access over 25,600 courses taught by industry experts.

Styling coffee component

Styling coffee component - Angular Tutorial

From the course: Angular: Progressive Web Apps

Start my 1-month free trial Buy for my team

Styling coffee component

“

- [Instructor] Now that our form is ready, it's time to add some styling to it because, yeah, it doesn't look so nice. So, we are going to start separating the titles a little bit. So, for example, we can say that for the h2... The h2 is right now, for example, "Ratings". We can add a border-top, like a line, one pixel solid gray, and then margin-top 15 pixels and padding-top 15 pixels. So, in this case, that border will actually be vertically centered. Now we have that line there. Also, we can add another line that can separate a little bit the "Ratings" from the "Notes". So, for that we will go to "coffee.component.html" and find our form field for "Notes". And I'm going to add here an h2, for example, saying "Additional Info". So, now we separated that from the rest. The next part is to come back to CSS and change, for example, the width of the sliders. So, I can change the mat-slider- mat for material-…

Contents