CSS3, the third major revision of the Cascading Style Sheets (CSS) language, introduced several new features and enhancements compared to its predecessor, CSS2.
CSS3 is modular, allowing developers to use specific modules as needed. Here’s an overview of some key features of CSS3:
1. Modularity
CSS3 is designed as a collection of independent modules, each addressing a specific aspect of styling. This modularity allows for easier updates and implementation of new features without affecting the entire specification.
2. Selectors
CSS3 introduces new and more powerful selectors for targeting elements, including attribute selectors, nth-child selectors, and more. This enhances the flexibility and precision of styling.
3. Box Model Enhancements
Box-sizing Property: Allows the specification of how the total width and height of an element are calculated, including or excluding padding and borders.
box-sizing: border-box;
4. Colors and Opacity
RGBA and HSLA Colors: CSS3 introduces support for RGBA (Red, Green, Blue, Alpha) and HSLA (Hue, Saturation, Lightness, Alpha) color notations, providing transparency control.
background-color: rgba(255, 0, 0, 0.5);
Opacity Property: Allows the adjustment of the transparency of an element.
opacity: 0.7;
5. Text Effects
Text Shadows: Enables the creation of shadows behind text.
text-shadow: 2px 2px 4px #000;
Multiple Columns: Allows text to flow into multiple columns within an element.
column-count: 2;
6. Transformations
2D and 3D Transforms: CSS3 introduces transformations for both 2D and 3D objects, including rotations, scaling, and translations.
transform: rotate(45deg);
7. Transitions
Transition Property: Enables the smooth transition of property values over a specified duration.
transition: width 0.3s ease-in-out;
8. Animations
Keyframe Animations: Provides a way to create complex animations by defining keyframes.
@keyframes slide {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
9. Flexbox Layout
Flexible Box Layout (Flexbox): A layout model that allows the design of complex layouts with a more efficient and predictable structure.
display: flex;
10. Grid Layout
CSS Grid Layout: Allows the creation of grid-based layouts, providing a two-dimensional layout system.
display: grid;
11. Responsive Web Design
Media Queries: CSS3 enhances media queries, allowing developers to apply styles based on the characteristics of the device, such as screen size, resolution, and orientation.
12. Custom Fonts:
@font-face Rule: Allows the use of custom fonts in web pages by specifying font files.
@font-face {
font-family: 'CustomFont';
src: url('customfont.woff') format('woff');
}