<head>
  <title>CSS</title>
    <style>
      :root {
        --font-color: #424242;
        --accent-color: #222;
        --accent-font-color: #ddd;
      }
      * {
        box-sizing: border-box;
      }
      html, body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
      }
      body {
        background-color: var(--bg-color);
        margin: 0;
        font-family: Roboto, sans-serif;
        font-size: 1.2em;
        line-height: 1.5;
        color: var(--font-color);
        display: grid;
        grid-template-rows: 50px 1fr 35px;
      }
      header {
        border-bottom: 1px solid rgb(155, 50, 43, 0.5);
        font-weight: 300;
        padding: 0 1em;
        display: grid;
        justify-content: space-between;
        align-items: center;
        
      }
      main {
        overflow-y: auto;
        padding: 0 1em;
        height: 100%;
      }
      pre {
        margin: 0;
        font-size: 12px;
        line-height: 20px;
        background-color: var(--accent-color);
        color: var(--accent-font-color);
      }
      code {
        font-family: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace;
      }
      footer {
        border-top: 1px solid rgb(155, 50, 43, 0.5);
        display: flex; 
        align-items: center;
        justify-content: center;
        grid-row: 3/-1;
        width: 100%;
      }
  </style>
</head>
<body>
  
  <header>
    <nav>
      <h1>CSS Examples</h1>
    </nav>
  </header>
  <main>
    <h2>Ways to style with CSS</h2>
    <p>CSS, Cascading Style Sheets, are used to describe how elements should be presented to users. There are 3 main ways to style CSS: internal style tag, inline styles, and imported stylesheets.</p>
    <div style="display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: .5em;">
    <div>
      <h3>Internal HTML Style Tag</h3>
      <pre><code>  
  &lt;style&gt;
    body {
      width: 100%;
      height: 100%;
    }
  &lt;style&gt;</code>
    </pre>
    </div>
   
    <div>
       <h3>Inline HTML Style</h3>
      <pre><code>
      &lt;div style="
          width: 100%;
          height: 100%;
      &lt;div&gt;
      
      </code>
    </pre>
    </div>
    </div>
    <div>
      <h3>Imported stylesheet</h3>
      <pre><code>
      &lt;link rel="stylesheet" type="text/css" href="mystyle.css"&gt;</code>
    </pre>
    </div>
    <h2>External Stylesheet Examples</h2>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: .5em; text-align: center;">
      <div class="stylesheet-ex-class">
        <p>This is an example of a <strong><em>CLASS</em></strong> styled in an external stylesheet.</p>
      </div>
      <div id="stylesheet-ex-id">
        <p>This is an example of an <strong><em>ID</em></strong> styled in an external stylesheet.</p>
      </div>
    </div>
</main>
  <footer>&copy; 
    <script>document.write(new Date().getFullYear())           </script>
  </footer>
 
.stylesheet-ex-class {
  color: whitesmoke;
  background-color: #424242;
  padding: 0.5em;
}

#stylesheet-ex-id {
  color: whitesmoke;
  background-color: rgb(155, 50, 43);
  padding: 0.5em;
}

strong {
  text-decoration: underline;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.