HTML/CSS - 16

HTML/CSS - 16: Advanced CSS Techniques

You already know how to style elements, use classes, build layouts, and make pages responsive. Now you can explore a few CSS features that make your styles easier to reuse and more interactive.

In this lesson, you will try CSS custom properties, also called variables, and pseudo-classes such as :hover, :focus, and :nth-child().

You will also experiment with CSS functions such as calc(), which can combine different sizes in a calculation.

Your challenge: Create an interactive set of cards that share reusable colors and react when the visitor hovers over them.

What should you notice?

CSS custom properties let you store a value and reuse it in several places. They are often written inside :root so they can be used throughout the page.

For example: --main-color: #8A8A8A; creates a custom property.

You can then use it with: color: var(--main-color);

Experiment: Change the value of --main-color. If several CSS rules use that variable, they should all change together.

This can be much easier than searching through your stylesheet and changing the same color in many different places.

Try :hover: A pseudo-class describes a special state of an element.

For example: .card:hover only applies while the visitor's pointer is over a card.

Try adding: transform: scale(1.05); inside the hover rule. The card should become slightly larger when you hover over it.

Try :nth-child(): This selector lets you choose an element based on its position inside a parent.

For example: .card:nth-child(2) selects the second card.

Try giving the second card a different border style or background color.

Try calc(): The calc() function lets CSS calculate a value.

For example: width: calc(100% - 40px); means "use the full available width, minus 40 pixels."

This can be useful when part of a size needs to stay flexible while another part stays fixed.

What about :focus? The :focus pseudo-class is often used with interactive elements such as inputs, links, and buttons. It can show which element is currently selected for keyboard input.

For example: input:focus { border-color: white; } can change an input's border when the visitor clicks or tabs into it.

Good CSS habit: Advanced CSS does not mean making everything complicated. Features such as variables and pseudo-classes are most useful when they reduce repetition or make an interface clearer to use.

<style>

  :root {
    --main-color: #8A8A8A;
    --card-bg: #111;
  }

  .cards {
    max-width: 600px;
    margin: 0 auto;
  }

  .card {
    width: calc(100% - 40px);
    background-color: var(--card-bg);
    border: 2px solid var(--main-color);
    color: var(--main-color);
    padding: 25px;
    margin: 20px auto;
    border-radius: 10px;
    transition: 0.3s;
  }

  .card:hover {
    transform: scale(1.05);
    background-color: #1a1a1a;
  }

  .card:nth-child(2) {
    border-style: dashed;
  }

</style>

<div class="cards">

  <div class="card">Card 1</div>

  <div class="card">Card 2</div>

  <div class="card">Card 3</div>

</div>