The Box Model - Portal customization

index.html

<h1>Box Model</h1>
<h1>Box Model 2</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 red background, some padding, and a black border.</li>
  <li>Give every <code>p</code> a blue 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: red;
  padding: 15px;
  border: 5px solid black;
}

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

code {
  color: black;
  background: white;
  padding: 2px 5px;
  border: 1px solid black;
}

the-box-model-portal-customization.markdown

The Box Model - Portal customization

A Pen by Vidhyadharan Deivamani on CodePen.

License.