Previous Next

CSS

CSS Overview Selectors Declarations Rule Sets Comments Reset/Normalize Origin Importance Order Specificity Inheritance Cascade Layers Inline Styles Internal Styles External Styles @import Absolute Units Relative Units Dynamic Viewport Angle Units Time Units Frequency Units: Resolution Units Keywords Color Formats Color Functions & Spaces Background Color Background Image Background Repeat Background Position Background Size Background Attachment Background Shorthand Multiple Backgrounds Linear Gradients Radial Gradients Conic Gradients Font Family Font Size Font Weight Font Style Line Height Text Align Text Decoration Text Transform Letter Spacing Word Spacing Text Shadow Text Wrap Variable Fonts Content Box Padding Box Border Box Margin Box Box Sizing Property Margin Padding Border Outline Box Shadow Block Display Inline Display Inline Block Display Static Position Relative Position Absolute Position Fixed Position Sticky Position Top Element Position Right Element Position Bottom Element Position Left Element Position Z Index Flexbox Box Layout Display Flex Flex Direction Flex Wrap Justify Content Align Items Align Content Gap, Row Gap & Column Gap Flex Grow Flex Shrink Flex Basis Flex Shorthand Order Property Align Self Practical Applications CSS Grid Layout Grid Display Grid Template Columns Grid Template Rows Grid Template Areas Justify Items Grid Auto Columns Justify Self Nested Grids Responsive Web Design Min Width Max Width Orientation Logical Operators Pointer Hover Prefers Color Scheme Fluid Images Flexible Typography Viewport Width Advanced CSS Features Defining variables Using variables Scope & Inheritance of CSS Variables Property Value Fallback Practical Applications :Hover :Active :Focus :Focus Visible :Visited :Link :First Child :Last Child :Nth Child :Nth of Type :Empty :Checked :Disabled :Enabled :Valid :Invalid :Required :Has :Not :Is :Where ::Before Pseudo Element ::After Pseudo Element ::First Letter ::First Line ::Selection ::Marker CSS 2D Transformations CSS 3D Transformations Transform Origin Transform Style Backface Visibility Transition Property Transition Duration Transition Timing Function Transition Delay Transition Shorthand Ease Timing Function Linear Timing Function Ease In Timing Function Ease Out Timing Function Ease In Out Timing Function Cubic Bezier Function Animations (@keyframes) Defining @keyframes Animation Name CSS Animation Duration Animation Timing Function CSS Animation Delay CSS Animation Iteration Count Animations Direction CSS Animation Fill Mode CSS Animation Play State CSS Filter Blur CSS Filter Brightness CSS Filter Contrast() CSS Drop Shadow CSS Grayscale CSS Hue Rotate CSS Invert CSS Opacity CSS Saturate CSS Sepia Mix Blend Mode Background Blend Mode Object Fit & Object Position Scroll Snap Type Scroll Snap Align Scroll Padding Scroll Margin Scroll Triggered Animations JS Variables

Practical Applications

Theming

Theming in CSS allows you to create a consistent look and feel across your website. By using CSS custom properties (variables), you can define a set of colors, fonts, and other design tokens that can be easily swapped to change the entire theme of your site, for instance, from a light mode to a dark mode. This approach centralizes your design choices, making maintenance and updates much more efficient.

Example 1: Light and Dark Mode Theming

/* Define color variables for the light theme (default) */
:root {
  --background-color: #ffffff;
  --text-color: #333333;
}

/* Define color variables for the dark theme */
[data-theme="dark"] {
  --background-color: #333333;
  --text-color: #ffffff;
}

/* Apply the variables to your elements */
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

Explanation

This code establishes two color themes, light and dark, using CSS variables. The :root selector defines the default light theme, and an attribute selector [data-theme="dark"] overrides these variables when the data-theme attribute is set to "dark" on an element, allowing for an easy toggle between themes.

Example 2: Multi-Theme Website

/* Define variables for a "beach" theme */
.theme-beach {
  --primary-color: #00bcd4; /* A nice cyan */
  --secondary-color: #ffeb3b; /* A warm yellow */
}

/* Define variables for a "forest" theme */
.theme-forest {
  --primary-color: #4caf50; /* A lush green */
  --secondary-color: #8d6e63; /* An earthy brown */
}

/* Usage */
.button {
  background-color: var(--primary-color);
  color: white;
}

Explanation

This example showcases how to create multiple themes that can be applied to different sections of a webpage. By defining theme-specific variables within class selectors (.theme-beach, .theme-forest), you can easily change the look of elements by applying the corresponding theme class to a parent container.

Example 3: Brand Consistency

/* Centralized brand colors */
:root {
  --brand-primary: #ff5722;
  --brand-accent: #ffc107;
}

/* Applying brand colors to various components */
.header {
  background-color: var(--brand-primary);
}

.cta-button {
  background-color: var(--brand-accent);
}

Explanation

This code ensures brand consistency across a website by defining primary and accent brand colors as CSS variables. These variables can then be applied to various UI components like headers and buttons, ensuring that any future updates to the brand's color palette only need to be changed in one place.

Consistent Spacing

Achieving consistent spacing is crucial for a clean and professional-looking layout. CSS custom properties can be used to create a spacing scale, which can then be applied to margins, paddings, and gaps. This ensures that the white space throughout your design is harmonious and predictable.

Example 1: Spacing Scale with Custom Properties

/* Defining a spacing scale */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
}

/* Using the spacing scale */
.element {
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
}

Explanation

This code establishes a clear and consistent spacing system using CSS custom properties. By defining a range of spacing values from extra-small to large, you can apply these variables to properties like margin and padding, ensuring uniform spacing across your entire project.

Example 2: Utility Classes for Spacing

/* Spacing utility classes */
.mt-sm {
  margin-top: var(--space-sm);
}

.p-lg {
  padding: var(--space-lg);
}

Explanation

This snippet creates utility classes for applying consistent spacing directly in your HTML. These classes, which use the predefined spacing variables, allow for rapid and consistent application of margins and padding without writing custom CSS for every element.

Example 3: Consistent Gaps in CSS Grid

/* Using spacing variables for grid gaps */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

Explanation

This example demonstrates how to use your defined spacing variables with the gap property in CSS Grid. This ensures that the space between grid items is consistent with the overall spacing system of your website, leading to a more cohesive design.

Dynamic Styles

Dynamic styles in CSS allow you to create interactive and responsive designs that can change based on user interaction or other conditions. This is often achieved by manipulating CSS custom properties with JavaScript, or by using CSS functions like calc() to create fluid layouts.

Example 1: Changing CSS Variables with JavaScript

/* CSS */
:root {
  --highlight-color: blue;
}

.interactive-element {
  color: var(--highlight-color);
}

JavaScript

/* JavaScript */
const element = document.querySelector('.interactive-element');

element.addEventListener('mouseover', () => {
  document.documentElement.style.setProperty('--highlight-color', 'red');
});

Explanation

This code shows how to dynamically change a CSS variable's value using JavaScript. When the user hovers over the .interactive-element, a JavaScript event listener updates the --highlight-color variable on the root element, which in turn changes the color of the text.

Example 2: Dynamic Sizing with calc()

/* Dynamic font size based on viewport width */
:root {
  --base-font-size: 16px;
  --fluid-font-size: calc(var(--base-font-size) + 2vw);
}

h1 {
  font-size: var(--fluid-font-size);
}

Explanation

This example uses the calc() function to create a dynamic font size that adjusts with the viewport width. The font-size of the h1 element is calculated by adding a fixed base size to a value that is relative to the viewport width (2vw), resulting in a smoothly scaling heading.

Example 3: Responsive Design with Media Queries

/* Default variable values */
:root {
  --container-width: 90%;
}

/* Adjusting variables for larger screens */
@media (min-width: 768px) {
  :root {
    --container-width: 80%;
  }
}

.container {
  width: var(--container-width);
  margin: 0 auto;
}

Explanation

This code demonstrates how to use media queries to create a responsive layout with dynamic styles. The --container-width variable is adjusted for screens wider than 768px, allowing the container to adapt its width for different devices while keeping the CSS for the .container element the same.