Tea Cozy basic html and css example need to understand specificity

Get Help CSS
#1

I still don’t understand when playing around with this if I try to align the Mission, Featured Tea and Locations bits the nav{} prioritises or is more specific than the .flex-container class. As .flex-container is a class and nav{} is an element the .flex-container class should override the nav{} element. However the only way for me to edit the position of Mission, Featured Tea and Locations is within the nav {} element in css.

Thanks!

<!DOCTYPE html>
<html>

<head>
  <title>The Tea Cozy</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

  <!-- Header -->

  <header class="flex-container">
    <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" />
    <nav>
      <span><a href="#mission">Mission</a></span>
      <span><a href="#store">Featured Tea</a></span>
      <span><a href="#locations">Locations</a></span>
    </nav>
  </header>

  <!-- Main Content Container -->

  <div class="main">

    <!-- Mission Section -->

    <div id="mission" class="flex-container">
      <div class="content">
        <h2>Our Mission</h2>
        <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
      </div>
    </div>

    <!-- Store Section -->

    <div id="store">
      <h2>Tea of the Month</h2>
      <h4>What's Steeping at The Tea Cozy?</h4>
      <div class="flex-container items">
        <div class="item">
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" />
          <span>Fall Berry Blitz Tea</span>
        </div>
        <div class="item">
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg" />
          <span>Spiced Rum Tea</span>
        </div>
        <div class="item">
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg" />
          <span>Seasonal Donuts</span>
        </div>
        <div class="item">
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg" />
          <span>Myrtle Ave Tea</span>
        </div>
        <div class="item">
          <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg" />
          <span>Bedford Bizarre Tea</span>
        </div>
      </div>
    </div>

    <!-- Locations Section -->

    <div id="locations">
      <h2>Locations</h2>
      <div class="flex-container locations">
        <div class="location">
          <h3>Downtown</h3>
          <p>384 West 4th St</p>
          <p>Suite 108</p>
          <p>Portland, Maine</p>
        </div>
        <div class="location">
          <h3>East Bayside</h3>
          <p>3433 Phisherman's Avenue</p>
          <p>(Northwest Corner)</p>
          <p>Portland, Maine</p>
        </div>
        <div class="location">
          <h3>Oakdale</h3>
          <p>515 Crescent Avenue</p>
          <p>Second Floor</p>
          <p>Portland, Maine</p>
        </div>
      </div>
    </div>
  </div>

    <!-- Contact Section -->
    <div id="contact">
      <h2>The Tea Cozy</h2>
      <h5>contact@theteacozy.com</h5>
      <h5>917-555-8904</h5>
    </div>

    <!-- Footer Section -->
    <footer>
      <h5>copyright The Tea Cozy 2017</h5>
    </footer>
  </body>
</html>

body {
  margin: 0;
  font-family: "Helvetica", sans-serif;
  color: seashell;
  background-color: black;
  font-size: 22px;
  text-align: center;
}

a {
  color: seashell;
}

h2,
h3,
h4 {
  margin: 0;
  padding: 10px;
}

.flex-container {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}

/* Header Section */

header {
  width: 100%;
  position: fixed;
  z-index: 1;
  height: 69px;
  background-color: black;
  border-bottom: 1px solid seashell;
  align-items: center;
}

header img {
  height: 50px;
  padding-left: 10px;
}

nav {
  text-align: right;
  flex-grow: 1;
}

nav span {
  display: inline;
  padding: 20px 10px;
}

/* Main Section */

.main {
  padding-top: 69px;
  opacity: 0.9;
  width: 1200px;
  margin: auto;
}

/* Mission Section */

#mission {
  height: 700px;
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
  padding-top: 70px;
}

#mission .content {
  margin: auto;
  background-color: black;
  width: 100%;
}

/* Store Section */

#store {
  height: 700px;
  width: 1000px;
  margin: auto;
  padding-top: 70px;
}

.item {
  padding: 5px;
}

.item img {
  height: 200px;
  margin: 10px;
  display: block;
}

.item span {
  display: block;
  padding: 5px;
  font-weight: bold;
  text-align: center;
}

/* Location Section */

.flex-container.locations {
  padding-top: 5px;
}

#locations {
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg");
  height: 500px;
  padding-top: 70px;
}

#locations .flex-container {
  margin: auto;
  width: 1100px;
}

.location {
  opacity: 1.0;
  padding: 10px;
  margin: 5px 20px;
  background-color: black;
  flex-basis: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Contact Section */

#contact {
  height: 200px;
}

/* Footer Section */

footer {
  text-align: left;
  padding-left: 20px;
}
#2

Hi @chip8900216944
not sure, what you mean by:

The <nav> Element is a block level element as well as the <header> element which your class flex-container is applied to. The <nav> element doesn’t have a class with your custom styles, so the default styles of the browser are applied. It doesn’t necessarily inherit the styles you apply to a wrapping element like <header>.
Which behaviour do you expect for your <nav> element?

#3

For example why do we need:
justify content in .flex-container
align-items in header
and text align in nav
Shouldn’t justify content in .flex-container do all of this. I don’t understand which rules apply to which elements

#4

You set justify-content to left. The default value is flex-start, which, if you haven’t set the direction to reverse, aligns all items to the left. That’s why you don’t see an effect.
When you play around with these settings, put a visible border to your nav and your nav items as well as the logo image. Than you will see the effect of these settings much better. If you set align-items to center and change the size of your browser window, you should see a difference.
The flex setting in your flex-container apply just to the direct children <nav> and <img>. For the alignment inside the <nav> element you have to apply seperate styles. Since <span> is an inline element, text-align works here.
Here you can find a good guide to flex styles:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

#5

Great tip re boarder, thanks!

#6

Hey, I have used different coloured borders and have worked for all up until the header element, when styling a border using header{ } no border appears. Why is this?

#7

Just kept playing around with it and think it is about specificity and class being more specific than attributes.
The headers class=“flex-container” is more specific than header. Is this right?

#8

If you don’t override it anywhere later (which in your posted code you don’t), it applies. Your header background-color is black, maybe if you change that color to anything lighter, you see it?

If you define styles multiple times for one element, they will be prioritised:

  1. If the selector e.g. header is the same, the style which was defined later in the stylesheet applies
  2. If you use a media query, it overrides the style defined without a media query, if the condition is met
  3. If you have a definition more specific like #locations header.flex-container{}, this style applies rather than header{}