Table of Contents
- Introduction to CSS Styling
- CSS Selectors and Specificity
- Colors and Backgrounds
- Typography and Fonts
- Box Model Fundamentals
- Spacing: Margin and Padding
- Borders and Outlines
- Display and Visibility
- Positioning Elements
- Flexbox Basics
- CSS Grid Basics
- Styling Links and Buttons
- Styling Lists
- Styling Tables
- Forms and Input Styling
- Transitions and Animations
- Responsive Design Basics
- Practical Examples
- Best Practices
- Common Mistakes
Introduction to CSS Styling
CSS (Cascading Style Sheets) is the language used to style HTML documents. It controls how elements look on different devices and screen sizes.
What CSS Can Do
/* CSS can style: */ - Colors and backgrounds - Fonts and text - Spacing and layout - Borders and shadows - Animations and transitions - Responsive behavior - And much more!
Ways to Add CSS
<!-- 1. Inline CSS (avoid when possible) -->
<p style="color: red; font-size: 16px;">This is red text</p>
<!-- 2. Internal CSS (in head) -->
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<!-- 3. External CSS (best practice) -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
CSS Selectors and Specificity
Basic Selectors
/* Element selector */
p {
color: blue;
}
/* Class selector */
.highlight {
background-color: yellow;
}
/* ID selector */
#header {
font-size: 24px;
}
/* Universal selector */
* {
margin: 0;
padding: 0;
}
/* Attribute selector */
[type="text"] {
border: 1px solid gray;
}
/* Multiple selectors */
h1, h2, h3 {
font-family: Arial, sans-serif;
}
Combinators
/* Descendant selector (space) */
article p {
line-height: 1.6;
}
/* Child selector (>) */
ul > li {
list-style: none;
}
/* Adjacent sibling selector (+) */
h2 + p {
font-weight: bold;
}
/* General sibling selector (~) */
h2 ~ p {
color: gray;
}
Pseudo-classes
/* Link states */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { text-decoration: underline; }
a:active { color: red; }
/* Form states */
input:focus {
outline: 2px solid blue;
}
input:disabled {
background-color: #f0f0f0;
}
input:checked {
outline: 2px solid green;
}
/* Structural pseudo-classes */
li:first-child {
font-weight: bold;
}
li:last-child {
border-bottom: none;
}
li:nth-child(even) {
background-color: #f0f0f0;
}
li:nth-child(3n+1) {
color: red;
}
Pseudo-elements
/* First line/letter */
p::first-line {
font-weight: bold;
}
p::first-letter {
font-size: 200%;
float: left;
}
/* Before and after */
.quote::before {
content: "“";
font-size: 2em;
}
.quote::after {
content: "”";
font-size: 2em;
}
/* Selection highlight */
::selection {
background-color: yellow;
color: black;
}
/* Placeholder text */
input::placeholder {
color: gray;
font-style: italic;
}
Specificity Hierarchy
/* Specificity values (from highest to lowest) */
1. !important /* Avoid using */
2. Inline styles /* style="..." */
3. IDs /* #header */
4. Classes, attributes /* .class, [type] */
5. Elements /* div, p, h1 */
/* Examples of specificity */
p { color: blue; } /* Specificity: 001 */
.text { color: red; } /* Specificity: 010 */
#header p { color: green; } /* Specificity: 101 */
p.text[type] { color: yellow; } /* Specificity: 021 */
#header .text p[type] { color: purple; } /* Specificity: 121 */
/* Calculating specificity */
- Element: 1 point
- Class/Attribute: 10 points
- ID: 100 points
- Inline: 1000 points
- !important: Wins everything (avoid!)
/* !important - use sparingly */
.error {
color: red !important; /* Overrides everything */
}
Colors and Backgrounds
Color Values
/* Named colors */ color: red; color: blue; color: transparent; color: currentColor; /* Hexadecimal */ color: #ff0000; /* Red */ color: #00ff00; /* Green */ color: #0000ff; /* Blue */ color: #000; /* Black (shorthand) */ color: #fff; /* White (shorthand) */ color: #ffaa00; /* Orange */ /* RGB/RGBA */ color: rgb(255, 0, 0); /* Red */ color: rgb(0, 255, 0); /* Green */ color: rgba(255, 0, 0, 0.5); /* 50% transparent red */ color: rgba(0, 0, 255, 0.2); /* 20% transparent blue */ /* HSL/HSLA */ color: hsl(0, 100%, 50%); /* Red */ color: hsl(120, 100%, 50%); /* Green */ color: hsla(240, 100%, 50%, 0.3); /* 30% transparent blue */ /* HSL explained: H: Hue (0-360 degrees on color wheel) S: Saturation (0-100%) L: Lightness (0-100%) */
Background Properties
/* Background color */
.element {
background-color: #f0f0f0;
}
/* Background image */
.element {
background-image: url('image.jpg');
background-repeat: no-repeat; /* repeat, repeat-x, repeat-y, no-repeat */
background-position: center; /* top, bottom, left, right, center */
background-size: cover; /* cover, contain, auto, % */
background-attachment: fixed; /* scroll, fixed, local */
}
/* Background shorthand */
.element {
background: #f0f0f0 url('image.jpg') no-repeat center/cover;
}
/* Multiple backgrounds */
.element {
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('background.jpg') center/cover no-repeat;
}
/* Gradients */
.linear-gradient {
background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);
}
.radial-gradient {
background: radial-gradient(circle, red, blue);
background: radial-gradient(circle at top left, yellow, orange);
}
.conic-gradient {
background: conic-gradient(red, yellow, green, blue);
background: conic-gradient(from 90deg, red, blue);
}
Typography and Fonts
Font Properties
/* Font family */
body {
font-family: 'Helvetica', Arial, sans-serif;
font-family: 'Georgia', 'Times New Roman', serif;
font-family: 'Courier New', monospace;
}
/* Font size */
p {
font-size: 16px; /* Absolute */
font-size: 1.2em; /* Relative to parent */
font-size: 1.2rem; /* Relative to root */
font-size: 100%; /* Percentage */
font-size: smaller; /* Keyword */
}
/* Font weight */
p {
font-weight: normal; /* 400 */
font-weight: bold; /* 700 */
font-weight: lighter; /* Relative */
font-weight: bolder; /* Relative */
font-weight: 100; /* Thin */
font-weight: 300; /* Light */
font-weight: 500; /* Medium */
font-weight: 900; /* Black */
}
/* Font style */
p {
font-style: normal;
font-style: italic;
font-style: oblique;
}
/* Font variant */
p {
font-variant: normal;
font-variant: small-caps;
}
Text Properties
/* Text alignment */
p {
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
}
/* Text decoration */
p {
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;
/* Shorthand */
text-decoration: underline wavy red 2px;
}
/* Text transform */
p {
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-transform: none;
}
/* Text shadow */
p {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
text-shadow: 1px 1px 2px black, 0 0 1em blue;
}
/* Line height */
p {
line-height: 1.5; /* Unitless multiplier */
line-height: 24px; /* Fixed */
line-height: 150%; /* Percentage */
}
/* Letter and word spacing */
p {
letter-spacing: 1px; /* Space between characters */
word-spacing: 2px; /* Space between words */
}
/* Text indentation */
p {
text-indent: 20px; /* Indent first line */
}
/* White space */
p {
white-space: normal; /* Default */
white-space: nowrap; /* No wrapping */
white-space: pre; /* Preserve spaces */
white-space: pre-wrap; /* Preserve spaces, wrap */
white-space: pre-line; /* Preserve line breaks */
}
/* Word break */
p {
word-break: normal;
word-break: break-all; /* Break words at any character */
word-break: keep-all; /* Korean/Japanese */
}
/* Overflow wrap */
p {
overflow-wrap: normal;
overflow-wrap: break-word; /* Break long words */
}
Web Fonts
/* @font-face rule */
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/myfont.woff2') format('woff2'),
url('fonts/myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* Control font loading behavior */
}
/* Using custom font */
body {
font-family: 'MyCustomFont', Arial, sans-serif;
}
/* Google Fonts (in HTML) */
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
/* In CSS */
body {
font-family: 'Roboto', sans-serif;
}
/* Font display options */
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2');
font-display: auto; /* Browser default */
font-display: block; /* Short block period */
font-display: swap; /* Fallback then swap */
font-display: fallback; /* Short block, then swap */
font-display: optional; /* Optional, may not load */
}
Box Model Fundamentals
Understanding the Box Model
/* Every element is a box with: */
.element {
/* Content - the actual content */
width: 200px;
height: 100px;
/* Padding - space inside the border */
padding: 10px;
/* Border - around the padding */
border: 2px solid black;
/* Margin - space outside the border */
margin: 10px;
}
/* Visual representation:
------------------------------
| Margin |
| ----------------------- |
| | Border | |
| | --------------- | |
| | | Padding | | |
| | | ---------- | | |
| | | | Content| | | |
| | | | | | | |
| | | ---------- | | |
| | --------------- | |
| ----------------------- |
------------------------------
*/
Box Sizing
/* Default (content-box) */
.content-box {
box-sizing: content-box;
width: 300px;
padding: 20px;
border: 5px solid black;
/* Total width = 300 + 40 + 10 = 350px */
}
/* Border-box (recommended) */
.border-box {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid black;
/* Total width = 300px (includes padding and border) */
}
/* Apply to all elements */
* {
box-sizing: border-box;
}
Width and Height
/* Absolute units */
.fixed {
width: 300px;
height: 200px;
min-width: 100px;
max-width: 500px;
min-height: 50px;
max-height: 400px;
}
/* Relative units */
.relative {
width: 50%; /* Percentage of parent */
height: 50vh; /* 50% of viewport height */
width: 50vw; /* 50% of viewport width */
height: 50vmin; /* 50% of smaller viewport dimension */
height: 50vmax; /* 50% of larger viewport dimension */
}
/* Auto width */
.auto-width {
width: auto; /* Default - fills available space */
}
/* Intrinsic sizing */
.intrinsic {
width: min-content; /* Width of smallest word */
width: max-content; /* Width of all content */
width: fit-content; /* Fits content, but not exceeding container */
}
Spacing: Margin and Padding
Margin
/* Margin - space outside the element */
.margin-example {
/* Individual sides */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/* Shorthand: top right bottom left */
margin: 10px 20px 10px 20px;
/* Shorthand: top/bottom left/right */
margin: 10px 20px;
/* Shorthand: all sides */
margin: 10px;
/* Auto margins (centering) */
margin: 0 auto; /* Center horizontally */
margin: auto; /* Center both axes */
}
/* Negative margins */
.overlap {
margin-top: -20px; /* Pull element up */
}
/* Margin collapsing */
/* Vertical margins between block elements collapse to the larger value */
.box1 {
margin-bottom: 30px;
}
.box2 {
margin-top: 20px;
}
/* Space between = 30px (not 50px) */
Padding
/* Padding - space inside the element */
.padding-example {
/* Individual sides */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
/* Shorthand: top right bottom left */
padding: 10px 20px 10px 20px;
/* Shorthand: top/bottom left/right */
padding: 10px 20px;
/* Shorthand: all sides */
padding: 10px;
/* Padding doesn't accept auto or negative values */
}
Practical Spacing Examples
/* Card with proper spacing */
.card {
padding: 20px;
margin: 15px;
border: 1px solid #ddd;
border-radius: 8px;
}
.card-header {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #eee;
}
.card-content {
margin-bottom: 20px;
line-height: 1.6;
}
.card-footer {
padding-top: 10px;
border-top: 1px solid #eee;
}
/* Button spacing */
.button {
padding: 10px 20px; /* Comfortable click area */
margin: 5px; /* Space between buttons */
}
/* Form spacing */
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
padding: 8px 12px;
margin-bottom: 10px;
}
Borders and Outlines
Border Properties
/* Border width */
.border {
border-width: 2px;
border-top-width: 3px;
border-right-width: 4px;
}
/* Border style */
.border {
border-style: solid; /* solid, dotted, dashed, double */
border-style: groove; /* 3D grooved effect */
border-style: ridge; /* 3D ridged effect */
border-style: inset; /* 3D inset effect */
border-style: outset; /* 3D outset effect */
border-style: none; /* no border */
border-style: hidden; /* same as none, but for tables */
}
/* Border color */
.border {
border-color: black;
border-color: #ff0000;
border-color: rgba(0,0,255,0.5);
border-top-color: red;
}
/* Border shorthand */
.border {
border: 2px solid black;
border-top: 3px dashed red;
border-right: 4px dotted blue;
}
/* Individual sides */
.border {
border-top: 2px solid black;
border-right: 3px dashed red;
border-bottom: 4px dotted blue;
border-left: 5px double green;
}
Border Radius
/* Rounded corners */
.rounded {
border-radius: 5px; /* All corners */
border-radius: 10px 20px; /* top-left/bottom-right, top-right/bottom-left */
border-radius: 10px 20px 30px 40px; /* top, right, bottom, left */
}
/* Specific corners */
.rounded {
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 40px;
}
/* Circle */
.circle {
width: 100px;
height: 100px;
border-radius: 50%; /* Makes a perfect circle */
}
/* Pill shape */
.pill {
border-radius: 9999px; /* Very large value creates pill */
/* or */
border-radius: 50vh;
}
/* Different radii */
.ellipse {
border-radius: 50% / 20%; /* horizontal / vertical radius */
}
Box Shadow
/* Simple shadow */
.shadow {
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
/* offset-x, offset-y, blur-radius, color */
}
/* Spread radius */
.shadow {
box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.3);
/* offset-x, offset-y, blur, spread, color */
}
/* Inner shadow */
.inner-shadow {
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}
/* Multiple shadows */
.multiple-shadows {
box-shadow:
0 2px 5px rgba(0,0,0,0.2),
0 5px 15px rgba(0,0,0,0.1);
}
/* Common shadow patterns */
.card-shadow {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.hover-shadow {
transition: box-shadow 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
/* Neumorphism shadow */
.neumorphism {
box-shadow:
8px 8px 16px rgba(0,0,0,0.1),
-8px -8px 16px rgba(255,255,255,0.8);
}
Outline
/* Outline - similar to border but doesn't affect layout */
.outline {
outline: 2px solid red;
outline-width: 3px;
outline-style: dashed;
outline-color: blue;
outline-offset: 5px; /* Space between element and outline */
}
/* Remove default outline (bad for accessibility) */
.no-outline {
outline: none; /* Remove focus indicator - not recommended */
}
/* Better focus styles */
.focus-visible:focus-visible {
outline: 3px solid blue;
outline-offset: 2px;
}
Display and Visibility
Display Values
/* Block - takes full width, starts new line */
.block {
display: block;
width: 100%;
height: 100px;
}
/* Inline - only takes needed width, no line break */
.inline {
display: inline;
/* width and height ignored */
/* margin/padding only horizontal */
}
/* Inline-block - best of both */
.inline-block {
display: inline-block;
width: 200px; /* Can set width */
height: 100px; /* Can set height */
margin: 10px; /* All margins work */
}
/* None - element removed from layout */
.hidden {
display: none;
}
/* Flex */
.flex-container {
display: flex;
}
/* Grid */
.grid-container {
display: grid;
}
/* Table displays */
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
Visibility and Opacity
/* Visibility - hides but maintains space */
.invisible {
visibility: hidden;
}
/* Visible (default) */
.visible {
visibility: visible;
}
/* Collapse - for table rows/columns */
.collapse {
visibility: collapse;
}
/* Opacity - transparency (0-1) */
.transparent {
opacity: 0.5; /* 50% transparent */
opacity: 0; /* Fully transparent */
opacity: 1; /* Fully opaque */
}
/* Difference between display:none and visibility:hidden */
.hidden-element {
display: none; /* Removed from flow, no space */
}
.hidden-element {
visibility: hidden; /* Hidden but space reserved */
}
Overflow
/* Overflow handling */
.container {
width: 300px;
height: 200px;
overflow: visible; /* Default - content overflows */
overflow: hidden; /* Content clipped */
overflow: scroll; /* Always show scrollbars */
overflow: auto; /* Show scrollbars only when needed */
/* Separate axes */
overflow-x: hidden;
overflow-y: auto;
}
/* Text overflow */
.text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Show ... when text overflows */
text-overflow: clip; /* Just cut off */
}
Positioning Elements
Position Values
/* Static - default */
.static {
position: static;
/* top, right, bottom, left have no effect */
}
/* Relative - relative to normal position */
.relative {
position: relative;
top: 10px;
left: 20px;
/* Moves 10px down, 20px right from normal position */
/* Original space is preserved */
}
/* Absolute - relative to nearest positioned ancestor */
.absolute {
position: absolute;
top: 0;
right: 0;
/* Positioned relative to viewport if no positioned ancestor */
/* Removed from normal flow */
}
/* Fixed - relative to viewport */
.fixed {
position: fixed;
bottom: 20px;
right: 20px;
/* Stays in place when scrolling */
}
/* Sticky - toggles between relative and fixed */
.sticky {
position: sticky;
top: 0;
/* Becomes fixed when reaches top, otherwise relative */
}
Z-Index
/* Stacking order */
.layer1 {
position: relative;
z-index: 1; /* Lower number = lower layer */
}
.layer2 {
position: relative;
z-index: 2; /* Higher number = higher layer */
}
.layer3 {
position: relative;
z-index: 10; /* Appears above both */
}
/* Negative z-index */
.background {
position: absolute;
z-index: -1; /* Goes behind content */
}
/* Z-index only works on positioned elements */
Practical Positioning Examples
/* Modal overlay */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 1000;
}
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
z-index: 1001;
}
/* Badge */
.badge {
position: relative;
}
.badge::after {
position: absolute;
top: -5px;
right: -5px;
content: "3";
background: red;
color: white;
border-radius: 50%;
padding: 2px 5px;
font-size: 12px;
}
/* Tooltip */
.tooltip {
position: relative;
}
.tooltip:hover::after {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
content: attr(data-tooltip);
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
white-space: nowrap;
}
/* Header */
header {
position: sticky;
top: 0;
background: white;
z-index: 100;
}
Flexbox Basics
Flex Container Properties
/* Flex container */
.flex-container {
display: flex; /* or inline-flex */
/* Direction */
flex-direction: row; /* Default - left to right */
flex-direction: row-reverse; /* Right to left */
flex-direction: column; /* Top to bottom */
flex-direction: column-reverse; /* Bottom to top */
/* Wrap */
flex-wrap: nowrap; /* Default - no wrap */
flex-wrap: wrap; /* Wrap to next line */
flex-wrap: wrap-reverse; /* Wrap in reverse order */
/* Shorthand: flex-direction flex-wrap */
flex-flow: row wrap;
/* Main axis alignment */
justify-content: flex-start; /* Default - start of container */
justify-content: flex-end; /* End of container */
justify-content: center; /* Center */
justify-content: space-between; /* Equal space between items */
justify-content: space-around; /* Space around items */
justify-content: space-evenly; /* Equal space everywhere */
/* Cross axis alignment (single line) */
align-items: stretch; /* Default - stretch to fill */
align-items: flex-start; /* Start of cross axis */
align-items: flex-end; /* End of cross axis */
align-items: center; /* Center of cross axis */
align-items: baseline; /* Align by text baseline */
/* Cross axis alignment (multiple lines) */
align-content: stretch; /* Default */
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
/* Gap between items */
gap: 10px; /* Gap in both directions */
row-gap: 10px; /* Vertical gap */
column-gap: 20px; /* Horizontal gap */
}
Flex Item Properties
/* Flex items */
.flex-item {
/* Order */
order: 0; /* Default - lower numbers first */
/* Growth factor */
flex-grow: 0; /* Default - doesn't grow */
flex-grow: 1; /* Takes available space */
/* Shrink factor */
flex-shrink: 1; /* Default - can shrink */
flex-shrink: 0; /* Won't shrink */
/* Basis - initial size */
flex-basis: auto; /* Default */
flex-basis: 200px; /* Fixed size */
flex-basis: 30%; /* Percentage */
/* Shorthand: flex-grow flex-shrink flex-basis */
flex: 0 1 auto; /* Default */
flex: 1; /* flex: 1 1 0 */
flex: 1 0 200px; /* Grow, don't shrink, start at 200px */
/* Individual alignment */
align-self: auto; /* Inherits from container */
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;
}
Common Flexbox Patterns
/* Navigation bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
/* Card layout */
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px; /* Grow, shrink, basis */
}
/* Centering */
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Holy grail layout */
.holy-grail {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.holy-grail header,
.holy-grail footer {
flex: 0 0 auto;
}
.holy-grail main {
display: flex;
flex: 1 1 auto;
}
.holy-grail nav,
.holy-grail aside {
flex: 0 0 200px;
}
.holy-grail article {
flex: 1 1 auto;
}
/* Equal height columns */
.equal-height {
display: flex;
}
.equal-height > * {
flex: 1;
}
/* Sticky footer */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
CSS Grid Basics
Grid Container Properties
/* Grid container */
.grid-container {
display: grid; /* or inline-grid */
/* Define columns */
grid-template-columns: 100px 200px 100px; /* Three columns */
grid-template-columns: 1fr 2fr 1fr; /* Fractional units */
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Define rows */
grid-template-rows: 100px 200px;
grid-template-rows: repeat(3, auto);
/* Gap */
gap: 20px; /* Both directions */
row-gap: 10px;
column-gap: 20px;
/* Align items */
justify-items: stretch; /* Horizontal alignment */
justify-items: start;
justify-items: end;
justify-items: center;
align-items: stretch; /* Vertical alignment */
align-items: start;
align-items: end;
align-items: center;
/* Justify content - when grid smaller than container */
justify-content: start;
justify-content: end;
justify-content: center;
justify-content: stretch;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
/* Align content */
align-content: start;
align-content: end;
align-content: center;
align-content: stretch;
align-content: space-between;
align-content: space-around;
/* Named grid areas */
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
Grid Item Properties
/* Grid items */
.grid-item {
/* Placement by lines */
grid-column-start: 1;
grid-column-end: 3; /* Span from line 1 to 3 */
grid-row-start: 1;
grid-row-end: 3;
/* Shorthand */
grid-column: 1 / 3;
grid-row: 1 / 3;
grid-column: 1 / span 2; /* Span 2 columns */
grid-row: 1 / span 2;
/* Placement by area */
grid-area: header; /* Use named area */
/* Span all */
grid-column: 1 / -1; /* Span entire row */
/* Individual alignment */
justify-self: stretch;
justify-self: start;
justify-self: end;
justify-self: center;
align-self: stretch;
align-self: start;
align-self: end;
align-self: center;
}
Common Grid Patterns
/* Responsive grid */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
/* Holy grail with grid */
.holy-grail-grid {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr 200px;
min-height: 100vh;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
/* Gallery grid */
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 10px;
}
.gallery-item:nth-child(3n) {
grid-column: span 2;
grid-row: span 2;
}
/* Magazine layout */
.magazine {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-auto-rows: minmax(100px, auto);
gap: 20px;
}
.featured {
grid-column: 1 / -1;
}
.sidebar {
grid-row: span 2;
}
/* Card grid with header/footer */
.card {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100%;
}
Styling Links and Buttons
Link Styling
/* Base link styles */
a {
color: #0066cc;
text-decoration: none;
transition: color 0.3s, text-decoration 0.3s;
}
a:hover {
color: #004499;
text-decoration: underline;
}
a:visited {
color: #663399;
}
a:active {
color: #ff0000;
}
/* Navigation links */
.nav-link {
display: inline-block;
padding: 10px 15px;
color: #333;
font-weight: 500;
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: #0066cc;
transition: width 0.3s;
}
.nav-link:hover::after {
width: 80%;
}
/* Underline animation */
.animated-link {
position: relative;
text-decoration: none;
}
.animated-link::before {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: currentColor;
transition: width 0.3s;
}
.animated-link:hover::before {
width: 100%;
}
/* Button-like links */
.button-link {
display: inline-block;
padding: 12px 24px;
background: #0066cc;
color: white;
border-radius: 4px;
text-decoration: none;
transition: background 0.3s, transform 0.2s;
}
.button-link:hover {
background: #004499;
transform: translateY(-2px);
text-decoration: none;
}
Button Styling
/* Base button styles */
.btn {
display: inline-block;
padding: 12px 24px;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: all 0.3s;
}
/* Button variants */
.btn-primary {
background: #0066cc;
color: white;
}
.btn-primary:hover {
background: #004499;
box-shadow: 0 4px 8px rgba(0,102,204,0.3);
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #5a6268;
}
.btn-outline {
background: transparent;
border: 2px solid #0066cc;
color: #0066cc;
}
.btn-outline:hover {
background: #0066cc;
color: white;
}
/* Button sizes */
.btn-small {
padding: 8px 16px;
font-size: 14px;
}
.btn-large {
padding: 16px 32px;
font-size: 18px;
}
/* Full width button */
.btn-block {
display: block;
width: 100%;
}
/* Disabled button */
.btn:disabled,
.btn.disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Loading state */
.btn-loading {
position: relative;
color: transparent !important;
}
.btn-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
border: 2px solid white;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Icon button */
.icon-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
}
.icon-button i {
font-size: 1.2em;
}
/* Social buttons */
.btn-twitter {
background: #1DA1F2;
color: white;
}
.btn-facebook {
background: #4267B2;
color: white;
}
.btn-github {
background: #333;
color: white;
}
/* 3D button effect */
.btn-3d {
background: #0066cc;
color: white;
border-bottom: 4px solid #004499;
transform: translateY(0);
}
.btn-3d:hover {
transform: translateY(-2px);
border-bottom-width: 6px;
}
.btn-3d:active {
transform: translateY(2px);
border-bottom-width: 2px;
}
/* Ghost button */
.btn-ghost {
background: transparent;
color: #333;
border: 1px solid currentColor;
}
.btn-ghost:hover {
background: rgba(0,0,0,0.05);
}
/* Gradient button */
.btn-gradient {
background: linear-gradient(45deg, #0066cc, #00ccff);
color: white;
background-size: 200% auto;
transition: background-position 0.3s;
}
.btn-gradient:hover {
background-position: right center;
}
Styling Lists
Unordered Lists
/* Reset list styles */
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
/* Custom bullet points */
.custom-bullets {
list-style: none;
}
.custom-bullets li {
padding-left: 20px;
position: relative;
}
.custom-bullets li::before {
content: "•";
position: absolute;
left: 0;
color: #0066cc;
font-size: 1.2em;
}
/* Checkmark bullets */
.checkmark-list li::before {
content: "✓";
color: green;
font-weight: bold;
}
/* Arrow bullets */
.arrow-list li::before {
content: "→";
color: #0066cc;
}
/* Image bullets */
.image-bullets li {
background: url('bullet.png') left center no-repeat;
padding-left: 20px;
background-size: 12px;
}
Ordered Lists
/* Custom numbering */
.custom-numbers {
list-style: none;
counter-reset: list-counter;
}
.custom-numbers li {
counter-increment: list-counter;
margin-bottom: 10px;
position: relative;
padding-left: 30px;
}
.custom-numbers li::before {
content: counter(list-counter) ".";
position: absolute;
left: 0;
color: #0066cc;
font-weight: bold;
}
/* Roman numerals */
.roman-list {
list-style: upper-roman;
}
/* Alphabetical */
.alpha-list {
list-style: lower-alpha;
}
/* Styled numbers */
.styled-numbers {
list-style: none;
counter-reset: styled-counter;
}
.styled-numbers li {
counter-increment: styled-counter;
margin-bottom: 10px;
position: relative;
padding-left: 40px;
}
.styled-numbers li::before {
content: counter(styled-counter);
position: absolute;
left: 0;
top: -2px;
width: 25px;
height: 25px;
background: #0066cc;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
}
Horizontal Lists
/* Horizontal navigation */
.horizontal-list {
display: flex;
gap: 20px;
list-style: none;
padding: 0;
}
.horizontal-list li {
margin: 0;
}
.horizontal-list a {
padding: 10px 15px;
background: #f0f0f0;
border-radius: 4px;
text-decoration: none;
color: #333;
}
.horizontal-list a:hover {
background: #e0e0e0;
}
/* Breadcrumb navigation */
.breadcrumb {
display: flex;
list-style: none;
padding: 0;
background: #f8f9fa;
padding: 10px 15px;
border-radius: 4px;
}
.breadcrumb li {
display: flex;
align-items: center;
}
.breadcrumb li:not(:last-child)::after {
content: "›";
margin: 0 10px;
color: #6c757d;
}
.breadcrumb a {
color: #0066cc;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
/* Tag list */
.tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
padding: 0;
}
.tags li {
background: #e9ecef;
padding: 5px 12px;
border-radius: 20px;
font-size: 14px;
color: #495057;
}
Nested Lists
/* Nested list styling */
.nested-list {
list-style: none;
padding-left: 20px;
}
.nested-list ul {
padding-left: 20px;
margin: 5px 0;
}
.nested-list li {
margin: 8px 0;
position: relative;
}
.nested-list > li {
font-weight: bold;
}
.nested-list > li > ul > li {
font-weight: normal;
}
.nested-list > li::before {
content: "▸";
color: #0066cc;
margin-right: 8px;
}
.nested-list ul li::before {
content: "•";
color: #6c757d;
margin-right: 8px;
font-size: 0.8em;
}
/* Tree view */
.tree {
list-style: none;
padding-left: 0;
}
.tree ul {
list-style: none;
padding-left: 20px;
border-left: 1px dashed #dee2e6;
margin: 5px 0;
}
.tree li {
margin: 5px 0;
position: relative;
}
.tree li::before {
content: "📁";
margin-right: 8px;
}
.tree ul li::before {
content: "📄";
}
Styling Tables
Basic Table Styling
/* Table reset */
table {
border-collapse: collapse; /* Merge borders */
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
}
/* Table cells */
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #dee2e6;
}
/* Header styling */
th {
background-color: #f8f9fa;
font-weight: 600;
color: #495057;
}
/* Zebra striping */
tbody tr:nth-child(even) {
background-color: #f8f9fa;
}
/* Hover effect */
tbody tr:hover {
background-color: #e9ecef;
transition: background-color 0.3s;
}
Table Variations
/* Bordered table */
.table-bordered {
border: 1px solid #dee2e6;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #dee2e6;
}
/* Borderless table */
.table-borderless th,
.table-borderless td,
.table-borderless tr {
border: none;
}
/* Striped rows */
.table-striped tbody tr:nth-child(odd) {
background-color: #f8f9fa;
}
/* Hoverable rows */
.table-hover tbody tr:hover {
background-color: #e9ecef;
}
/* Condensed table */
.table-sm th,
.table-sm td {
padding: 6px;
}
/* Responsive table */
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
Table with Status Indicators
/* Status indicators */
.table-status td {
position: relative;
}
.status-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.status-active {
background: #d4edda;
color: #155724;
}
.status-pending {
background: #fff3cd;
color: #856404;
}
.status-inactive {
background: #f8d7da;
color: #721c24;
}
/* Action buttons */
.table-actions {
display: flex;
gap: 8px;
}
.table-actions button {
padding: 4px 8px;
font-size: 12px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.edit-btn {
background: #007bff;
color: white;
}
.delete-btn {
background: #dc3545;
color: white;
}
Forms and Input Styling
Basic Form Styling
/* Form container */
.form-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* Form group */
.form-group {
margin-bottom: 20px;
}
/* Labels */
label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #333;
}
/* Required field indicator */
.required label::after {
content: "*";
color: red;
margin-left: 4px;
}
/* Input fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 16px;
transition: border-color 0.3s, box-shadow 0.3s;
}
/* Focus state */
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #80bdff;
box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}
/* Placeholder styling */
::placeholder {
color: #6c757d;
opacity: 1;
}
:-ms-input-placeholder {
color: #6c757d;
}
::-ms-input-placeholder {
color: #6c757d;
}
Input Validation Styling
/* Valid input */
input:valid {
border-color: #28a745;
}
input:valid:focus {
border-color: #28a745;
box-shadow: 0 0 0 3px rgba(40,167,69,0.25);
}
/* Invalid input */
input:invalid:not(:placeholder-shown) {
border-color: #dc3545;
}
input:invalid:not(:placeholder-shown):focus {
border-color: #dc3545;
box-shadow: 0 0 0 3px rgba(220,53,69,0.25);
}
/* Validation messages */
.error-message {
color: #dc3545;
font-size: 14px;
margin-top: 5px;
display: none;
}
input:invalid:not(:placeholder-shown) ~ .error-message {
display: block;
}
Checkbox and Radio Styling
/* Custom checkbox */
.checkbox-group {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.checkbox-group input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.checkbox-group label {
position: relative;
padding-left: 30px;
cursor: pointer;
margin-bottom: 0;
font-weight: normal;
}
.checkbox-group label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border: 2px solid #007bff;
border-radius: 4px;
background: white;
}
.checkbox-group label::after {
content: '✓';
position: absolute;
left: 3px;
top: 50%;
transform: translateY(-50%) scale(0);
color: white;
font-size: 14px;
transition: transform 0.2s;
}
.checkbox-group input[type="checkbox"]:checked + label::before {
background: #007bff;
}
.checkbox-group input[type="checkbox"]:checked + label::after {
transform: translateY(-50%) scale(1);
}
/* Custom radio */
.radio-group {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.radio-group input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.radio-group label {
position: relative;
padding-left: 30px;
cursor: pointer;
margin-bottom: 0;
font-weight: normal;
}
.radio-group label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border: 2px solid #007bff;
border-radius: 50%;
background: white;
}
.radio-group label::after {
content: '';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%) scale(0);
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
transition: transform 0.2s;
}
.radio-group input[type="radio"]:checked + label::before {
background: #007bff;
}
.radio-group input[type="radio"]:checked + label::after {
transform: translateY(-50%) scale(1);
}
Select Dropdown Styling
/* Custom select */
.select-wrapper {
position: relative;
}
.select-wrapper::after {
content: '▼';
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #495057;
pointer-events: none;
font-size: 12px;
}
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 35px;
cursor: pointer;
background: white;
}
select::-ms-expand {
display: none;
}
/* Disabled select */
select:disabled {
background-color: #e9ecef;
cursor: not-allowed;
}
File Input Styling
/* Custom file input */
.file-input-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}
.file-input-wrapper input[type="file"] {
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.file-input-wrapper .file-button {
display: inline-block;
padding: 8px 16px;
background: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
.file-input-wrapper .file-name {
margin-left: 10px;
color: #6c757d;
}
Transitions and Animations
CSS Transitions
/* Basic transition */
.element {
transition: property duration timing-function delay;
}
/* Examples */
.element {
background-color: red;
transition: background-color 0.3s ease;
}
.element:hover {
background-color: blue;
}
/* Multiple properties */
.element {
width: 100px;
height: 100px;
background: red;
transition: width 0.3s, height 0.3s, background 0.5s;
}
.element:hover {
width: 200px;
height: 200px;
background: blue;
}
/* All properties */
.element {
transition: all 0.3s ease;
}
/* Timing functions */
.ease {
transition-timing-function: ease; /* Default */
}
.ease-in {
transition-timing-function: ease-in; /* Slow start */
}
.ease-out {
transition-timing-function: ease-out; /* Slow end */
}
.ease-in-out {
transition-timing-function: ease-in-out; /* Slow start and end */
}
.linear {
transition-timing-function: linear; /* Constant speed */
}
/* Custom cubic-bezier */
.custom {
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
CSS Keyframe Animations
/* Define animation */
@keyframes slide-in {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* Apply animation */
.element {
animation: slide-in 0.5s ease-out;
}
/* Animation properties */
.element {
animation-name: slide-in;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-delay: 0.2s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
animation-play-state: running;
/* Shorthand */
animation: slide-in 0.5s ease-out 0.2s 1 normal forwards;
}
/* Multiple animations */
.element {
animation: slide-in 0.5s ease-out, pulse 2s ease-in-out infinite;
}
/* Animation events */
.element:hover {
animation-play-state: paused;
}
Common Animation Examples
/* Fade in */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 1s ease;
}
/* Slide up */
@keyframes slideUp {
from {
transform: translateY(50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.slide-up {
animation: slideUp 0.5s ease-out;
}
/* Scale in */
@keyframes scaleIn {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.scale-in {
animation: scaleIn 0.3s ease-out;
}
/* Rotate in */
@keyframes rotateIn {
from {
transform: rotate(-180deg) scale(0.3);
opacity: 0;
}
to {
transform: rotate(0) scale(1);
opacity: 1;
}
}
.rotate-in {
animation: rotateIn 0.5s ease;
}
/* Shake */
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake {
animation: shake 0.5s ease;
}
/* Loading spinner */
@keyframes spinner {
to { transform: rotate(360deg); }
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top-color: #3498db;
border-radius: 50%;
animation: spinner 0.8s linear infinite;
}
/* Pulsing dot */
@keyframes pulse-dot {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.pulse-dot {
position: relative;
}
.pulse-dot::before,
.pulse-dot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: #00ff00;
border-radius: 50%;
}
.pulse-dot::after {
animation: pulse-dot 2s ease-out infinite;
}
Responsive Design Basics
Viewport Meta Tag
<!-- Essential for responsive design --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Additional options --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
Media Queries
/* Basic media queries */
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
.sidebar {
display: none;
}
}
/* Min-width (mobile-first) */
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
/* Range */
@media (min-width: 768px) and (max-width: 1024px) {
.element {
background: yellow;
}
}
/* Orientation */
@media (orientation: landscape) {
.element {
flex-direction: row;
}
}
@media (orientation: portrait) {
.element {
flex-direction: column;
}
}
/* Print styles */
@media print {
.no-print {
display: none;
}
a[href]::after {
content: " (" attr(href) ")";
}
body {
font-size: 12pt;
}
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background: #333;
color: #fff;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* High contrast */
@media (prefers-contrast: high) {
.button {
border: 2px solid black;
}
}
Responsive Units
/* Responsive units */
.container {
/* Fluid widths */
width: 90%;
max-width: 1200px;
margin: 0 auto;
/* Responsive padding */
padding: clamp(1rem, 5vw, 3rem);
}
/* Responsive typography */
h1 {
font-size: clamp(1.5rem, 5vw, 3rem);
}
p {
font-size: calc(14px + 0.5vw);
}
/* Responsive images */
img {
max-width: 100%;
height: auto;
}
/* Responsive grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
/* Responsive flexbox */
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.flex-item {
flex: 1 1 300px;
}
/* Viewport units */
.hero {
min-height: 100vh; /* Full viewport height */
width: 100vw; /* Full viewport width */
padding: 5vmin; /* 5% of smaller viewport dimension */
}
Responsive Navigation Example
/* Responsive navigation */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: #333;
color: white;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
}
.menu-toggle {
display: none;
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
}
/* Tablet */
@media (max-width: 768px) {
.nav-links {
gap: 1rem;
}
}
/* Mobile */
@media (max-width: 576px) {
.menu-toggle {
display: block;
}
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
background: #333;
padding: 1rem;
text-align: center;
}
.nav-links.active {
display: flex;
}
}
Practical Examples
Example 1: Modern Button Set
<div class="button-demo"> <button class="btn btn-primary">Primary Button</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-outline">Outline</button> <button class="btn btn-gradient">Gradient</button> <button class="btn btn-3d">3D Button</button> <button class="btn btn-icon"> <span class="icon">★</span> Icon Button </button> <button class="btn btn-loading">Loading</button> <button class="btn" disabled>Disabled</button> </div>
.btn {
display: inline-block;
padding: 12px 24px;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
margin: 5px;
}
.btn-primary {
background: #4361ee;
color: white;
box-shadow: 0 4px 6px rgba(67, 97, 238, 0.3);
}
.btn-primary:hover {
background: #3a56d4;
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(67, 97, 238, 0.4);
}
.btn-primary:active {
transform: translateY(0);
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #5a6268;
}
.btn-outline {
background: transparent;
border: 2px solid #4361ee;
color: #4361ee;
}
.btn-outline:hover {
background: #4361ee;
color: white;
}
.btn-gradient {
background: linear-gradient(45deg, #4361ee, #7209b7);
color: white;
background-size: 200% auto;
}
.btn-gradient:hover {
background-position: right center;
}
.btn-3d {
background: #4361ee;
color: white;
border-bottom: 4px solid #3a56d4;
transform: translateY(0);
}
.btn-3d:hover {
transform: translateY(-2px);
border-bottom-width: 6px;
}
.btn-3d:active {
transform: translateY(2px);
border-bottom-width: 2px;
}
.btn-icon {
display: inline-flex;
align-items: center;
gap: 8px;
background: #4361ee;
color: white;
}
.btn-icon .icon {
font-size: 1.2em;
transition: transform 0.3s;
}
.btn-icon:hover .icon {
transform: rotate(360deg);
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
Example 2: Card Component
<div class="card"> <img src="image.jpg" alt="Card image" class="card-image"> <div class="card-content"> <span class="card-category">Technology</span> <h3 class="card-title">Card Title</h3> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p> <div class="card-footer"> <span class="card-date">May 15, 2024</span> <a href="#" class="card-link">Read More →</a> </div> </div> </div>
.card {
max-width: 350px;
border-radius: 12px;
overflow: hidden;
background: white;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
transition: transform 0.5s;
}
.card:hover .card-image {
transform: scale(1.05);
}
.card-content {
padding: 20px;
}
.card-category {
display: inline-block;
padding: 4px 12px;
background: #e9ecef;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
color: #495057;
margin-bottom: 10px;
}
.card-title {
margin: 10px 0;
font-size: 20px;
font-weight: 600;
color: #333;
}
.card-text {
color: #666;
line-height: 1.6;
margin-bottom: 15px;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid #e9ecef;
}
.card-date {
color: #999;
font-size: 14px;
}
.card-link {
color: #4361ee;
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
.card-link:hover {
color: #3a56d4;
}
Example 3: Form with Validation
<form class="form">
<h2 class="form-title">Contact Us</h2>
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>
<span class="error-message">Name is required</span>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
<span class="error-message">Please enter a valid email</span>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">
<span class="hint">Format: 123-456-7890</span>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<select id="subject" name="subject" required>
<option value="">Select a subject</option>
<option value="general">General Inquiry</option>
<option value="support">Technical Support</option>
<option value="billing">Billing Question</option>
</select>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
<span class="error-message">Message cannot be empty</span>
</div>
<div class="checkbox-group">
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">Subscribe to newsletter</label>
</div>
<button type="submit" class="btn btn-primary btn-block">Send Message</button>
</form>
.form {
max-width: 500px;
margin: 0 auto;
padding: 30px;
background: #f8f9fa;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.form-title {
text-align: center;
margin-bottom: 30px;
color: #333;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #495057;
}
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #ced4da;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s, box-shadow 0.3s;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #4361ee;
box-shadow: 0 0 0 3px rgba(67,97,238,0.1);
}
input:invalid:not(:placeholder-shown) {
border-color: #dc3545;
}
input:invalid:not(:placeholder-shown):focus {
border-color: #dc3545;
box-shadow: 0 0 0 3px rgba(220,53,69,0.1);
}
.error-message {
display: none;
color: #dc3545;
font-size: 14px;
margin-top: 5px;
}
input:invalid:not(:placeholder-shown) ~ .error-message {
display: block;
}
.hint {
display: block;
color: #6c757d;
font-size: 12px;
margin-top: 5px;
}
textarea {
resize: vertical;
min-height: 100px;
}
.checkbox-group {
margin: 20px 0;
}
.checkbox-group input[type="checkbox"] {
margin-right: 8px;
}
.btn-block {
width: 100%;
padding: 12px;
font-size: 16px;
}
Best Practices
CSS Organization
/* 1. Use consistent naming convention */
/* BEM naming */
.block { }
.block__element { }
.block__element--modifier { }
/* Example */
.card { }
.card__image { }
.card__title { }
.card__button { }
.card__button--primary { }
/* 2. Organize CSS logically */
/* Reset / Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Variables */
:root {
--primary-color: #4361ee;
--secondary-color: #6c757d;
--font-family: 'Arial', sans-serif;
}
/* Global styles */
body {
font-family: var(--font-family);
line-height: 1.6;
color: #333;
}
/* Layout */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Components */
.btn { }
.card { }
.navbar { }
/* Utilities */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.hidden { display: none; }
/* Media queries */
@media (max-width: 768px) {
/* Responsive styles */
}
CSS Performance
/* 1. Use shorthand properties */
/* Bad */
.element {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
/* Good */
.element {
margin: 10px 20px;
}
/* 2. Avoid !important */
/* Bad */
.element {
color: red !important;
}
/* Good - increase specificity */
.container .element {
color: red;
}
/* 3. Use modern units */
/* Good for responsiveness */
.element {
padding: clamp(1rem, 5%, 3rem);
font-size: calc(14px + 0.5vw);
}
/* 4. Minimize nesting */
/* Bad */
.sidebar .nav ul li a span { }
/* Good */
.sidebar-link { }
/* 5. Use CSS variables for theming */
:root {
--primary: #4361ee;
--spacing: 1rem;
}
.element {
color: var(--primary);
padding: var(--spacing);
}
Accessibility
/* 1. Focus indicators */
:focus-visible {
outline: 3px solid #4361ee;
outline-offset: 2px;
}
/* 2. Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* 3. High contrast support */
@media (prefers-contrast: high) {
.button {
border: 2px solid black;
}
}
/* 4. Screen reader only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* 5. Sufficient color contrast */
.button {
background: #4361ee;
color: white; /* 4.5:1 contrast ratio */
}
Common Mistakes
1. Not Resetting Box-sizing
/* Bad */
* {
/* No box-sizing reset */
}
/* Good */
* {
box-sizing: border-box;
}
2. Overusing !important
/* Bad */
.element {
color: red !important;
margin: 0 !important;
}
/* Good */
.parent .element {
color: red;
margin: 0;
}
3. Not Making Designs Responsive
/* Bad */
.container {
width: 1200px;
}
/* Good */
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
4. Using Fixed Heights
/* Bad */
.card {
height: 300px;
overflow: auto;
}
/* Good */
.card {
min-height: 300px;
height: auto;
}
5. Not Using Semantic Class Names
/* Bad */
.red-text { color: red; }
.big-font { font-size: 24px; }
.box-1 { background: blue; }
/* Good */
.error-message { color: red; }
.hero-title { font-size: 24px; }
.primary-button { background: blue; }
6. Forgetting Mobile-First Approach
/* Bad - desktop-first */
.element {
width: 800px;
}
@media (max-width: 768px) {
.element {
width: 100%;
}
}
/* Good - mobile-first */
.element {
width: 100%;
}
@media (min-width: 768px) {
.element {
width: 800px;
}
}
7. Not Considering Accessibility
/* Bad */
:focus {
outline: none;
}
.button {
color: #ccc;
background: #eee;
}
/* Good */
:focus-visible {
outline: 3px solid blue;
}
.button {
color: white;
background: #4361ee;
}
8. Overcomplicating Selectors
/* Bad */
body > div.container > main > section > div > ul > li > a.link {
color: red;
}
/* Good */
.nav-link {
color: red;
}
9. Not Using CSS Variables
/* Bad */
.button {
background: #4361ee;
}
.card {
border: 2px solid #4361ee;
}
.header {
color: #4361ee;
}
/* Good */
:root {
--primary: #4361ee;
}
.button {
background: var(--primary);
}
.card {
border: 2px solid var(--primary);
}
.header {
color: var(--primary);
}
10. Forgetting to Test Cross-Browser
/* Add vendor prefixes if needed */
.element {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
Conclusion
CSS styling is both an art and a science. This comprehensive guide covers the essentials you need to create beautiful, responsive, and accessible web designs.
Key Takeaways
- Selectors and Specificity - Understand how to target elements and calculate specificity
- Box Model - Master margin, padding, border, and content
- Typography - Control fonts, text, and readability
- Layout - Use Flexbox and Grid for modern layouts
- Responsive Design - Make designs work on all devices
- Animations - Add life with transitions and animations
- Accessibility - Ensure designs are usable by everyone
- Best Practices - Write clean, maintainable CSS
Next Steps
- Practice by building real projects
- Learn CSS preprocessors (SASS, LESS)
- Study CSS frameworks (Bootstrap, Tailwind)
- Explore advanced animations
- Master CSS architecture (BEM, SMACSS)
- Stay updated with new CSS features
Remember: Great styling is about balance - beautiful design, good performance, and excellent user experience!