css

05. CSS Variables 👩‍🏫🧑‍🏫

index.html

<!DOCTYPE html>
<html lang="en-gb">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Advanced Selectors with CSS</title>
  <link rel="stylesheet" href="./assets/css/reset.css" />
  <link rel="stylesheet" href="./assets/css/style.css" />
</head>

<body>
  <header>
    <h1>The CSS Blog</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Resources</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <article>
        <h2>A List of Learning Resources</h2>
        <div>
          <p>A successful web developer is one that knows that there's always room to grow and learn. You may not use
            every single tool that's offered to you, but it's always good to know that certain tools exist. Check out
            these resources to broaden your knowledge:</p>
          <ul>
            <li>
              Mozilla Developer Network's documentation on <a
                href="https://developer.mozilla.org/en-US/docs/Web/CSS">Cascading Style Sheets (CSS)</a> is a good
              resource for all things CSS and web development in general.
            </li>
            <li>Our own <a href="./assets/css/reset.css">reset.css</a> file shows how to set default browser styles.
            </li>
            <li>Another reset style sheet called
              <a href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">normalize.css</a> is popular in the
              web development community</li>
            <li>Our own <a href="./assets/css/style.css">style.css</a> file shows how we've designed the page we're
              reading!
            </li>

            <li>The popular blog, <a href="https://css-tricks.com/">CSS Tricks,</a> has a lot of articles and resources
              to make you a better developer!
            </li>

          </ul>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil natus recusandae amet nostrum odit, ut unde
            non sint, quia sed inventore odio, delectus iure! Eligendi vitae fuga blanditiis accusamus tempore! Lorem
            ipsum dolor sit amet consectetur adipisicing elit. Consectetur, nisi, saepe quas sint consequuntur esse
            voluptatum, dolores dolor aspernatur neque laborum dolorum dolorem repudiandae. Dignissimos eveniet sequi
            corporis tempore ullam!</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil natus recusandae amet nostrum odit, ut unde
            non sint, quia sed inventore odio, delectus iure! Eligendi vitae fuga blanditiis accusamus tempore!</p>
        </div>
      </article>
    </section>
  </main>

  <footer>
    <span>Thanks for visiting!</span>
  </footer>
</body>

</html>

reset.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  line-height: 1;
  font-family: sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

input,
select,
option,
optgroup,
textarea,
button,
pre,
code {
  font-size: 100%;
  font-family: inherit;
}

ol,
ul {
  list-style: none;
}

style.css

/* create custom CSS variables (also called custom properties) and apply them to the root of the page, making them accessible to all other CSS */
:root {
  /* declare a variable with `--` syntax */
  --dark: #13293d;
  --light: #fff;
  --navlink-color: #b9c6ae;
}

body {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1%;
  /* use CSS var() function to reference a variable created above */
  background-color: var(--dark);
  color: var(--light);
}

h1 {
  font-size: 200%;
}

h2 {
  margin: 2% 0;
  font-size: 250%;
}

a[href*='.css']::after {
  content: '📝';
  display: inline-block;
  margin-left: 3px;
}

nav ul {
  display: flex;
  justify-content: space-between;
  min-width: 300px;
}

nav a {
  background-color: unset;
  color: var(--navlink-color);
  font-weight: bold;
  text-decoration: none;
}

nav a:hover {
  color: var(--light);
}

main {
  display: flex;
  flex: 1 1 0;
  max-width: 96%;
  margin: 2% auto;
}

article {
  /* If we were to change the value of `--dark`, then all references to it would change automatically */
  border-bottom: 1px solid var(--dark);
}

article p {
  margin: 2% 0;
  font-size: 110%;
}

article ul {
  margin-left: 5%;
  font-size: 110%;
  list-style: circle;
}

footer {
  display: flex;
  justify-content: center;
  padding: 2%;
  background-color: var(--dark);
  color: var(--light);
}

@media screen and (max-width: 768px) {
  header {
    flex-direction: column;
  }

  main {
    max-width: 1200px;
  }
}