David Nguyen
Targeted CSS

Targeted CSS

David Nguyen's photo
David Nguyen
·

2 min read

Learner Instructions

Step 1: Add padding of 10px to the section class

.section {
    padding: 10px;
}

Step 2: Change the weight of the font to bold for the label class

.label {  
    font-weight: bold;
}

Step 3: For the description class, change styling of the font to italics.

.description {
    font-style: italic;
}

Step 4: Additionally add a border on the top side of 2px that is solid and has a color code of '#495E57'

border-top: 2px solid #495E57;

Step 5: In the class item-name, change the margin to 25 pixels and font-size to 12 pixels.

.item-name {
    margin: 25px;
    font-size: 12px;
}

Step 6: Float the contents of the element b to the right.

b {
    float: right;
}

Step 7: Add a margin to the top of -15px.

margin-top: -15px; /* Inside b */

Step 8: Change the color of the element to darkcyan

color: darkcyan; /* Inside b */

Step 9: Add a child combinator for h3 tags that follow the div tag and assign them rules as follows:

Step 9.a change the font size as well as margin to 20px

div > h3 {
    font-size: 20px;
    margin: 20px;
}

Step 9.b: Change the alignment of text to center

    text-align: center;

Step 9.c: Assign it a color code of '#495E57'

    color: #495E57;

Step 10: Add an adjacent sibling combinator for items of class low that follow class label and change their color to brown

.label + .low {
  color: brown; 
}

Step 11: Add a general sibling combinator for div tags that follow other div tags and change their color to RGB values of 90,90,90.

div ~ div {
  color: rgb(90, 90, 90);
}

* {
  font-family: Monaco;
}

.menu, .ll {
  text-align: center;
  color: #fa9f42;
}

.ll {
  font-size: 30px;
  margin-bottom: 20px;
  border-bottom: 2px solid #495e57;
}

.menu-container {
  max-width: 800px;
  display: flex;
  justify-content: center;
  background-color: #e0e0e2;
}

.section {
  padding: 10px;
}

.label {
  font-weight: bold;
}

.description {
  font-style: italic;
  border-top: 2px solid #495e57;
}

.item-name {
  margin: 25px;
  font-size: 12px;
}

b {
  float: right;
  margin-top: -15px;
  color: darkcyan;
}

div > h3 {
  font-size: 20px;
  margin: 20px;
  text-align: center;
  color: #495e57;
}

.label + .low {
  color: brown;
}

div ~ div {
  color: rgb(90, 90, 90);
}
Targeted CSS