1. <link> to an external stylesheet style.css from index.html.
2. Use class selectors to style the Jumbotron of the Icebreaker Homepage.
3. Play wtih border-radius, text-align, color, background-color, line-height and other CSS properties.

We're going to style the Jumbotron of the Icebreakers homepage. The goal is to make a marketing component of the page and format it so it looks good. We're going to be practicing using class selectors to add the required styles. By the end of this lab, the homepage in index.html with the styles in style.css should look like:

Code your styles in style.css and include it in index.html with a tag with an href attribute and a rel attribute of value stylesheet.

You have to use the specific selectors described below to style the navigation.

As you add the styles to style.css, you should check your work visually by looking at index.html in the browser. When working on this lab in the Learn IDE, type httpserver in your IDE terminal. You will get an IP Address that you can open in your browser to see your site. You can learn more about this at the Help Center.

Using a class selector, find the div with class jumbotron and give it a border-radius of 5px, a background-color of #e9ecef, a padding of 10px and center align the text.

Find the <h1> inside an element (hint: not just a div) with class jumbotron using a class selector. Make the font-size 60px.

Style all ps inside an element (hint: not just a div) with class jumbotron using a class selector. Give them a font-size of 20px, a 40px left and right padding and a 0 top and bottom padding, and a line-height of 40px.

• Class Selectors
• Border Radius
• CSS Padding and Shorthand Syntax