frontend Archives - Complete, Concrete, Concise https://complete-concrete-concise.com/tag/frontend/ Practical Information Without The Bloat Mon, 09 Apr 2018 15:17:38 +0000 en-US hourly 1 https://wordpress.org/?v=6.9 A Basic CSS Example https://complete-concrete-concise.com/tutorials/webdev/front-end-basics/a-basic-css-example/ Mon, 09 Apr 2018 15:17:38 +0000 https://complete-concrete-concise.com/?p=3569 A (garishly) colourful CSS example page.

The post A Basic CSS Example appeared first on Complete, Concrete, Concise.

]]> A very colourful webpage.

Contents

  1. A Colourfully Styled Page
  2. The Source Code
  3. Notes

A Colourfully Styled Page

You can see how the page looks here.

The Source Code

<!DOCTYPE HTML>
<html>
  <head>
    <title>Hello World</title>
    <meta charset="utf-8"  />

    <style>

      body {
        background-color:green;
      }

      h1 {
        background-color:orange;
      }

      h2 {
        background-color:aqua;
      }

      p {
        background-color: yellow;
      }


      li {
        background-color:silver;
      }

      ol {
        background-color:fuchsia;
      }

      ul {
        color:lime;
      }

      strong {
        color:white;
        background-color:black;
      }

      mark {
        background-color:white;
        color: blue;
      }

      a {
        background-color:blue;
        color: yellow;
      }

    </style>

  </head>
  <body>
    <h1>This is a heading (for testing purposes)</h1>

    <p>Paragraphs are the bread and butter of HTML.</p>

    <p>They can include <strong>strong</strong> tags.
    </p>

    <ol>
      <li>Lists are cool!</li>
      <li>The list things.</li>
      <li>This one has an <i>i</i> inside.</li>
      <li><p>This one contains a &lt;ul&gt;:</p>
        <ul>
          <li>Item 1</li>
          <li><mark>Marked item</mark></li>
          <li>Final item</li>
        </ul>
        <li><h2>What happens with an h2?</h2></li>
      <li>Final order</li>
    </ol>

    <p>A final paragraph with a dummy
      <a href="#">link</a> inside it.</p>

  </body>
</html>

Notes

  1. Notice that some items are nested inside other items.
  2. Notice that there seems to be some sort of border or margin around nested elements (they don’t go all the way from one edge of the display to the other)
  3. Notice that some elements (like strong) only have a limited effect, but other elements seem to stretch almost across the entire display.

The post A Basic CSS Example appeared first on Complete, Concrete, Concise.

]]>