Introduction to CSS3 Styling
CSS3 is the latest evolution of Cascading Style Sheets, providing powerful styling capabilities for modern web design. It introduces new selectors, visual effects, animations, layouts, and responsive design features that enhance website aesthetics and user experience. Understanding CSS3 styling techniques enables you to create visually appealing and interactive web interfaces without relying heavily on JavaScript.
Core CSS3 Selectors
Basic Selectors
element { } /* Type selector (e.g., div) */
.class-name { } /* Class selector */
#id-name { } /* ID selector */
* { } /* Universal selector */
element, .class, #id { } /* Group selector */
Combinators
parent > child { } /* Direct child */
ancestor descendant { } /* Descendant */
prev + next { } /* Adjacent sibling */
prev ~ siblings { } /* General siblings */
Attribute Selectors
[attribute] { } /* Has attribute */
[attribute="value"] { } /* Exact match */
[attribute^="value"] { } /* Starts with */
[attribute$="value"] { } /* Ends with */
[attribute*="value"] { } /* Contains */
[attribute~="value"] { } /* Contains word */
[attribute|="value"] { } /* Starts with value followed by hyphen */
Pseudo-classes
:hover, :focus, :active /* User interaction */
:first-child, :last-child /* Structural */
:nth-child(n) /* Positional */
:not(selector) /* Negation */
:root /* Document root */
:empty /* Empty elements */
:checked, :disabled /* Form states */
Pseudo-elements
::before /* Insert content before */
::after /* Insert content after */
::first-letter /* First letter */
::first-line /* First line */
::selection /* Selected text */
::placeholder /* Form placeholder text */
Box Model & Layout
Box Sizing
.element {
box-sizing: content-box; /* Default - width/height apply to content only */
box-sizing: border-box; /* Width/height include padding and border */
}
Display Properties
.element {
display: block; /* Block-level element */
display: inline; /* Inline element */
display: inline-block; /* Inline with block properties */
display: flex; /* Flexbox container */
display: grid; /* Grid container */
display: none; /* Hidden element */
}
Positioning
.element {
position: static; /* Default */
position: relative; /* Relative to normal position */
position: absolute; /* Relative to positioned ancestor */
position: fixed; /* Relative to viewport */
position: sticky; /* Hybrid of relative and fixed */
top: 0; /* Offset properties */
right: 0;
bottom: 0;
left: 0;
z-index: 10; /* Stacking order */
}
Colors & Backgrounds
Color Values
.element {
color: red; /* Named color */
color: #ff0000; /* Hex */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGBA with alpha */
color: hsl(0, 100%, 50%); /* HSL */
color: hsla(0, 100%, 50%, 0.5); /* HSLA with alpha */
color: #f00f; /* Hex with alpha */
color: color-mix(in srgb, red, blue 50%); /* Color mixing */
}
Gradients
.element {
/* Linear gradient */
background-image: linear-gradient(to right, red, blue);
background-image: linear-gradient(45deg, red, blue);
/* Radial gradient */
background-image: radial-gradient(circle, red, blue);
background-image: radial-gradient(ellipse at top left, red, blue);
/* Conic gradient */
background-image: conic-gradient(red, blue, green);
background-image: conic-gradient(from 45deg at 50% 50%, red, blue);
/* Repeating gradients */
background-image: repeating-linear-gradient(45deg, red, blue 20px);
background-image: repeating-radial-gradient(circle, red, blue 20px);
}
Background Properties
.element {
background-color: #f5f5f5;
background-image: url('image.jpg');
background-repeat: no-repeat; /* no-repeat, repeat, repeat-x, repeat-y */
background-position: center; /* top, right, bottom, left, center, or x y values */
background-size: cover; /* cover, contain, or width/height values */
background-attachment: fixed; /* fixed, scroll, local */
background-clip: padding-box; /* border-box, padding-box, content-box, text */
background-origin: content-box; /* border-box, padding-box, content-box */
/* Shorthand */
background: #f5f5f5 url('image.jpg') no-repeat center/cover fixed;
/* Multiple backgrounds */
background: url('overlay.png'), linear-gradient(red, blue);
}
Borders & Shadows
Border Properties
.element {
border-width: 2px; /* Width */
border-style: solid; /* Style: solid, dashed, dotted, etc. */
border-color: #333; /* Color */
/* Shorthand */
border: 2px solid #333;
/* Individual sides */
border-top: 2px solid #333;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
border-left: 2px solid #333;
/* Border radius */
border-radius: 5px; /* All corners */
border-radius: 5px 10px 15px 20px; /* top-left, top-right, bottom-right, bottom-left */
border-radius: 50%; /* Circle (when width = height) */
}
Outline Properties
.element {
outline: 2px solid blue; /* Shorthand */
outline-width: 2px;
outline-style: solid;
outline-color: blue;
outline-offset: 2px; /* Space between outline and border */
}
Box Shadow
.element {
/* Syntax: h-offset v-offset blur spread color inset */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Basic shadow */
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3); /* Offset shadow */
box-shadow: inset 0 0 5px #000; /* Inner shadow */
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000; /* Multiple shadows */
}
Text Shadow
.element {
/* Syntax: h-offset v-offset blur color */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Basic shadow */
text-shadow: 0 0 5px #00f; /* Glow effect */
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000; /* Text outline */
}
Typography & Text Styling
Text Properties
.element {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 16px; /* px, em, rem, %, vw */
font-weight: bold; /* normal, bold, 100-900 */
font-style: italic; /* normal, italic, oblique */
font-variant: small-caps; /* normal, small-caps */
/* Shorthand */
font: italic bold 16px/1.5 'Helvetica', Arial, sans-serif;
line-height: 1.5; /* Unitless (recommended) */
letter-spacing: 0.5px; /* Character spacing */
word-spacing: 2px; /* Word spacing */
text-align: center; /* left, right, center, justify */
text-decoration: underline; /* none, underline, overline, line-through */
text-transform: uppercase; /* none, uppercase, lowercase, capitalize */
text-indent: 2em; /* First line indent */
text-overflow: ellipsis; /* clip, ellipsis */
white-space: nowrap; /* normal, nowrap, pre, pre-wrap, pre-line */
overflow: hidden; /* visible, hidden, scroll, auto */
/* Font smoothing */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Text Columns
.element {
column-count: 3; /* Number of columns */
column-width: 200px; /* Width of columns */
column-gap: 20px; /* Gap between columns */
column-rule: 1px solid #ccc; /* Divider between columns */
/* Span across columns */
column-span: all; /* none, all */
}
Hyphenation & Word Breaking
.element {
hyphens: auto; /* none, manual, auto */
word-break: break-all; /* normal, break-all, keep-all */
overflow-wrap: break-word; /* normal, break-word */
}
Transitions & Animations
Transitions
.element {
/* Individual properties */
transition-property: background-color; /* all, none, or specific properties */
transition-duration: 0.3s;
transition-timing-function: ease; /* linear, ease, ease-in, ease-out, cubic-bezier() */
transition-delay: 0.1s;
/* Shorthand */
transition: background-color 0.3s ease 0.1s;
/* Multiple transitions */
transition: background-color 0.3s ease, transform 0.5s ease-out;
}
Animations
/* Define keyframes */
@keyframes slide-in {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.element {
/* Individual properties */
animation-name: slide-in;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-delay: 0.5s;
animation-iteration-count: 1; /* number or infinite */
animation-direction: normal; /* normal, reverse, alternate, alternate-reverse */
animation-fill-mode: forwards; /* none, forwards, backwards, both */
animation-play-state: running; /* running, paused */
/* Shorthand */
animation: slide-in 1s ease-out 0.5s 1 normal forwards;
/* Multiple animations */
animation: slide-in 1s ease-out, fade 2s ease;
}
Transforms
2D Transforms
.element {
transform: translateX(20px); /* Move horizontally */
transform: translateY(20px); /* Move vertically */
transform: translate(20px, 20px); /* Move in both directions */
transform: scaleX(1.5); /* Scale horizontally */
transform: scaleY(1.5); /* Scale vertically */
transform: scale(1.5); /* Scale both dimensions */
transform: scale(1.5, 0.8); /* Scale width and height differently */
transform: rotate(45deg); /* Rotate clockwise */
transform: skewX(10deg); /* Skew horizontally */
transform: skewY(10deg); /* Skew vertically */
transform: skew(10deg, 5deg); /* Skew both directions */
/* Combine transforms */
transform: translate(20px, 20px) rotate(45deg) scale(1.5);
/* Transform origin */
transform-origin: center; /* center, top, right, bottom, left, or x y values */
}
3D Transforms
.element {
transform: translateZ(20px); /* Move along Z-axis */
transform: translate3d(20px, 20px, 20px); /* Move in all three dimensions */
transform: rotateX(45deg); /* Rotate around X-axis */
transform: rotateY(45deg); /* Rotate around Y-axis */
transform: rotateZ(45deg); /* Rotate around Z-axis (same as rotate()) */
transform: rotate3d(1, 1, 1, 45deg); /* Rotate around a vector */
transform: scaleZ(1.5); /* Scale along Z-axis */
transform: scale3d(1.5, 1.5, 1.5); /* Scale in all dimensions */
/* 3D settings */
perspective: 1000px; /* Depth perspective */
perspective-origin: center; /* Perspective viewpoint */
transform-style: preserve-3d; /* Preserve 3D positioning of children */
backface-visibility: hidden; /* Hide backface when rotated */
}
Flexbox Layout
Flex Container
.container {
display: flex; /* or inline-flex */
/* Main axis */
flex-direction: row; /* row, row-reverse, column, column-reverse */
justify-content: space-between; /* flex-start, flex-end, center, space-between, space-around, space-evenly */
/* Cross axis */
align-items: center; /* flex-start, flex-end, center, baseline, stretch */
align-content: space-between; /* flex-start, flex-end, center, space-between, space-around, stretch */
flex-wrap: wrap; /* nowrap, wrap, wrap-reverse */
/* Shorthand */
flex-flow: row wrap; /* flex-direction flex-wrap */
gap: 20px; /* Space between flex items */
row-gap: 20px; /* Vertical gap between rows */
column-gap: 20px; /* Horizontal gap between columns */
}
Flex Items
.item {
order: 1; /* Controls order of items (default: 0) */
flex-grow: 1; /* Grow factor (default: 0) */
flex-shrink: 1; /* Shrink factor (default: 1) */
flex-basis: auto; /* Base size (auto or specific size) */
/* Shorthand */
flex: 1; /* flex-grow flex-shrink flex-basis */
flex: 1 1 auto; /* Same as above but explicit */
flex: 0 0 200px; /* Fixed width, don't grow or shrink */
align-self: flex-end; /* Override align-items for specific item */
}
Grid Layout
Grid Container
.container {
display: grid; /* or inline-grid */
/* Define the grid */
grid-template-columns: 100px 1fr 2fr; /* Fixed width, flexible, and double-flexible */
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-columns: minmax(100px, 1fr) 2fr; /* Responsive with minimum width */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive columns */
grid-template-rows: 100px auto 100px; /* Fixed, auto, fixed heights */
grid-auto-rows: minmax(100px, auto); /* Default height for implicit rows */
grid-template-areas: /* Named grid areas */
"header header header"
"sidebar content content"
"footer footer footer";
/* Gaps */
gap: 20px; /* Gap between grid cells */
row-gap: 20px; /* Gap between rows */
column-gap: 20px; /* Gap between columns */
/* Alignment */
justify-items: center; /* start, end, center, stretch */
align-items: center; /* start, end, center, stretch */
place-items: center; /* align-items justify-items */
justify-content: space-between; /* start, end, center, stretch, space-between, space-around, space-evenly */
align-content: space-between; /* start, end, center, stretch, space-between, space-around, space-evenly */
place-content: center; /* align-content justify-content */
grid-auto-flow: row; /* row, column, row dense, column dense */
}
Grid Items
.item {
/* Placement by line numbers */
grid-column-start: 1;
grid-column-end: 3; /* or grid-column-end: span 2; */
grid-row-start: 1;
grid-row-end: 3; /* or grid-row-end: span 2; */
/* Shorthand */
grid-column: 1 / 3; /* start / end */
grid-column: 1 / span 2; /* start / span */
grid-row: 1 / 3; /* start / end */
/* Ultra shorthand */
grid-area: 1 / 1 / 3 / 3; /* row-start / column-start / row-end / column-end */
/* Named area */
grid-area: header; /* Corresponds to grid-template-areas */
/* Alignment (overrides container settings) */
justify-self: center; /* start, end, center, stretch */
align-self: center; /* start, end, center, stretch */
place-self: center; /* align-self justify-self */
}
Filters & Effects
Filters
.element {
filter: blur(5px); /* Blur */
filter: brightness(1.5); /* Brightness (1 is normal) */
filter: contrast(200%); /* Contrast (100% is normal) */
filter: drop-shadow(5px 5px 5px #000); /* Drop shadow */
filter: grayscale(100%); /* Grayscale */
filter: hue-rotate(90deg); /* Hue rotation */
filter: invert(100%); /* Color inversion */
filter: opacity(50%); /* Opacity/transparency */
filter: saturate(200%); /* Saturation (100% is normal) */
filter: sepia(100%); /* Sepia tone */
/* Combine filters */
filter: contrast(150%) brightness(120%) grayscale(30%);
}
Backdrop Filters
.element {
backdrop-filter: blur(10px); /* Apply filter to background */
backdrop-filter: blur(10px) brightness(90%); /* Combine multiple filters */
}
Blend Modes
/* Element blending with background */
.element {
background-color: red;
background-image: url('image.jpg');
background-blend-mode: multiply; /* normal, multiply, screen, overlay, etc. */
}
/* Content blending with its background */
.element {
mix-blend-mode: overlay; /* normal, multiply, screen, overlay, etc. */
}
Masking
.element {
/* Using image as mask */
mask-image: url('mask.png');
mask-size: cover;
mask-repeat: no-repeat;
/* Using gradient as mask */
mask-image: linear-gradient(to right, transparent, black);
/* Multiple masks */
mask-image: url('mask1.png'), linear-gradient(black, transparent);
mask-composite: intersect; /* add, subtract, intersect, exclude */
}
Clip Path
.element {
clip-path: circle(50% at center); /* Circle */
clip-path: ellipse(50% 25% at center); /* Ellipse */
clip-path: inset(10% 20% 10% 20% round 10px); /* Rectangle with rounded corners */
clip-path: polygon(0 0, 100% 0, 50% 100%); /* Triangle */
clip-path: path('M 0,0 H 100 V 100 H 0 L 0,0'); /* SVG path */
}
Media Queries & Responsive Design
Media Queries
/* Based on viewport width */
@media (max-width: 768px) {
/* Styles for screens <= 768px */
}
@media (min-width: 769px) and (max-width: 1024px) {
/* Styles for screens between 769px and 1024px */
}
@media (min-width: 1025px) {
/* Styles for screens >= 1025px */
}
/* Based on device characteristics */
@media (orientation: portrait) {
/* Portrait orientation */
}
@media (orientation: landscape) {
/* Landscape orientation */
}
@media (prefers-color-scheme: dark) {
/* Dark mode */
}
@media (prefers-reduced-motion: reduce) {
/* Reduced motion */
}
@media (hover: hover) {
/* Devices that can hover */
}
@media print {
/* Print styles */
}
Responsive Units
.element {
/* Relative to font size */
font-size: 1.5em; /* Relative to parent element's font size */
font-size: 1.5rem; /* Relative to root element's font size */
/* Relative to viewport */
width: 50vw; /* 50% of viewport width */
height: 50vh; /* 50% of viewport height */
font-size: 5vmin; /* 5% of viewport's smaller dimension */
font-size: 5vmax; /* 5% of viewport's larger dimension */
/* Container queries (modern) */
width: 50cqw; /* 50% of container width */
height: 50cqh; /* 50% of container height */
}
Container Queries
/* Define a container */
.container {
container-type: inline-size; /* size, inline-size */
container-name: main; /* Optional name */
}
/* Query based on container size */
@container (min-width: 500px) {
.child {
display: flex;
}
}
/* Query by container name */
@container main (min-width: 700px) {
.child {
flex-direction: row;
}
}
CSS Variables & Custom Properties
Defining Variables
:root {
/* Global variables */
--primary-color: #3498db;
--secondary-color: #2ecc71;
--base-font-size: 16px;
--spacing-unit: 8px;
}
.component {
/* Local variables */
--component-padding: 20px;
}
Using Variables
.element {
color: var(--primary-color);
font-size: var(--base-font-size);
padding: calc(var(--spacing-unit) * 2);
/* With fallback */
margin: var(--custom-margin, 10px);
}
Updating Variables
/* Media query variable update */
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #7fceff;
}
}
/* JavaScript variable update */
/*
document.documentElement.style.setProperty('--primary-color', '#ff0000');
*/
Advanced Selectors & Techniques
Parent Selector (:has)
/* Select div that contains a paragraph */
div:has(p) {
padding: 20px;
}
/* Select label with checked input */
label:has(input:checked) {
color: green;
}
Custom Scrollbars
.element {
/* Width and height */
scrollbar-width: thin; /* auto, thin, none */
/* Colors (Webkit browsers) */
scrollbar-color: #888 #f1f1f1; /* thumb track */
/* Detailed control (Webkit browsers) */
&::-webkit-scrollbar {
width: 10px;
height: 10px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
}
Aspect Ratio
.element {
aspect-ratio: 16 / 9; /* Maintain width-to-height ratio */
}
Content Visibility
.section {
content-visibility: auto; /* auto, visible, hidden */
contain-intrinsic-size: 1000px; /* Estimated size */
}
CSS Feature Comparison
| Feature | Browser Support | Use Case | Notes |
|---|---|---|---|
| Flexbox | Excellent | One-dimensional layouts, alignment | Best for rows or columns of items |
| Grid | Good | Two-dimensional layouts | Complex layouts with rows and columns |
| Custom Properties | Good | Theme variables, dynamic styling | Can be updated with JavaScript |
| Transitions | Excellent | Simple animations between states | For hover effects, state changes |
| Animations | Excellent | Complex, multi-step animations | For loading screens, attention-grabbing effects |
| Filters | Good | Visual effects on elements | Performance impact on complex filters |
| Media Queries | Excellent | Responsive design | Viewport-based adaptations |
| Container Queries | Limited | Component-based responsive design | More granular than media queries |
| :has() selector | Limited | Parent selections | Game-changer for CSS, but recent addition |
| Blend Modes | Good | Creative visual effects | Can impact readability |
Browser Compatibility Notes
- Always check caniuse.com for up-to-date browser support
- Modern features like Container Queries, :has(), and custom scrollbars may need fallbacks
- Consider using feature detection or @supports for progressive enhancement:
@supports (display: grid) {
.container {
display: grid;
}
}
Resources for Further Learning
- MDN Web Docs – CSS
- CSS-Tricks
- Smashing Magazine
- Can I Use
- CSS Reference
- CSS Grid Garden
- Flexbox Froggy
- CSS Animation Rocks
- Modern CSS Solutions by Stephanie Eckles
Remember that CSS is constantly evolving, with new features being added regularly. This cheatsheet covers CSS3 styling fundamentals and modern techniques, but checking documentation for the latest features is always recommended.