CSS is the programming language used to style static web pages and web applications, to control how information is visually presented.
CSS (Cascading Style Sheets) is the language used to style and layout web pages. While HTML provides structure and content, CSS controls how that content looks - colors, fonts, spacing, layouts, animations.
Without CSS, websites would be plain black text on white backgrounds. CSS makes the web visually appealing.
You write rules that select HTML elements and apply styles:
h1 {
color: blue;
font-size: 32px;
margin-bottom: 20px;
}
.button {
background-color: green;
padding: 10px 20px;
border-radius: 5px;
}
Browsers read CSS and apply these styles to matching HTML elements.
selector {
property: value;
}
Selector: Which elements to style (h1, .button, #header)
Property: What aspect to change (color, font-size, margin)
Value: The style to apply (blue, 32px, 20px)
Inline: Directly in HTML elements. Quick but messy.
<p style="color: red;">Red text</p>
Internal: In <style> tags within HTML. Good for single pages.
<style>
p { color: red; }
</style>
External: Separate CSS file linked to HTML. Best for multi-page sites.
<link rel="stylesheet" href="styles.css">
Colors: color (text), background-color
Typography: font-size, font-weight, font-family, line-height
Spacing: margin (outside), padding (inside)
Layout: display, position, width, height
Border: border, border-radius
Flexbox/Grid: Modern layout systems
Every HTML element is a box with:
Understanding the box model is fundamental to CSS layout.
Element: p { } - Targets all paragraphs
Class: .button { } - Targets elements with class="button"
ID: #header { } - Targets element with id="header"
Descendant: nav a { } - Targets links inside nav
Pseudo-classes: a:hover { } - Styles for specific states
Make websites work on all screen sizes using media queries:
/* Mobile first */
.container {
width: 100%;
}
/* Tablet and up */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
width: 1000px;
}
}
Flexbox: One-dimensional layouts (rows or columns). Perfect for navigation bars, card layouts.
Grid: Two-dimensional layouts (rows and columns). Ideal for page layouts, dashboards.
Custom Properties: Define reusable values.
:root {
--primary-color: #007bff;
}
.button {
background: var(--primary-color);
}
Animations: Smooth transitions and keyframe animations.
Tailwind CSS: Utility-first. Compose styles with classes.
Bootstrap: Component library. Pre-built buttons, forms, navigation.
Material UI: Google Material Design components.
Frameworks speed development but add file size. Balance convenience with performance.
Specificity: Which rule wins when multiple target the same element? More specific selectors override general ones.
Cascade: Styles cascade from parent to child elements. Understanding inheritance prevents surprises.
Browser Differences: Browsers render CSS slightly differently. Use CSS resets or normalize.css for consistency.
Responsive Design: Making layouts work on phones, tablets, and desktops requires planning.
Use Classes Over IDs: IDs are too specific and make styles hard to override.
Mobile-First: Design for mobile, then enhance for larger screens.
Keep Specificity Low: Flat, simple selectors are easier to maintain.
Consistent Naming: Use BEM or other naming conventions for clarity.
Minimize Nesting: Deeply nested selectors become hard to manage.
Sass/SCSS: Add variables, nesting, functions to CSS. Compiles to regular CSS.
Less: Similar to Sass with different syntax.
PostCSS: Transform CSS with plugins. Autoprefixer adds browser prefixes automatically.
Modern tooling often includes these, but learning plain CSS first is essential.
CSS has a gentle learning curve for basics but mastery takes time. The best way to learn is building actual websites.
CSS transforms functional websites into beautiful, engaging experiences. Good CSS improves usability, makes content scannable, guides user attention, and builds brand identity.
Every website uses CSS. Understanding it deeply makes you a more effective developer regardless of your specialization.