The Box Model - Portal customization - 2

index.html

<h1>Box Model</h1>

<p>Every element on the page has its own box, which can be styled using CSS.</p>
<p>From the inside out:</p>
<ol>
  <li>content</li>
  <li>padding</li>
  <li>border</li>
  <li>margin</li>
</ol>

<h2>Background</h2>
<p>Keep in mind that a <code>background</code> will cover the content and the padding.</p>

<h2>Together</h2>
<ol>
  <li>Give the <code>h1</code> a blue background, some padding, and a black border.</li>
  <li>Give every <code>p</code> a gray background, white text, some padding, and a black border.</li>
  <li>Give every <code>code</code> element a white background, black text, a little padding, and a thin border.</li>
</ol>

<h2>Now You Try</h2>
<ol>
  <li>Try adding styles for the <code>h2</code>s, <code>ol</code>s, and <code>li</code>s on this page.</li>
  <li>Look into the syntax for <code>margin</code> and try adding more space around elements by using them.</li>
</ol>

style.css

body {
  font-family: sans-serif;
  line-height: 1.5;
}

h1 {
  background: #0899CC;
  padding: 15px;
  border: 5px solid Black;
}

p {
  color: white;
  background: gray;
  padding: 15px;
  border: 5px solid black;
}

code {
  color: black;
  background: white;
  padding: 2px 5px;
  border: 2px solid black;
}
h2{
  margin: 5px 5px;
  color: white;
  background:red;
  border: 2px solid black;
  padding: 2px 5px;
}
ol{
  border: 2px solid black;
  padding: 10px 10px;
  background: lightgreen;
  margin: 10px 10px;
  margin-left: 10px;
  
}

li{
  border: 2px solid black;
  padding: 10px 10px;
  background: lightblue;
  margin: 10px 10px;
  margin-left: 10px;
  
}

the-box-model-portal-customization-2.markdown

The Box Model - Portal customization - 2

A Pen by Vidhyadharan Deivamani on CodePen.

License.