Reel Good Reviews - Front End Engineer - Style priority (what overrules other styles)

https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-22-fundamentals-of-web-design/modules/fecp-22-learn-text-design/projects/text-design

Hi guys have come to the forums before whilst doing the Front End Engineer course. An example is I looked at the solution for the mysterious organism project but couldn’t find anything on Reel Good Review.

In Reel Good Review in part 7 I am asked to style the HTML element that includes ‘Stars’ as text. The video of walkthrough states that in terms of styling priority and heirarchy that if a style has a class and also an selector type such as (li) for list that the lower down the css sheet the greater the priority.

I have included the HTML and CSS below. The ‘stars-label’ class is applied to the

  • element with text ‘Stars:’. However in the CSS I have linked below no matter if I write font-size 40px for example in the li selector with a class of .stars-label the font size wont change however if I change the .movie-description-stars class with selector li, it will change the font size.

    since stars-label is further down the CSS sheet and has both a class and a selector should it not overrule the .movie-description-stars class

    .stars-label li {
    }

    Codecademy | Color For UI
    <!-- Meta -->
    <meta charset="utf-8" />
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1 user-scalable=no"
    />
    
    <!-- CSS -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
    />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    
    <!-- Fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"
      rel="stylesheet"
    />
    
    <!-- Site Main Content -->
    <main role="main" class="site-main">
      <header aria-labelledby="page-title" class="clearfix site-main-header">
        <div class="container">
          <h1 id="page-title">Recently Added Reviews</h1>
        </div>
      </header>
      <section
        role="region"
        aria-label="featured-movie-description"
        class="site-main-section featured-movie-section"
      >
        <div class="container">
          <div class="section-header">
            <p>Now Trending</p>
          </div>
          <div>
            <img
              src="https://content.codecademy.com/courses/learn-text-design/project%20images/get-out.png"
              alt="Get Out Movie Cover"
              class="movie-description-img"
            />
            <div class="movie-description">
              <h2>Get Out</h2>
              <p><small>(2017)</small></p>
              <img
                src="https://content.codecademy.com/courses/learn-text-design/project%20images/4-point-5-stars.svg"
                alt="4.5 Star Review"
              />
              <ul class="movie-description-stars">
                <li class="stars-label">Stars:</li>
                <li>Daniel Kaluuya,</li>
                <li>Allison Williams,</li>
                <li>Bradley Whitford</li>
                <li>
                  <a href="#" class="button movie-description-button"
                    >see all</a
                  >
                </li>
              </ul>
            </div>
          </div>
          <p class="movie-description-category">Horror, Mystery, Thriller</p>
          <p>
            Now that Chris and his girlfriend, Rose, have reached the
            meet-the-parents milestone of dating, she invites him for a weekend
            getaway upstate with Missy and Dean. At first, Chris reads the
            family's overly accommodating behavior as nervous attempts to deal
            with their daughter's interracial relationship, but as the weekend
            progresses, a series of increasingly disturbing discoveries lead him
            to a truth that he could have never imagined.
          </p>
        </div>
      </section>
    
      <!-- User Reviews -->
      <section
        role="region"
        aria-label="movie-reviews"
        class="site-main-section"
      >
        <div class="container">
          <div class="review-header">
            <p>Reviews for</p>
            <p>Get Out</p>
          </div>
          <ul>
            <li class="card">
              <div class="card-header clearfix">
                <div class="card-header-left">
                  <h3>Michael Bonner</h3>
                  <img
                    src="https://content.codecademy.com/courses/learn-text-design/project%20images/4-point-5-stars.svg"
                    alt="4.5 Star Review"
                  />
                </div>
                <img
                  src="https://content.codecademy.com/courses/learn-text-design/project%20images/review-1.jpg"
                  class="card-header-right"
                  alt="Michael Bonner's Picture"
                />
              </div>
              <p>
                Intense, thrilling, and very funny. One of the best "horror"
                movies I can remember.
              </p>
            </li>
            <li class="card">
              <div class="card-header clearfix">
                <div class="card-header-left">
                  <h3>Spencer Macklin</h3>
                  <img
                    src="https://content.codecademy.com/courses/learn-text-design/project%20images/4-stars.svg"
                    alt="4 Star Review"
                  />
                </div>
                <img
                  src="https://content.codecademy.com/courses/learn-text-design/project%20images/review-1.jpg"
                  class="card-header-right"
                  alt="Spencer Macklin's picture"
                />
              </div>
              <p>
                Very well wrote, talented actors, perfect! Big surprises, Very
                good film.
              </p>
            </li>
            <li class="card">
              <div class="card-header clearfix">
                <div class="card-header-left">
                  <h3>Julie Kipper</h3>
                  <img
                    src="https://content.codecademy.com/courses/learn-text-design/project%20images/4-point-5-stars.svg"
                    alt="4.5 Star Review"
                  />
                </div>
                <img
                  src="https://content.codecademy.com/courses/learn-text-design/project%20images/review-3.jpg"
                  class="card-header-right"
                  alt="Julie Kipper's Picture"
                />
              </div>
              <p>
                Twists and turn that will make you instantly want to see it
                again.
              </p>
            </li>
          </ul>
        </div>
      </section>
      <section
        role="region"
        aria-label="movie-review-preview"
        class="site-main-section"
      >
        <div class="container">
          <div class="section-header">
            <p>Also Trending</p>
          </div>
          <div class="movie-description-container">
            <img
              src="https://content.codecademy.com/courses/learn-text-design/project%20images/daddys-home-2.jpg"
              alt="Daddy's Home 2 Cover"
              class="movie-description-img"
            />
            <div class="movie-description">
              <p>Daddy's Home 2</p>
              <p><small>(2017)</small></p>
              <img
                src="https://content.codecademy.com/courses/learn-text-design/project%20images/4-stars.svg"
                alt="4 Star Review"
              />
              <a href="#" class="button movie-description-button"
                >see reviews</a
              >
            </div>
          </div>
        </div>
      </section>
    </main>
    
    <!-- Site Wide Footer -->
    <footer role="contentinfo" class="footer">
      <div class="container">
        <nav role="navigation" class="clearfix">
          <div class="footer-section">
            <form role="form">
              <input
                type="email"
                placeholder="Search by movie title"
                class="footer-search-input"
              />
              <input
                type="submit"
                value="Search All Movies"
                class="button button-primary footer-search-button"
              />
            </form>
          </div>
          <ul class="footer-section">
            <li>
              <img
                src="https://content.codecademy.com/courses/learn-text-design/project%20images/logo.svg"
                alt="Reel Movie Reviews Logo"
                class="logo"
              />
            </li>
            <li>
              <p>
                <small>All Rights Reserved | &copy; <time>2017</time></small>
              </p>
            </li>
          </ul>
        </nav>
      </div>
    </footer>
    

    /* Site Stylesheet

    1. Global Styles
    2. Typography Styles
    3. Structure Styles
    4. Module Styles
    5. Component Styles
      ======================================== */

    /* 1. Global Styles
    ======================================== */

    • {
      box-sizing: border-box;
      }

    html {
    height: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    width: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    }

    body {
    height: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    width: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    }

    .clearfix::after {
    content: " ";
    clear: both;
    display: table;
    }

    /* 2. Typography Styles
    ======================================== */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    font-family: ‘Roboto’, Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 5px;
    transition: font-size 0.25s ease;
    color: #414546;
    }

    h1 {
    font-size: 37px;
    }

    h2 {
    font-size: 30px;
    }

    h3 {
    font-size: 18px;
    }

    p {
    color: #414546;
    font-family: ‘Roboto’, Georgia, serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 19px;
    margin: 0 0 10px;
    }

    a {
    color: #42A5F5;
    font-family: ‘Roboto’, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 23px;
    }

    li {
    color: #414546;
    font-family: ‘Roboto’, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 16px;
    list-style: none;
    }

    label {
    color: #414546;
    display: block;
    font-family: ‘Roboto’, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    margin-bottom: 5px;
    }

    img {
    width: 100%;
    }

    b,
    strong {
    font-weight: 700;
    }

    small {
    font-family: ‘Roboto’, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.25;
    }

    /* 3. Structure Styles
    ======================================== */
    .container {
    margin: 0 auto;
    max-width: 1160px;
    padding: 0 15px;
    }

    /* 4. Modules Styles
    ======================================== */

    /* Site Navigation */
    .site-header {
    background-color: #1B1B1B;
    padding: 20px 15px;
    }

    .site-header-nav {
    align-items: center;
    display: flex;
    }

    .site-nav-mobile {
    margin-left: auto;
    }

    .site-nav-left .logo {
    width: 120px;
    }

    /* Site Footer */
    .footer {
    background-color: #1B1B1B;
    margin: auto;
    padding: 30px 0px;
    text-align: center;
    }

    .footer-section {
    margin: 15px;
    }

    .footer .logo {
    margin-bottom: 5px;
    width: 120px;
    }

    .footer p {
    color: #62A7B3;
    font-weight: 400;
    margin-bottom: 5px;
    text-transform: uppercase;
    }

    .footer-search-input {
    background-image: url(“search icon”);
    background-position: 29% center;
    background-repeat: no-repeat;
    padding: 0px 0px 0px 33%;
    }

    .footer-search-button {
    border: none;
    width: 100% !important;
    }

    /* 5. Component Styles
    ======================================== */
    .button {
    border-radius: 2px;
    color: #1B1B1B;
    display: inline-block;
    font-family: ‘Roboto’, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    padding: 15px 40px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.5s ease;
    }

    .button:hover {
    opacity: 0.75;
    }

    .card {
    background-color: #FFFFFF;
    border-radius: 2px;
    box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.1);
    margin: 20px 0px;
    padding: 30px 30px 15px;
    }

    .card-header {
    display: block;
    margin-bottom: 15px;
    }

    .card-header-left {
    display: inline-block;
    width: 70%;
    }

    .card-header-left img {
    margin: 10px 0px;
    width: 60%;
    }

    .card-header-right {
    display: inline-block;
    float: right;
    width: 60px;
    }

    input,
    select,
    textarea {
    background-color: #FFFFFF;
    border-radius: 2px;
    border: 1px solid #F2F3F5;
    box-shadow: inset 1px 1px 3px 0 rgba(189,191,192,0.10);
    font-family: ‘Roboto’, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    height: 44px;
    margin-bottom: 15px;
    padding: 15px 45px;
    transition: border-color 0.5s ease;
    width: 100%;
    }

    input::placeholder {
    color: #A3A3A3;
    }

    input[type=“submit”] {
    cursor: pointer;
    height: auto;
    width: auto;
    }

    input:active,
    input:focus {
    border: 1px solid #F1EB58;
    outline: none;
    }

    /* 6. Page Styles
    ======================================== */

    .site-main-section {
    padding: 35px 0px;
    }

    .site-main-background {
    background-color: #34474F;
    bottom: 0;
    display: block;
    height: 600px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    }

    .site-main-header {
    background-color: #62A7B3;
    padding: 20px 0px;
    text-align: center;
    }

    .site-main-header h1 {
    color: #FFFFFF;
    text-transform: uppercase;
    }

    .section-header {
    margin-bottom: 20px;
    }

    .section-header p {
    border-bottom: 1px solid #62A7B3;
    color: #1B1B1B;
    font-size: 16px;
    font-weight: 300;
    line-height: 21px;
    padding-bottom: 5px;
    }

    .featured-movie-section {
    background-color: #1B1B1B;
    background-image: url(“https://content.codecademy.com/courses/learn-text-design/project%20images/get-out-background.jpg”);
    background-repeat: no-repeat;
    background-size: cover;
    }

    .featured-movie-section h2,
    .featured-movie-section small,
    .featured-movie-section li,
    .featured-movie-section p {
    color: #FFFFFF;
    }

    .movie-description-img,
    .movie-description {
    display: inline-block;
    width: 47%;
    }

    .movie-description {
    float: right;
    }

    .movie-description img {
    width: 80%;
    }

    .movie-description-stars {
    margin: 15px 0px;
    }

    .movie-description-stars li{
    font-size: 20px;
    }

    .movie-description-button {
    margin-top: 15px;
    }

    .movie-description-category {
    border-bottom: 1px solid #62A7B3;
    border-top: 1px solid #62A7B3;
    letter-spacing: -1px;
    margin: 20px auto;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    }

    .review-header {
    text-align: center;
    }

    .review-header h2 {
    text-transform: uppercase;
    }
    .stars-label li {
    color: blue;
    }

  • Hi there,

    When using this selector:

    .stars-label li {
    
    }
    

    You are attempting to select li descendants of .stars-label

    Just omit “li” from the selector and it will work. :slight_smile: