# Quiz 2 CSS
1. Consider the following HTML and CSS code snippets. How will the text "Hello, User!" be displayed based on CSS specificity and inheritance rules?
```
Welcome to the website!
Hello, User!
```
```css
span {
color: blue;
display: inline-block;
font-size: 14px;
}
#container #greeting-text {
color: green;
font-size: 30px;
}
#greeting-text[data-info="hello"] {
color: purple;
font-size: 20px;
}
.main-content > #greeting-text::first-letter {
color: red;
font-size: 10px;
}
#container .highlight[data-info="hello"] {
color: orange;
font-size: 16px;
}
```
To verify your answer at [https://codepen.io/Yong-Zhuang/pen/yLdwRLP](https://codepen.io/Yong-Zhuang/pen/yLdwRLP).
Given the following DOM tree, please write the CSS selectors using possible expressions to target the specified text nodes. You may appropriately use pseudo-classes such as `:first-child`, `:last-child`, `:nth-child`, `:first-of-type`, etc.
```html
One
TwoThreeFour
Seven
Eight
- Nine
- Ten
-
- Eleven
- Twelve
```
To verify your answer, use the following CSS code on the online platform CodePen at [https://codepen.io/Yong-Zhuang/pen/PoXRBWy](https://codepen.io/Yong-Zhuang/pen/PoXRBWy):
```css
your-css-selector {
color: red;
}
```
**Example Question**
- **Only** Node "one" should be selected:
- Answer: `h1:first-child` or `h1:first-of-type`
---
2. **Only** Node "Two" should be selected:
3. **Only** Node "Three" should be selected:
4. **Only** Node "Six" should be selected:
5. **Only** Node "Eight" should be selected:
6. **Only** Node "Ten" should be selected:
7. **Only** Node "Twelve" should be selected:
8. You UI design team has decided on the following layout for the front page of your web app:
- The height of the top navigation is 40px
- The height of the app status and notification messages is 60px
- The left and right panel take 25% of the width each
- The app status and notification message panel takes 50% of the width each
```{image} ../assets/img/layout.jpg
:alt: dom
:width: 800px
:align: center
```
Using the HTML provided below, apply CSS and the CSS Grid layout to replicate the design shown in the image above. To verify your solution, use the online platform CodePen at [https://codepen.io/Yong-Zhuang/pen/XWoqgVK](https://codepen.io/Yong-Zhuang/pen/XWoqgVK).
```html
```