CodePen Embed - CSS

Live
​x
 
<html>
  <head>
    <title>Kaskadowość</title>
    <style>
      * {
        font-family: sans-serif;
      }
      h2 {
        color: purple;
      }
      .one span {
        display: inline-block;
        padding: 5px;
        margin: 5px;
        border: 1px solid rgba(0, 0, 0, 0.1);
      }
      p {
        border: 2px solid green;
        background: #f3f7f3;
        padding: 5px;
        margin: 10px 0;
        box-sizing: border-box;
      }
      .divs {
        display: inline-block;
        border: 2px solid black;
        background: #f3f3f3;
        padding: 10px;
        margin: 10px;
        box-sizing: border-box;
      }
      .div1 {
        width: 40%;
      }
      .div2 {
        width: 30vw;
      }
      .fonts {
        margin: 20px 0;
        font-size: 22px;
      }
      .fonts-relative {
        font-size: 2.5vw;
      }
    </style>
  </head>
  <body>
    <section class="one">
      <h2>Jednostki bezwzględne:</h2>
      <div>
        <span style="font-size: 24px">Font size: 24px</span>
        <span style="font-size: 16px">Font size: 16px</span>
        <span style="font-size: 2pc">Font size: 2pc</span>
        <span style="font-size: 1cm">Font size: 1cm</span>
        <span style="font-size: 8mm">Font size: 8mm</span>
        <span style="font-size: 0.2in">Font size: 0.2in</span>
      </div>
      <div>
        <p style="width: 200px">width: 200px</p>
        <p style="height: 2cm; width: 10cm">
          height: 2cm; width: 10cm
        </p>
      </div>
    </section>
    <section class="two">
      <h2>Jednostki względne:</h2>
      <p style="width: 100%">100%</p>
      <p style="width: 50%">50%</p>
      <p style="width: 10%">10%</p>
      <div class="divs div1">
        <h4>width: 40%</h4>
        <p style="width: 100%">width: 100%</p>
        <p style="width: 50%">width: 50%</p>
      </div>
      <div class="divs div2">
        <h4>width: 30vw</h4>
        <p style="width: 100%">width: 100%</p>
        <p style="width: 50%">width: 50%</p>
      </div>
      <div class="fonts">
        <span
          ><small
            >Rozmiar czcionki na "rodzicu" = 22px. Rozmiar czcionki na tagu
            <code>HTML</code> wynosi domyślnie 16px.</small
          ></span
        >
        <p style="width: 20em">width: 20em (20 * 22px)</p>
        <p style="width: 20rem">width: 20rem (20 * 16px)</p>
      </div>
      <div class="fonts fonts-relative">
        <span
          ><small
            >Rozmiar czcionki na "rodzicu" również może być względny i wynosić
            np. <code>2.5vw</code>, czyli 25% całej szerokości strony.</small
          ></span
        >
        <p style="width: 20em">width: 20em (20 * 0.25vw)</p>
        <p style="width: 20rem">width: 20rem (20 * 16px)</p>
      </div>
    </section>
  </body>
</html>
​
This Pen is owned by frontstack on CodePen.
See more by @frontstack on CodePen
External CSS

This Pen doesn't use any external CSS resources.
External JavaScript

This Pen doesn't use any external JavaScript resources.