1. Custom Properties (CSS Variables)

CSS Variables, also known as Custom Properties, allow you to store values that can be reused throughout your CSS. They are defined using the -- prefix and can be manipulated dynamically with JavaScript.

Definition and Usage

Custom properties are defined within a CSS selector and can be accessed using the var() function.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Variables Example</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --font-size: 16px;
        }

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

        .button {
            background-color: var(--secondary-color);
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <button class="button">Click Me!</button>
</body>
</html>

2. CSS Grid vs. Flexbox

Both CSS Grid and Flexbox are layout systems that help create complex layouts, but they are used for different purposes.

2.1 Flexbox

Flexbox is designed for one-dimensional layouts (either rows or columns). It’s useful for distributing space and aligning items within a container.

  • Key Properties:
    • display: flex;
    • flex-direction
    • justify-content
    • align-items

Flexbox Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 100vh;
        }

        .flex-item {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
</body>
</html>

2.2 CSS Grid

CSS Grid is designed for two-dimensional layouts (both rows and columns). It’s useful for creating complex grid-based designs.

  • Key Properties:
    • display: grid;
    • grid-template-columns
    • grid-template-rows
    • grid-area

Grid Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Example</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .grid-item {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
    </div>
</body>
</html>

3. Advanced Selectors and Combinators

CSS selectors and combinators allow you to target specific elements based on their relationships and states.

3.1 Attribute Selectors

Attribute selectors match elements based on their attributes.

  • [attribute=value] – Matches elements with a specific attribute value.
  • [attribute^=value] – Matches elements with attributes that start with a value.
  • [attribute$=value] – Matches elements with attributes that end with a value.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selectors Example</title>
    <style>
        [type="text"] {
            border: 2px solid blue;
        }

        [href^="https://"] {
            color: green;
        }

        [src$=".png"] {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Text input">
    <a href="https://example.com">External Link</a>
    <img src="image.png" alt="Example Image">
</body>
</html>

3.2 Pseudo-Classes and Pseudo-Elements

Pseudo-classes style elements in specific states (e.g., :hover, :focus), while pseudo-elements style specific parts of elements (e.g., ::before, ::after).

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo-Classes and Pseudo-Elements Example</title>
    <style>
        a:hover {
            color: red;
        }

        p::before {
            content: "Note: ";
            font-weight: bold;
        }

        p::after {
            content: " (end)";
            font-style: italic;
        }
    </style>
</head>
<body>
    <a href="#">Hover over me</a>
    <p>This is a paragraph.</p>
</body>
</html>

4. CSS-in-JS

CSS-in-JS refers to a pattern where CSS is written within JavaScript files. This approach is commonly used in modern JavaScript frameworks like React, enabling scoped and dynamic styling.

Libraries:

  • Styled Components: Allows you to use component-level styles in your JavaScript file.
  • Emotion: Provides powerful and flexible CSS-in-JS solutions.

Styled Components Example: 

  // Install Styled Components with: npm install styled-components
import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  
  &:hover {
    background-color: ${props => props.primary ? 'darkblue' : 'darkgray'};
  }
`;

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}

export default App;