<link>
to an external stylesheetstyle.css
fromindex.html
.- Use nested element selectors to style the navigation of the Icebreaker homepage.
- Play with borders, heights, padding, margin, inline display, and floats.
We're going to style the navigation of our Icebreakers site. The goal is to move the h3
to the left using floats and the nav
to the right. We're also going to add some other styles like a bottom border and some colors. By the end of this lab the navigation in index.html
will look like:
Code your styles in style.css
and include it in index.html
with a <link>
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.
Give the header
element a height
of 100px
and a bottom-border
of 1px solid #cccccc
Select the nav
element by finding it nested under the header
(hint - parent_element child_element {}
). Float the nav
to the right.
Select the ul
element by finding it nested under the nav
. Reset the ul
's padding to 0 and give it a top margin of 40px and reset all other margins to 0
. You can use a shorthand margin
property for this - margin: TOP RIGHT BOTTOM LEFT
Select the li
s with a triple nested selector searching for all li
s inside a ul
inside a nav
. Set the li
display
property to inline and add a right margin of 10px
Select all a
s inside a nav
with a nested selector. Remove their text-decoration
, give them a color
of #007bff
and a font-size of 18px
Select the h3
inside header
with a nested selector. Float the h3 to the left and make the font-size
30px
.
Select the a
with a tripple nested selector and style it with no text-decoration
and a color
of #868e96
.