CSS Properties (Jun, 2024 Batch)

Introduction

This tutorial will guide you through essential CSS properties covered in the Evangadi Tech video. Understanding these properties is crucial for web design and development, as they control the layout, appearance, and responsiveness of web pages.

Step 1: Understanding CSS Selectors

CSS selectors are the foundation of styling web pages. They determine which HTML elements will be affected by the CSS rules you write.

• Types of Selectors:
  • Element Selector: Targets all instances of an element. For example:

    p {
      color: blue;
    }
    

  • Class Selector: Targets elements with a specific class. Use a dot (.) before the class name:

    .highlight {
      background-color: yellow;
    }
    

  • ID Selector: Targets a unique element with a specific ID. Use a hash (#) before the ID:

    #header {
      font-size: 24px;
    }
    

Tip: Use classes for reusable styles and IDs for unique elements.

Step 2: Applying CSS Properties

After selecting the elements, apply CSS properties to style them. Common properties include:

• Color and Background:

  • Change text color:

    h1 {
      color: green;
    }
    

  • Set background color:

    body {
      background-color: lightgray;
    }
    

• Font Properties:

  • Adjust font size and weight:

    p {
      font-size: 16px;
      font-weight: bold;
    }
    

Common Pitfall: Ensure proper contrast between text and background colors for readability.

Step 3: Box Model Fundamentals

Understanding the box model is essential for layout design in CSS. Each element is represented as a rectangular box with the following components:

• Content: The actual content of the box, such as text or images.
• Padding: Space between the content and the border.
• Border: The border surrounding the padding.
• Margin: Space outside the border, separating the element from others.

You can control these aspects with the following properties:

.box {
  margin: 10px;
  padding: 15px;
  border: 1px solid black;
}

Tip: Use box-sizing: border-box; to include padding and borders in the element’s total width and height.

Step 4: Layout Techniques

CSS offers several methods for creating layouts. Here are the most common:

• Flexbox: A layout model that allows for responsive design by distributing space along a single axis.

  .container {
    display: flex;
  }
  

• Grid: A powerful layout system that allows you to create complex two-dimensional layouts.

  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  

Practical Application: Use Flexbox for simple layouts and Grid for more complex structures.

Conclusion

In this tutorial, we explored fundamental CSS properties, selectors, the box model, and layout techniques. Mastering these concepts will greatly enhance your web design skills.

Next steps could include experimenting with different properties in a project, exploring advanced CSS features like animations, or diving deeper into responsive design techniques.