Session 05 - CSS and Layouts
Examples

• Example 5.1 - Background Color  
  <div style="background-color: rgb(100%,66%,33%); padding: 1em; ; margin: 1em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>rgb(100%,66%,33%) </div><div style="background-color: #ffa854; padding: 1em; margin: 1em; "> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>#ffa854 </div><div style="background-color: rgb(255,168,84); padding: 1em; ; margin: 1em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>rgb(255,168,84) </div><div style="background-color: hsl(29,100%,66%); padding: 1em; ; margin: 1em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>hsl(29,100%,66%) </div>
• Example 5.2 - Flex  
  <div id="f1container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div></div>#f1container { display: flex; } .box { padding: 2em; border: medium solid black; width: 3em; } .box1, .box2, .box3, .box4, .box5 { flex-grow: 0; flex-shrink: 0; flex-basis: 5em; } .box1 { background-color: lightpink;} .box2 { background-color: lightsteelblue;} .box3 { background-color: wheat;} .box4 { background-color: plum;} .box5 { background-color: palegreen;}
• Example 5.3 - Flex  
  <div id="f1container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>.box { padding: 2em; border: medium solid black; width: 3em; } #f1container { display: flex; } .box1 { flex-basis: 15%; } .box2 { flex-basis: 25%; } .box3 { flex-basis: 50%; } .box1 { background-color: lightpink;} .box2 { background-color: lightsteelblue;} .box3 { background-color: wheat;} .box4 { background-color: plum;} .box5 { background-color: palegreen;}
• Example 5.4 - Flex  
  <div id="f1container"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>.box { padding: 2em; border: medium solid black; width: 3em; } #f1container { display: flex; } .box1 { flex-grow: 1; flex-shrink: 1; flex-basis: 200px; } .box2 { flex-grow: 1; flex-shrink: 1; flex-basis: 100px; } .box3 { flex-grow: 1; flex-shrink: 1; flex-basis: 500px; } .box1 { background-color: lightpink;} .box2 { background-color: lightsteelblue;} .box3 { background-color: wheat;} .box4 { background-color: plum;} .box5 { background-color: palegreen;}