From the course: Build and Deploy Your First Web App with Modern Tooling

Unlock the full course today

Join today to access over 23,100 courses taught by industry experts.

Style the note app

Style the note app

From the course: Build and Deploy Your First Web App with Modern Tooling

Start my 1-month free trial Buy for my team

Style the note app

“

- [Instructor] Let's now dive into styling the notes app to look exactly the way we want it. First, we would have to add the style sheet to the HTML file by adding a link tag within the head of the HTML. Set the rel attribute to stylesheet and the href to your styles.css file. In order to see a clear demarcation of our notes app, let's give the parent element with an ID of notes a border. I will use a shade of gray so that it doesn't look so intense. Let's say one pixel solid gray. And then a padding of 16 pixel. A max-width of 75%. And a margin of auto to centralize the content of the page. The header looks good. So no need to add any additional style. Let's now preview our app on the browser and be sure that everything is working well. As you can see, we have the gray border and paddings that we added. So that means that our style sheet is well connected. Let's now head back to our code. Add a top margin of 16…

Contents