CSS Tips and Tricks for Beginners!

on


 CSS Tips and Tricks for Beginners!

🔥 Center Any Element Easily

Centering things in CSS used to be tricky, but with Flexbox, it's very easy.
Flexbox is a layout model that makes it simple to align items vertically and horizontally.

Here’s how it works:

📄 Example Code:

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      border: 2px dashed #4CAF50;
    }

    .child {
      padding: 20px;
      background: #4CAF50;
      color: white;
      border-radius: 8px;
    }
  </style>
</head>
<body>

<div class="parent">
  <div class="child">I am centered!</div>
</div>

</body>
</html>

🧩 Explanation:

  1. Parent Container (Div)

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 2px dashed #4CAF50;
}

  • display: flex;
     ➔ Turns the parent container into a flexbox container.

  • justify-content: center;
    ➔ Horizontally centers the child element inside the parent.

  • align-items: center;
    ➔ Vertically centers the child element inside the parent.

  • height: 100vh;
    ➔ Makes the container take the full height of the screen (viewport height).

  • border: 2px dashed #4CAF50;
    ➔ Adds a border to visually see the parent container.

      2. Child Element (Div)
    .child {
      padding: 20px;
      background: #4CAF50;
      color: white;
      border-radius: 8px;
    }

    • Styled to make it look attractive:

    • Background color, white text, padding for spacing, and rounded corners.

      🎯 Result:

      ✅ No matter what size the screen is, the child element will always stay perfectly centered, both vertically and horizontally!

      🌟 Bonus Tip:

      You can center any type of element inside the parent container using this method —
      ✅ Images
      ✅ Text
      ✅ Buttons
      ✅ Forms
      ✅ Multiple elements

      This method works perfectly on all screen sizes and devices, making your design fully responsive!

      🎨 Use CSS Variables for Colors

      Using CSS variables is a smart way to manage colors in your website design.
      Instead of repeating color codes everywhere, you can define them once and reuse them!

      It makes your CSS clean, easy to update, and more professional.

      📄 Example Code:

      <!DOCTYPE html>
      <html>
      <head>
        <style>
          :root {
            --main-color: #4CAF50;
            --text-color: white;
          }

          body {
            background-color: var(--main-color);
            color: var(--text-color);
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
          }

          button {
            background-color: var(--text-color);
            color: var(--main-color);
            border: 2px solid var(--text-color);
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
          }
        </style>
      </head>
      <body>
      <h1>Using CSS Variables!</h1>
      <p>This text and background color are set using CSS variables.</p>
      <button>Click Me</button>

      </body>
      </html>

      🧩 Explanation:

      1.Define Variables
        :root {
          --main-color: #4CAF50;
          --text-color: white;
        }

        • :root is the global scope for CSS variables.

        • Variables start with -- (two hyphens).

        • Now, --main-color and --text-color can be used anywhere

        2. Use Variables in CSS

        background-color: var(--main-color);
        color: var(--text-color);

        • var(--variable-name) is how you use the variables.

        3. Easy Updates

        • Want to change your website theme? ✅

        Just update the variable value in t:root, and all elements will update automatically!


        🎯 Result:

        ✅ You save time.
        ✅ Your CSS becomes clean and easy to manage.
        ✅ Future color changes become super simple!


        🌟 Bonus Tip:

        You can also create multiple themes using variables!
        For example, a light mode and dark mode by just changing the variable values.

        This is very helpful when making professional and modern websites. 🌙☀️

        Comments

        Post a Comment