CSS Fundamentals

CSS fundamentals are the core principles and techniques every developer needs to know to style web pages effectively. This guide covers essential concepts to get you started on mastering CSS.

Table of Contents

The Cascade in CSS

CSS stands for Cascading Style Sheets, where “cascading” refers to the rules that determine how styles are applied when there are conflicts.

Specificity

Specificity determines which styles take precedence when multiple rules apply.

  • Inline styles (style attribute) have the highest specificity.
  • ID selectors (#idName) are more specific than class selectors (.className).

Example:


<style>
  p {
    color: blue; /* Less specific */
  }

  #special {
    color: red; /* More specific */
  }
</style>
<p id="special">This text is red.</p>

Inheritance

Some properties, like text color and font, are inherited by child elements. Others, like margin and padding, are not.

Example:


<style>
  div {
    color: green;
  }
</style>
<div>
  <p>This text is green because it inherits the color.</p>
</div>

The Importance of the Cascade

The cascade ensures that styles are applied logically, allowing you to create flexible designs without redundant code.

The Box Model

The box model is at the heart of CSS layout. Every element is a rectangular box composed of:

Content, Padding, Border, Margin

  • Content: The actual content of the element (text, images, etc.).
  • Padding: Space between the content and the border.
  • Border: The edge surrounding the padding.
  • Margin: Space outside the border, separating the element from others.

Visualizing the Box Model 

div {
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}

In this example:

  • Total width = 200px + 10px (padding) * 2 + 5px (border) * 2 + 20px (margin) * 2.

CSS Units

Absolute Units

  • Pixels (px), centimeters (cm), and inches (in) are fixed-size units.
    Example:
h1 {
    font-size: 16px;
}

Relative Units

  • Percentages (%), em, rem, and vh/vw adapt to their context.
    Example:
p {
    font-size: 1.5em; /* 1.5 times the parent font size */
}

Positioning in CSS

Static Positioning

The default position of elements.

Relative Positioning

Moves the element relative to its normal position.

div {
    position: relative;
    top: 20px;
}

Absolute and Fixed Positioning

Places the element relative to its nearest positioned ancestor (absolute) or the viewport (fixed).

div {
    position: absolute;
    left: 50px;
}

Flexbox and Grid Layout

Flexbox

Flexbox simplifies alignment and distribution of elements.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Grid

CSS Grid is for creating two-dimensional layouts.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

Conclusion

Understanding CSS fundamentals like the cascade, box model, and positioning is crucial for building responsive and visually appealing websites. Experiment with these concepts to strengthen your web design skills!

Stay tuned for more advanced CSS tutorials.