CSS Reference
Complete guide to CSS properties and selectors
🎨 What is CSS?
CSS (Cascading Style Sheets) is used to style and layout web pages. It controls colors, fonts, spacing, positioning, and much more!
/* Basic CSS example */
h1 {
color: #2563eb;
font-size: 2rem;
text-align: center;
}
Output:
Styled Heading
CSS Selectors
Element Selector
Selects all elements of a type
p { color: blue; }ID Selector
Selects element with specific ID
#header { background: red; }Class Selector
Selects elements with specific class
.button { padding: 10px; }Attribute Selector
Selects elements with attributes
[type="text"] { border: 1px solid; }🔹 Common CSS Properties
Essential CSS properties form the foundation of web styling. Layout: display, position, flex/grid properties, margin, padding, box-sizing. Typography: font-family, font-size, line-height, font-weight, color. Visual: background, border, border-radius, box-shadow, opacity. Also crucial: width/height, overflow, and z-index. Mastering these properties allows you to control the layout, appearance, and spacing of any element. They are the building blocks for all CSS skills and are used in every stylesheet.
/* Text Styling */
.text-style {
color: #1f2937;
font-size: 18px;
font-weight: bold;
text-align: center;
line-height: 1.6;
}
/* Box Model */
.box {
width: 200px;
height: 100px;
padding: 20px;
margin: 10px;
border: 2px solid #3b82f6;
background-color: #dbeafe;
}
/* Modern Layout */
.flex-container {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}Output:
🔹 Modern CSS Features
Modern CSS introduces features that enable complex layouts, dynamic designs, and better performance. CSS Grid and Flexbox revolutionized layout. CSS Custom Properties (Variables) allow reusable values and theming. Container Queries enable component-based responsiveness. The :has() selector allows parent selection. New viewport units (svh, lvh) handle mobile UI. Logical properties (margin-inline) support internationalization. These features reduce reliance on JavaScript for styling, create more maintainable code, and allow developers to build sophisticated, adaptive interfaces directly with CSS. Staying updated with these advancements is key to modern front-end development.
/* CSS Grid */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
/* CSS Variables */
:root {
--primary-color: #3b82f6;
--secondary-color: #10b981;
--border-radius: 8px;
}
.modern-card {
background: var(--primary-color);
border-radius: var(--border-radius);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease;
}
.modern-card:hover {
transform: translateY(-2px);
}