Enhanced CSS Selectors

CSS3 expanded selector capabilities for more precise element targeting.

Attribute-Based Selection

Elements can be targeted based on their attribute values:

<a href="#" data-priority="high">Primary Link</a>
<a href="#">Secondary Link</a>

a[data-priority] {
  color: forestgreen;
}

Advanced Pseudo-Class Selectors

New pseudo-classes enable selection based on element position and state:

a:first-of-type {
  font-weight: 700;
}

Pseudo-Element Targeting

Specific parts of elements can be styled independently:

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

Box Model Improvements

CSS3 introduced enhancements for better layout control.

Box Sizing Control

The box-sizing property modifies how dimensions are calculated:

.container {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
}

Rounded Corners

Border radius properties create curved edges:

.card {
  width: 150px;
  height: 150px;
  border: 1px solid #000;
  border-radius: 15px;
}

Shadow Effects

Drop shadows enhance visual depth:

.element {
  width: 150px;
  height: 150px;
  border: 1px solid #000;
  box-shadow: 8px 8px 10px rgba(0,0,0,0.3);
}

Motion and Transformation

CSS3 enables smooth visual transitions and dynamic effects.

Transition Effects

Smooth state changes between CSS properties:

<button>Hover Over Me</button>

button {
  transition: all 0.5s ease-in-out;
}

button:hover {
  background-color: coral;
  transform: scale(1.1);
}

Keyframe Animations

Custom animated sequences using keyframes:

<div class="spinner"></div>

@keyframes rotateElement {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  animation: rotateElement 3s linear infinite;
}

Responsive Design Capabilities

CSS3 provides tools for adaptive layouts across devices.

Media Queries

Conditional styling based on viewport characteristics:

@media screen and (max-width: 768px) {
  .content {
    width: 100%;
    background-color: lightblue;
  }
}

Flexible Box Layout

One-dimensional layout system for dynamic alignment:

.flex-container {
  display: flex;
  width: 300px;
  height: 200px;
  background-color: #ecf0f1;
  justify-content: center;
  align-items: center;
}

Animation Fundamentals

CSS animations transform element properties over time through three primary mechanisms.

Transition Properties

Gradual property changes with configurable timing:

• duration: Time required for completion (seconds/milliseconds)
• timing-function: Easing behavior (linear, ease-in, ease-out)
• delay: Wait period before initiation
• property: Specific CSS attributes to animate

Transform Functions

Geometric modifications to element appearance:

.movable {
  transform: translateX(50px) scale(1.2) rotate(45deg);
  display: block;
}

Animation Components

Complete animation sequences with multiple parameters:

• name: Keyframe identifier
• duration: Cycle length
• timing-function: Progression curve
• delay: Initial pause
• iteration-count: Repetition frequency
• direction: Play orientation