CSS 103 – Flow and position

css-103.md

CSS 103

Flow and position

Key terms and phrases

1. element levels
   • block
   • inline
   • inline block
2. flow
3. position
   • absolute
   • fixed
   • static
   • relative

Starter code

HTML

<ul>
  <li class="bg1">1</li>
  <li class="bg2">2</li>
  <li class="bg3">3</li>
  <li class="bg4">4</li>
  <li class="bg5">5</li>
  <li class="bg6">6</li>
  <li class="bg7">7</li>
  <li class="bg8">8</li>
  <li class="bg9">9</li>
</ul>

CSS

ul {
  list-style-type: none;
}

li {
  color: rgba(20, 20, 20, 0.4);
  display: inline-block;
  font-family: sans-serif;
  font-size: 3rem;
  padding: 20px 60px;
}

.bg1 {
  background-color: cornsilk;
}

.bg2 {
  background-color: cornflowerblue;
}

.bg3 {
  background-color: powderblue;
}

.bg4 {
  background-color: pink;
}

.bg5 {
  background-color: linen;
}

.bg6 {
  background-color: gainsboro;
}

.bg7 {
  background-color: lavender;
}

.bg8 {
  background-color: cadetblue;
}

.bg9 {
  background-color: papayawhip;
}