CSS - Layout and Selectors

Display Properties: The Building Blocks of Layout

The display property determines how elements behave in the document flow and interact with surrounding elements. Understanding display values is crucial for creating well-structured layouts.

inline

The inline display value makes elements flow like text, sitting within the current line without breaking to a new line.

Key Characteristics:

• Elements don't create line breaks

• Width and height properties are ignored

• Only respects horizontal margins and padding

• Vertical alignment can be controlled with vertical-align

Syntax:

.element {
  display: inline;
}

Example 1: Navigation Links

/* Code Subtle Nav Style */
.cs-nav-link {
  display: inline;
  padding: 0 15px;
  color: #333;
}

<nav>
  <a class="cs-nav-link">Home</a>
  <a class="cs-nav-link">Articles</a>
  <a class="cs-nav-link">About</a>
</nav>

Example 2: Inline Badges

/* Code Subtle Badge Style */
.cs-badge {
  display: inline;
  background: #e9ecef;
  padding: 2px 8px;
  border-radius: 3px;
}

<p>This article <span class="cs-badge">New</span> explains CSS concepts.</p>

💡 Tips for inline elements:

• Use for text-like elements that should flow within content

• Remember that vertical spacing won't work

• Consider inline-block if you need more layout control

block

Block elements create distinct blocks in the layout, starting on new lines and extending full-width by default.

Key Characteristics:

• Creates line breaks before and after

• Takes up full width available by default

• Respects all margin and padding properties

• Can have width and height set

Syntax:

.element {
  display: block;
}

Example 1: Article Cards

/* Code Subtle Card Style */
.cs-card {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
}

Example 2: Section Dividers

/* Code Subtle Divider Style */
.cs-divider {
  display: block;
  height: 2px;
  background: #eee;
  margin: 30px 0;
}

💡 Tips for block elements:

• Use for major structural elements

• Set max-width to prevent overly wide content

• Consider padding for inner spacing

inline-block

Combines features of both inline and block elements, allowing block-like properties while flowing inline.

Key Characteristics:

• Flows like inline elements

• Accepts width, height, and vertical margins

• Respects all padding and border properties

• Can be vertically aligned

Syntax:

.element {
  display: inline-block;
}

Example 1: Button Grid

/* Code Subtle Button Style */
.cs-button {
  display: inline-block;
  width: 150px;
  padding: 10px;
  margin: 5px;
  text-align: center;
  background: #007bff;
  color: white;
}

Example 2: Icon with Text

/* Code Subtle Icon Style */
.cs-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  vertical-align: middle;
}

💡 Tips for inline-block:

• Perfect for grid-like layouts without using flex/grid

• Mind the whitespace between elements

• Use vertical-align to control alignment

Positional Properties: Controlling Element Placement

Position properties determine how elements are placed relative to their normal position in the document flow or other reference points.

relative

Elements remain in the normal flow but can be offset from their original position.

Key Characteristics:

• Maintains space in normal flow

• Creates a positioning context for absolute children

• Offset using top, right, bottom, left

• Z-index works on relative elements

Syntax:

.element {
  position: relative;
  top: 10px;
  left: 20px;
}

Example 1: Offset Text Label

/* Code Subtle Label Style */
.cs-label {
  position: relative;
  top: -10px;
  color: #666;
  font-size: 0.8em;
}

Example 2: Hover Effect

/* Code Subtle Card Hover Style */
.cs-card {
  position: relative;
  transition: all 0.3s;
}
.cs-card:hover {
  top: -5px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

absolute

Elements are removed from normal flow and positioned relative to their nearest positioned ancestor.

Key Characteristics:

• Removed from normal document flow

• Positioned relative to nearest positioned ancestor

• Other elements ignore its space

• Can be placed precisely using top, right, bottom, left

Syntax:

.element {
  position: absolute;
  top: 0;
  right: 0;
}

Example 1: Corner Badge

/* Code Subtle Badge Style */
.cs-corner-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  background: #ff4444;
  color: white;
}

Example 2: Modal Overlay

/* Code Subtle Modal Style */
.cs-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
}

fixed

Elements are positioned relative to the viewport and remain fixed during scrolling.

Key Characteristics:

• Removed from normal flow

• Positioned relative to viewport

• Stays fixed during scrolling

• Creates new stacking context

Syntax:

.element {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

Example 1: Fixed Header

/* Code Subtle Header Style */
.cs-fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

Example 2: Back to Top Button

/* Code Subtle Button Style */
.cs-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px;
  background: #333;
  color: white;
}

sticky

Elements behave like relative positioning until they reach a specified scroll position, then become fixed.

Key Characteristics:

• Acts relative until scroll threshold

• Becomes fixed at threshold

• Constrained by parent container

• Requires top, right, bottom, or left value

Syntax:

.element {
  position: sticky;
  top: 0;
}

Example 1: Sticky Section Headers

/* Code Subtle Section Header Style */
.cs-section-header {
  position: sticky;
  top: 0;
  background: white;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

Example 2: Sticky Sidebar

/* Code Subtle Sidebar Style */
.cs-sidebar {
  position: sticky;
  top: 20px;
  width: 300px;
  padding: 20px;
}

Understanding Overflow

Overflow properties control how content that exceeds an element's dimensions is handled.

visible

Content displays outside the element's box if necessary (default behavior).

Syntax:

.element {
  overflow: visible;
}

Example 1: Dropdown Menu

/* Code Subtle Dropdown Style */
.cs-dropdown {
  position: relative;
  overflow: visible;
}
.cs-dropdown-content {
  position: absolute;
  top: 100%;
}

hidden

Content that exceeds the element's dimensions is clipped.

Syntax:

.element {
  overflow: hidden;
}

Example 1: Card with Truncated Text

/* Code Subtle Card Style */
.cs-truncated-card {
  height: 100px;
  overflow: hidden;
}

scroll

Scrollbars are always displayed, allowing users to scroll to see overflow content.

Syntax:

.element {
  overflow: scroll;
}

Example 1: Scrollable Content Area

/* Code Subtle Content Area Style */
.cs-content-area {
  height: 300px;
  overflow: scroll;
  padding: 20px;
}

Working with Grouping Selectors

Grouping selectors allow applying the same styles to multiple elements.

Key Characteristics:

• Reduces code duplication

• Improves maintainability

• Separates selectors with commas

Syntax:

selector1, selector2, selector3 {
  property: value;
}

Example 1: Common Text Styles

/* Code Subtle Text Styles */
.cs-heading, .cs-subheading, .cs-title {
  font-family: 'Arial', sans-serif;
  color: #333;
  margin-bottom: 1em;
}

Example 2: Interactive Elements

/* Code Subtle Interactive Styles */
.cs-button, .cs-link, .cs-icon-button {
  cursor: pointer;
  transition: opacity 0.3s;
}

Nested Selectors

Nested selectors target elements based on their relationship in the DOM hierarchy.

Key Characteristics:

• Increases specificity

• Creates context-dependent styles

• Improves readability

Syntax:

parent descendant {
  property: value;
}

Example 1: Article Content Styles

/* Code Subtle Article Styles */
.cs-article p {
  line-height: 1.6;
  margin-bottom: 1.5em;
}
.cs-article h2 {
  font-size: 1.5em;
  margin-top: 2em;
}

Example 2: Navigation Dropdown

/* Code Subtle Nav Styles */
.cs-nav .cs-dropdown {
  position: relative;
}
.cs-nav .cs-dropdown .cs-menu {
  position: absolute;
  top: 100%;
  display: none;
}

Tips and Tricks for CSS Mastery

1. Use Developer Tools:

   • Inspect elements to understand their box model

   • Toggle CSS properties to see their effects

   • Use the computed tab to see final applied styles

2. Follow a Naming Convention:

   • Use consistent prefixes (like our 'cs-' prefix)

   • Keep names descriptive but concise

   • Consider using BEM or another methodology

3. Plan Your Layout:

   • Start with a mobile-first approach

   • Consider different screen sizes

   • Use appropriate display properties for different contexts

4. Debug Effectively:

   • Add temporary borders to visualize elements

   • Use different background colors while developing

   • Comment out styles to isolate issues

5. Performance Considerations:

   • Avoid deep nesting of selectors

   • Use efficient selectors

   • Group similar styles together