<link>
to an external stylesheetstyle.css
fromindex.html
.- Use class selectors to style the Jumbotron of the Icebreaker Homepage.
- 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 p
s 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
.