< / >
Published on

CSS Concepts Specificity, Box Model, Layout, Positioning

Table of Contents

Specificity

Specificity determines which CSS rule is applied by the browser when multiple rules target the same element. It's based on selectors and their combination of element type, class, ID, and inline styles.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Low specificity */
      p {
        color: blue;
      }
      /* Higher specificity */
      .special {
        color: red;
      }
      /* Even higher specificity */
      #unique {
        color: green;
      }
    </style>
  </head>
  <body>
    <p>Paragraph with low specificity</p>
    <p class="special">Paragraph with class specificity</p>
    <p id="unique">Paragraph with id specificity</p>
  </body>
</html>

Box Model

The box model describes how elements on a webpage are structured. Every element consists of content, padding, border, and margin.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 2px solid black;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div>This is a div element with box model properties</div>
  </body>
</html>

Difference Between Margin and Padding

  1. Margin:

    • Margin is the space around an element's border.
    • It creates space between the border of the element and adjacent elements.
    • Margins do not have background colors or borders; they are transparent by default.
    • Margins can be set using properties like margin-top, margin-bottom, margin-left, and margin-right.
    • Margin values can be specified in various units such as pixels, percentages, ems, rems, etc.

  2. Padding:

    • Padding is the space between an element's content and its border.
    • It creates space inside the element, pushing the content away from the border.
    • Padding is often used to add space around the content within an element, making it visually more appealing or improving readability.
    • Like margins, padding does not have background colors or borders by default.
    • Padding can be set using properties like padding-top, padding-bottom, padding-left, and padding-right.
    • Padding values can also be specified in various units such as pixels, percentages, ems, rems, etc.

Layout

Layout in CSS refers to how elements are arranged on a webpage. This can be achieved using various techniques like floats, flexbox, or CSS grid.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        justify-content: space-between;
      }
      .item {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

Positioning

CSS positioning allows you to precisely control the placement of elements on a webpage. The main positioning properties are static, relative, absolute, and fixed.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .relative {
        position: relative;
        top: 20px;
        left: 20px;
        border: 2px solid red;
      }
      .absolute {
        position: absolute;
        top: 50px;
        left: 50px;
        border: 2px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="relative">Relative positioned div</div>
    <div class="absolute">Absolute positioned div</div>
  </body>
</html>

Positioning in CSS: Static, Relative, Absolute, and Fixed

  1. Static:

    • Static positioning is the default positioning of an element in CSS.
    • Elements with static positioning are positioned according to the normal flow of the document.
    • Top, right, bottom, and left properties have no effect on statically positioned elements.
    • In the CSS box model, static elements are not affected by margin, border, or padding of other elements.

  2. Relative:

    • Relative positioning positions an element relative to its normal position in the document flow.
    • When an element is positioned relatively, it can be moved from its normal position using the top, right, bottom, and left properties.
    • Other elements are not affected by the positioning of relatively positioned elements; they still occupy the space as if the element were in its normal position.
    • Elements with relative positioning can overlap other elements if moved with positive or negative values.

  3. Absolute:

    • Absolute positioning removes an element from the normal document flow and positions it relative to its closest positioned ancestor (an ancestor with a position other than static) or to the initial containing block if no positioned ancestor is found.
    • Absolute positioned elements are removed from the document flow, so they can overlap other elements.
    • Top, right, bottom, and left properties are used to specify the exact position of absolutely positioned elements.
    • If no positioned ancestor is found, absolute positioning is relative to the initial containing block (usually the viewport).

  4. Fixed:

    • Fixed positioning positions an element relative to the viewport, which means it remains fixed in its position even when the page is scrolled.
    • Fixed positioned elements are removed from the document flow and do not affect the layout of other elements.
    • Top, right, bottom, and left properties are used to specify the exact position of fixed positioned elements.
    • Fixed elements remain in the same position regardless of scrolling, making them suitable for elements like navigation bars or headers that need to stay visible at all times.