CSS note from The complete 2024 web development bootcamp

1.

p {

color: red;

}

.note {

font-size: 20px;

}

#id-selector-demo {

color: green;

}

li[value="4"] {

color: blue;

}

* {

text-align: center;

}

https://appbrewery.github.io/box-model/

2. Combining CSS Selectors

<p>Yellow Text</p>

<div class="box inner-box">

<p>White Text</p>

</div> 

p {

color: yellow;

}

.inner-box p {

color: white;

}

Descendant = Apply to all offsprings of left side

selector selector { ... }

Group = Apply to both selectors

selector, selector { ... }

Child = Apply to direct child of left side

selector > selector { ... }

Chaining = Apply where all selectors are true

selectorselector { ... }

3. CSS positioning

https://appbrewery.github.io/css-positioning/

4.

display: none/inline/block/inline-block/grid/flex