# CSS Lab Solutions

## CSS Newspaper Solutions

### Part 1

<style>
  article h1 {
    /* Solution */
    font-size: 3rem;
    text-decoration: underline;
    font-family: Courier;
    text-transform: uppercase;
    /* Solution */
  }
</style>

### Part 2

<style>
  article {
    font-family: Courier;
  }
  article p {
    /* Solution */
    line-height: 1.5;
    text-indent: 1.5rem
    /* Solution */
  }
</style>

### Part 3

<style>
  * { box-sizing: border-box; }

  main {
    font-family: Courier;
    text-align: center;
  }
  section.sports {
    width: 100%;
    height: 25%;
    border: 10px dashed blue; /* Solution */
  }
  section.leisure {
    width: 100%;
    height: 75%;
    border-top: 2rem solid gold; /* Solution */
  }
</style>

### Part 4

<style>
  main {
    font-family: Courier;
  }
  img {
    border: 2px solid black;
    width: 25%;
    margin: 1rem; /* Solution */
  }
</style>

### Part 5

<style>
  main {
    font-family: Courier;
  }
  img {
    border: 2px solid black;
    width: 25%;
    padding: 1rem; /* Solution */
  }
</style>

### Part 6

<style>
  main {
    font-family: Courier;
  }
  img {
    border: 2px solid black;
    width: 25%;
    padding: 1rem;
    /* Solution */
    margin: 1rem;
    background-color: white;
    /* Solution */
  }
</style>

### Part 7

<style>
  body {
    font-family: Courier;
  }
  header, h5 {
    text-align: center;
  }
  h5 {
    font-size: 2rem;
    margin: 0;
  }
  section {
    /* Solution */
    width: 50%;
    position: absolute;
    /* Solution */
  }
  .cat {
    border-top: 10px solid gold;
    right: 0; /* Solution */
  }
  .dog {
    border-top: 10px solid red;
    left: 0; /* Solution */
  }
</style>

### Part 8

<style>
  h1 {
    font-family: Courier;
    color: white;
    text-align: center;
    font-size: 2rem;
  }
  header {
    height: 40%;
    /* Solution */
    background-image: url("catstronaut.jpg");
    background-size: cover;
    background-position: top right;
    /* Solution */
  }
</style>

### Part 9

<style>
  article {
    font-family: Courier;
  }
  #paragraph-one img {
    margin: 0 1rem; /* Solution */
  }
  #paragraph-two img {
    float: right;
    margin: 0 1rem; /* Solution */
  }
  img {
    width: 150px;
    height: 150px;
    float: left; /* Solution */
  }
</style>

### Part 10

<style>
  article {
    font-family: Courier
  }
  #red {
    left: 0;
    background-color: red; /* Solution */
  }
  #blue {
    right: 0;
    background-color: blue; /* Solution */
  }
  .box {
    width: 75%;
    height: 25%;
    position: absolute;
    opacity: 50%; /* Solution */
  }
</style>

## CSS Dinner Solutions

### **Level 1 of 12**
**Prompt –** Select the plates (Type Selector)
- `table.html`

  <div class="table">
    <plate />
    <plate />
  </div>

<details><summary>Solution</summary>

`style.css`

    plate {
      /* Styles would go here. */
    }

</details>

### **Level 2 of 12**
**Prompt –** Select the bento boxes (Type Selector)
- `table.html`

  <div class="table">
    <bento />
    <plate />
    <bento />
  </div>

<details><summary>Solution</summary>

`style.css`

    bento {
      /* Styles would go here. */
    }

</details>

### **Level 3 of 12**
**Prompt –** Select the fancy plate (ID Selector)
- `table.html`

  <div class="table">
    <plate id="fancy" />
    <plate />
    <bento />
  </div>

<details><summary>Solution</summary>

`style.css`

    #fancy {
      /* Styles would go here. */
    }

</details>

### **Level 4 of 12**
**Prompt –** Select the apple on the plate (Descendant Selector)
- `table.html`

  <div class="table">
    <bento />
    <plate />
      <apple />
    </plate>
    <apple />
  </div>

<details><summary>Solution</summary>

`style.css`

    plate apple {
      /* Styles would go here. */
    }

</details>

### **Level 5 of 12**
**Prompt –** Select the pickle on the fancy plate (Combine the Descendant & ID Selectors)
- `table.html`

  <div class="table">
    <bento>
      <orange />
    </bento>
    <plate id="fancy">
      <pickle />
    </plate>
    <plate>
      <pickle />
    </plate>
  </div>

<details><summary>Solution</summary>

`style.css`

    #fancy pickle {
      /* Styles would go here. */
    }

</details>

### **Level 6 of 12**
**Prompt –** Select the small apples (Class Selector)
- `table.html`

  <div class="table">
    <apple />
    <apple class="small" />
    <plate>
      <apple class="small" />
    </plate>
    <plate />
  </div>

<details><summary>Solution</summary>

`style.css`

    .small {
      /* Styles would go here. */
    }

    /* OR */

    apple.small {
      /* Styles would go here. */
    }

</details>

### **Level 7 of 12**
**Prompt –** Select the small oranges (Combine the Class Selector)
- `table.html`

  <div class="table">
    <apple />
    <apple class="small" />
    <bento>
      <orange class="small" />
    </bento>
    <plate>
      <orange />
    </plate>
    <plate>
      <orange class="small" />
    </plate>
  </div>

<details><summary>Solution</summary>

`style.css`

    orange.small {
      /* Styles would go here. */
    }

</details>

### **Level 8 of 12**
**Prompt –** Extra Credit: Select the small oranges in the bentos
- `table.html`

  <div class="table">
    <bento>
      <orange />
    </bento>
    <orange class="small" />
    <bento>
      <orange class="small" />
    </bento>
    <bento>
      <apple class="small" />
    </bento>
    <bento>
      <orange class="small" />
    </bento>
  </div>

<details><summary>Solution</summary>

`style.css`

    bento orange.small {
      /* Styles would go here. */
    }

</details>

### **Level 9 of 12**
**Prompt –** Extra Credit: Select all the things! (Universal Selector)
- `table.html`

  <div class="table">
    <apple />
    <plate>
      <orange class="small">
    </plate>
    <bento />
    <bento>
      <orange />
    </bento>
    <plate id="fancy" />
  </div>

<details><summary>Solution</summary>

`style.css`

    * {
      /* Styles would go here. */
    }

</details>

### **Level 10 of 12**
**Prompt –** Extra Credit: Select the apple directly on a plate (Child Selector)
- `table.html`

  <div class="table">
    <plate>
      <bento>
        <apple />
      </bento>
    </plate>
    <plate>
      <apple />
    </plate>
    <plate />
    <apple />
    <apple class="small" />
  </div>

<details><summary>Solution</summary>

`style.css`

    plate>apple {
      /* Styles would go here. */
    }

</details>

### **Level 11 of 12**
**Prompt –** Extra Credit: Select the top orange (First Child Pseudo-selector)
- `table.html`

  <div class="table">
    <bento />
    <plate />
    <plate>
      <orange />
      <orange />
      <orange />
    </plate>
    <pickle class="small" />
  </div>

<details><summary>Solution</summary>

`style.css`

    orange:first-child {
      /* Styles would go here. */
    }

    /* OR */

    plate orange:first-child {
      /* Styles would go here. */
    }

</details>

### **Level 12 of 12**
**Prompt –** Extra Credit: Select the 3rd plate (Nth Child Pseudo-selector)
- `table.html`

  <div class="table">
    <plate />
    <plate />
    <plate />
    <plate id="fancy" />
  </div>

<details><summary>Solution</summary>

`style.css`

    plate:nth-child(3) {
      /* Styles would go here. */
    }

</details>