Advanced CSS

CSS Variables

CSS Variables allow you to store values in one place and reuse them throughout your stylesheets. This helps in maintaining consistency and makes your CSS code more manageable and easier to update.

Syntax

You can define a CSS variable using the -- prefix.

For example:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size: 16px;
}

• :root: The :root selector is where you define global variables. It acts as a global scope for the variables, making them accessible throughout the stylesheet.
• --primary-color, --secondary-color: These are the CSS variable names. The values are stored and can be reused wherever needed in your stylesheet.

You can then use these variables throughout your CSS:

body {
  font-size: var(--font-size);
  color: var(--primary-color);
}
 
h1 {
  color: var(--secondary-color);
}

• var(--primary-color): This is how you use the CSS variable inside other CSS properties.

Benefits of Using CSS Variables

1. Reusability: Once defined, variables can be reused multiple times across your styles, helping avoid repetition.
2. Maintainability: If you need to change a value, such as the primary color, you can simply update it in the :root selector, and all uses of that variable will automatically be updated.
3. Flexibility: You can dynamically update CSS variables in JavaScript or use them with media queries to adjust styles based on conditions like screen size or themes.

calc(), clamp(), min(), max() Functions

These functions let you do calculations and set flexible sizes directly inside your CSS code. This helps your website adjust better on different screen sizes and look good everywhere.

calc()

The calc() function allows you to perform simple math operations like addition (+), subtraction (-), multiplication (*), and division (/) with CSS values.

Why use calc()?

Sometimes you want to mix different units, like percentages and pixels, to set sizes. calc() lets you mix these values easily.

Example:

width: calc(100% - 50px);

This means: make the element as wide as its container (100%) but smaller by 50 pixels. So, the width will be the container’s full width minus 50 pixels.

You can also do things like this:

height: calc(50vh + 100px);

This means: the height will be half the screen’s height plus 100 pixels.

clamp()

The clamp() function lets you set a value that stays between a minimum and a maximum limit.

It takes three arguments:

clamp(minimum, preferred, maximum)

Why use clamp()?

It’s great for responsive design because you can let a value adjust automatically, but still stay within limits that make sense.

Example:

font-size: clamp(16px, 2vw, 24px);

This means:

• The font size will never be smaller than 16 pixels
• It will try to be 2% of the screen width (that’s what 2vw means), so it changes as the screen changes
• But it will never get bigger than 24 pixels

So, on a small phone screen, the font stays readable (at least 16px), and on big screens, it won’t get too large (max 24px).

min() and max()

These functions let you choose the smallest or largest value from a list you provide.

• min() chooses the smallest value
• max() chooses the largest value

Examples:

width: min(300px, 50%);

This means: The element’s width will be whichever is smaller — 300 pixels or 50% of its parent container. So if 50% is less than 300px, it uses 50%. Otherwise, it uses 300px.

height: max(100px, 10vh);

This means: The height will be whichever is bigger — 100 pixels or 10% of the viewport height (10vh). So if 10% of the screen height is more than 100px, it uses that; if not, it uses 100px.

These functions help you create flexible designs that adjust to different screen sizes nicely.

CSS Nesting (New Syntax)

CSS Nesting lets you write CSS rules inside other CSS rules. This makes your code cleaner, shorter, and easier to understand.

Think of it like how HTML elements are placed inside each other. For example, a <ul> inside a <nav>.

CSS Nesting works the same way, so you write styles for child elements inside the parent’s styles.

Why use CSS Nesting?

• Keeps your CSS organized: You group styles that belong together.
• Makes your code easier to read: You can see the relationship between elements clearly.
• Saves time: You write less repeating code.

How CSS Nesting Works

nav {
  background: #333;
  
  ul {
    list-style: none;
    
    li {
      color: white;
      padding: 10px;
    }
  }
}

Here:

• The <nav> element has a dark background (#333).
• Inside <nav>, all <ul> lists will have no bullet points (list-style: none).
• Inside those <ul> lists, every <li> (list item) will have white text and 10 pixels of padding.

Because the styles for ul and li are written inside the nav block, these styles only apply to ul and li elements inside the nav. This makes sure your CSS affects exactly the parts of your page you want, without extra code.

Summary

• CSS Variables let you save and reuse values easily in your CSS.
• calc(), clamp(), min(), and max() help you do calculations and create flexible, responsive styles.
• CSS Nesting helps keep your styles clean and organized by grouping related rules inside each other, just like nested HTML elements.