📖 CSS3

CSS3 is the latest standard for cascading style sheets, offering powerful features to enhance web design. While CSS3 is backward compatible with CSS2, some features may require careful consideration of browser support. For the latest compatibility details, visit CSS3 Browser Compatibility.

Key Features of CSS3

Box Model Enhancements

Box Sizing
Controls how dimensions are applied to elements.
box-sizing: border-box;
Ensures padding and borders are included within the specified width and height.
Recommended for consistent layouts across devices.
Border Radius
The border-radius property creates rounded corners for elements.
border-radius: 25px; /* Applies rounded corners to all corners */
Supported by all major browsers.
Can define up to four values for specific corners.
Border Radius Example
Box Shadow
Adds shadows to elements for visual depth.
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
Supports options like horizontal offset, vertical offset, blur, and spread.
Fully supported in modern browsers, including mobile devices.
Box Shadow Example

Text Styling

Text Shadow
Adds shadows to text for visual emphasis.
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
Specify horizontal offset, vertical offset, blur, and color.
Modern browser support is widespread.
Text Shadow Example
Custom Fonts with @font-face
Allows embedding of custom fonts directly in CSS.
@font-face {
    font-family: 'CustomFont';
    src: url('customfont.woff') format('woff');
}
Ensure font files are hosted on your server for reliable loading.
Use free resources like Google Fonts or Font Squirrel.

Modern CSS Techniques

CSS Variables

CSS variables allow developers to store reusable values, improving maintainability and consistency.

:root {
    --primary-color: #0077cc;
    --font-size-base: 16px;
}

body {
    color: var(--primary-color);
    font-size: var(--font-size-base);
}
  • Define variables globally using the :root selector.
  • Use var() to apply variables throughout your stylesheet.

CSS Nesting

Nesting allows for cleaner, more hierarchical CSS rules compared to the traditional method of writing child selectors repeatedly.

Traditional Method (Child Selectors)
.card {
    padding: 1rem;
    background: white;
}

.card h2 {
    font-size: 1.5rem;
    color: #333;
}

.card p {
    font-size: 1rem;
    color: #666;
}
Using CSS Nesting
.card {
    padding: 1rem;
    background: white;

    h2 {
        font-size: 1.5rem;
        color: #333;
    }

    p {
        font-size: 1rem;
        color: #666;
    }
}
  • Nesting reduces repetition and improves readability.
  • Supported in modern browsers, simplifying CSS maintenance.

Clamp() Function

The clamp() function allows responsive sizing by specifying minimum, preferred, and maximum values.

h1 {
    font-size: clamp(1.5rem, 2.5vw, 3rem);
}
  • First value: Minimum size.
  • Second value: Preferred size (based on viewport width).
  • Third value: Maximum size.

Container Queries

Container queries allow styling of elements based on the size of their containing element, rather than the viewport. This is particularly useful for creating truly component-based designs.

/* Define a container */
.container {
    container-type: inline-size;
    container-name: card;
}

/* Apply styles when the container reaches a certain size */
@container card (min-width: 300px) {
    .card {
        background-color: lightblue;
        padding: 2rem;
    }

    .card h2 {
        font-size: 1.5rem;
    }
}
container-type
Defines the container as a queryable element (e.g., inline-size).
container-name
Gives the container a name for targeting in container queries.
@container
Applies styles when the container matches the defined conditions.

Container queries are particularly helpful for modular components, ensuring that styles adjust based on the available space within their parent container.

Advanced Selectors

Attribute Selector
Targets elements with a specific attribute.
input[type="text"] {
    background-color: #CCCCFF;
}
Useful for selecting form fields.
:not Selector
Targets elements that do not match a given selector.
p:not(.mute) {
    color: gray;
}
Useful for inverse styling without redundant classes.

Background Enhancements

Background Size
Defines the dimensions of background images.
background-size: cover;
Common values include cover and contain.
Supports responsive designs by adjusting image scaling within containers.

Multiple Background Images

CSS3 allows you to specify multiple background images for an element. Supported by most current browsers.

Format
background:
url(filename) [position] [size] [repeat] [attachment],
url(filename) [position] [size] [repeat] [attachment],
. . .
url(filename) [position] [size] [repeat] [attachment];
  • url is the only required attribute
  • images are stacked in the order listed with the 1st one on top and last one on bottom
  • background color should be included as a separate item
  • good idea to include fallback for browsers that don't support multiple backgrounds
background: url(image1.jpg) 100% no-repeat center center;
background:
	url(image2.jpg) repeat-x top left,
	url(image3.jpg) repeat-x bottom left,
	url(image4.jpg) 100% 100% no-repeat center center;
background-color: black;
Example

The example below uses 6 separate images and a linear gradient to create the collage image with a fallback. You can view the details at https://mywebtraining.net/webdev/profherd/css3-multi-images/multi-images.html. Try resizing the image block using the element resize handle on the lower right side of the element.

Practical Applications

These CSS3 features can enhance designs in various ways:

  • Create visually appealing layouts with shadows, borders, and custom fonts.
  • Use multiple backgrounds and advanced selectors to improve design efficiency.
  • Leverage responsive techniques like background-size and box-sizing for mobile-friendly designs.

Conclusion

CSS3 provides powerful tools for modern web design. By mastering these features, you can create responsive, visually engaging, and accessible websites. Experiment with these properties to discover how they can enhance your projects.