Lecture 4: Continuing CSS: Layout, Visibility, and Combinators

This lecture focuses on key CSS properties that control an element's flow and visibility on the page, and introduces the powerful concept of CSS combinators for complex selector relationships.

1. The CSS display Property (Block vs. Inline)

The display property is crucial for layout, controlling how an element is rendered:

• Block-level Elements:
  • Start on a new line.
  • Take up the full width available (100% by default).
  • Accept all dimensions (width, height) and all margins/padding.
  • Examples: <div>, <h1>-<h6>, <p>.
• Inline Elements:
  • Do not start on a new line; they flow with the surrounding text.
  • Take up only as much width as necessary for their content.
  • Do not generally accept explicit width, height, or vertical margins (margin-top/margin-bottom).
  • Examples: <span>, <a>, <img>.
• Overriding: The display property allows conversion (e.g., setting li { display: inline; } is common for horizontal menus, or setting span { display: block; } to force an inline element onto a new line).

2. Hiding Elements: display: none vs. visibility: hidden

Two primary methods exist for hiding elements, with different effects on the page layout:

• visibility: hidden;:
  • Makes the element invisible.
  • Crucially, the element still takes up its original space in the document flow. The element is still present, just not visible.
• display: none;:
  • Hides the element and removes it completely from the document flow.
  • The element takes up no space on the page. This is functionally equivalent to removing the element entirely.

3. CSS Combinators (Selector Relationships)

A combinator explains the relationship between multiple simple selectors in a complex rule. The four main types are:

1. Descendant Selector (Space): Targets all elements (<p>) that are descendants (children, grandchildren, etc.) of another element (<div>).
   • Syntax: div p { ... }
2. Child Selector (>): Targets only elements (<p>) that are direct children of another element (<div>).
   • Syntax: div > p { ... }
3. Adjacent Sibling Selector (+): Targets the element (<p>) that is the immediate next sibling of another specified element (<div>).
   • Syntax: div + p { ... }
4. General Sibling Selector (~): Targets all elements (<p>) that are siblings of a specified element (<div>) and follow it in the source code.
   • Syntax: div ~ p { ... }

4. CSS Opacity / Transparency

The opacity property is used to set the transparency level of an entire element, including its content.

• Syntax: opacity: value;
• Value: A number from 0.0 (completely transparent/invisible) to 1.0 (completely opaque/default).
• Effect: A value of 0.5 makes the element 50% transparent. The lower the value, the more transparent the element.