CSS Basics Explained — Your First Stylesheet
CSS (Cascading Style Sheets) is the language that makes HTML look good. If HTML is the structure of a house (walls, doors, windows), CSS is the paint, wallpaper, furniture, and lighting — everything that makes it visually appealing and pleasant to use.
What You’ll Learn
By the end of this tutorial, you’ll understand what CSS is and how it works with HTML, know the three ways to add CSS (and when to use each), write CSS syntax correctly (selector, property, value), use type, class, and id selectors, style colors, backgrounds, and fonts, and follow best practices for organizing your CSS.
Where This Fits
flowchart LR
A["HTML Tutorials"] --> B["**CSS Basics**"]
B --> C["CSS Selectors"]
C --> D["Box Model"]
D --> E["Layout (Flexbox & Grid)"]
style B fill:#f97316,stroke:#c2410c,color:#fff
style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
style E fill:#22c55e,stroke:#16a34a,color:#fff
What is CSS?
CSS stands for Cascading Style Sheets. Let’s break that down:
- Cascading — Multiple style rules can apply to the same element, and there’s a system for deciding which one wins (more on this later).
- Style — It controls appearance: colors, fonts, sizes, spacing, layout.
- Sheets — Styles are written in files (or sections) separate from the HTML.
Think of HTML as the skeleton and CSS as the skin, clothes, and makeup. Same skeleton can look completely different with different styles applied.
The Three Ways to Add CSS
There are three ways to add CSS to your HTML. Let’s understand each.
1. External CSS (Best Practice)
A separate .css file linked from your HTML. This is the recommended approach for any real project.
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>/* styles.css */
h1 { color: navy; }
p { font-size: 16px; }Why this is best: The browser downloads styles.css once and caches it. When the user visits another page on your site that uses the same file, it loads instantly from cache — no additional download. Your HTML stays clean and focused on structure.
2. Internal CSS
CSS written inside a <style> tag in the HTML <head>. Useful for single-page sites or one-off styles.
<head>
<style>
body { background: #f5f5f5; }
h1 { color: #333; }
</style>
</head>When to use: Quick prototypes, single-page demos, or when you need page-specific styles that don’t apply anywhere else.
3. Inline CSS (Avoid When Possible)
CSS written directly on an HTML element using the style attribute.
<p style="color: blue; font-weight: bold;">This text is blue and bold.</p>Why avoid it? It mixes content (HTML) with presentation (CSS). If you have 10 paragraphs that should all be blue, you’d need to write style="color: blue;" on every single one. With a single CSS rule, you can style all paragraphs at once:
p { color: blue; }One inline exception: When you need to apply a unique, one-off style that will never be reused (like a specific margin adjustment on a single element), inline CSS is fine.
CSS Syntax — The Core Pattern
Every CSS rule follows this pattern:
selector {
property: value;
property: value;
}| Part | Example | What it does |
|---|---|---|
| Selector | h1 | Picks which HTML element(s) to style |
| Declaration block | { ... } | Wraps all the style rules |
| Property | color | What aspect to change |
| Value | navy | How to change it |
| Declaration | color: navy; | A single property + value pair |
h1 {
color: navy;
font-size: 32px;
text-align: center;
}Read it like a sentence: “For every h1 element, set the color to navy, font size to 32 pixels, and text alignment to centered.”
Basic Selectors
Selectors tell CSS which HTML elements to target.
Type Selector
Targets every element of a given type:
/* All paragraph text */
p { line-height: 1.6; }
/* All level-2 headings */
h2 { color: #2c3e50; }
/* Every single element on the page */
* { box-sizing: border-box; }Class Selector
Targets any element with a specific class attribute. Classes are reusable — use them for groups of elements that share the same style.
<div class="card">...</div>
<div class="card">...</div> <!-- Same styles apply -->.card {
border: 1px solid #ddd;
padding: 16px;
border-radius: 8px;
}Naming convention: Use lowercase with hyphens (highlight-box, nav-link, error-message).
ID Selector
Targets a single element with a specific id. IDs must be unique — use them for one-of-a-kind elements.
<div id="header">...</div>#header {
background: navy;
color: white;
padding: 20px;
}The rule: Use classes for styles that repeat, IDs for unique elements. If you’re unsure, use a class.
Group Selector
Style multiple selectors with the same rules:
h1, h2, h3 {
font-family: 'Arial', sans-serif;
color: #2c3e50;
}Descendant Selector
Style elements that are nested inside another element:
/* Only <a> tags inside <nav> elements */
nav a {
color: white;
text-decoration: none;
}Colors in CSS
/* Named colors (limited, ~140 options) */
color: red;
background: navy;
/* Hex codes (most common) */
color: #333; /* Dark gray */
background: #667eea; /* Purple-blue */
/* RGB / RGBA (with opacity) */
color: rgb(51, 51, 51);
background: rgba(102, 126, 234, 0.8); /* 80% opacity */
/* HSL (Hue, Saturation, Lightness) */
color: hsl(0, 0%, 20%);
background: hsl(230, 80%, 60%);Hex is the most common format you’ll see in real projects. #RRGGBB where each pair is a value from 00 to FF (0 to 255).
Fonts and Text
body {
font-family: system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
text-align: left;
}
h1 {
font-family: 'Georgia', serif;
font-weight: bold;
font-size: 2.5rem;
text-align: center;
}
.highlight {
font-weight: 600;
color: #e74c3c;
text-decoration: underline;
}Common CSS Mistakes
1. Missing Semicolons
/* ❌ Wrong: missing semicolon breaks the next rule */
p {
color: blue
font-size: 16px
}
/* ✅ Correct: semicolons after every declaration */
p {
color: blue;
font-size: 16px;
}2. Wrong Selector Type
<!-- Target: -->
<div class="card">...</div>/* ❌ Wrong: id selector won't match a class */
#card { border: 1px solid #ddd; }
/* ✅ Correct: class selector with dot */
.card { border: 1px solid #ddd; }3. Inline Styles Overriding Everything
<!-- ❌ Hard to override without !important -->
<p style="color: red;">Text</p>
<!-- ✅ Use classes for maintainability -->
<p class="error">Text</p>4. Not Setting a Base Font
/* ❌ Browser default font varies by OS (usually Times New Roman) */
body { color: #333; }
/* ✅ Set a readable font */
body { font-family: system-ui, sans-serif; color: #333; line-height: 1.6; }5. Too Many Font Families
Using 5+ different fonts makes a page look messy. Stick to 1-2 font families max.
Try It Yourself
A fully styled page using what you just learned:
Common Mistakes Beginners Make
1. Skipping the Fundamentals
Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.
2. Not Practicing Enough
Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.
3. Ignoring Error Messages
Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.
4. Copy-Pasting Without Understanding
It’s tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.
5. Giving Up Too Early
Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.
Practice Questions
Q1: What are the three ways to add CSS and which is best practice? Inline (style attribute), internal (<style> tag), and external (.css file linked with <link>). External is best practice for multi-page sites because it caches and keeps HTML clean.
Q2: What’s the difference between a class and an id selector? A class (.class-name) can be used on multiple elements — use for reusable styles. An id (#id-name) must be unique per page — use for one-of-a-kind elements.
Q3: What does every CSS declaration end with? A semicolon (;). Missing semicolons can break subsequent rules.
Q4: What selector would target all <p> elements inside a <div> with class content?.content p — descendant selector. It targets any <p> nested inside an element with class="content".
Q5: What’s the universal selector and when might you use it? The universal selector (*) targets every element. It’s commonly used for reset styles: * { box-sizing: border-box; }.
Challenge
Style a simple blog post page:
- A header with site title and navigation (dark background, white text)
- A blog post with title, date, and content (serif font for title, system font for body)
- A sidebar with “related posts” (subtle background, smaller text)
- A footer with copyright
FAQ
{< faq >}
- What is Css Basics?
- Css Basics refers to the core concepts and practices used to build and manage modern web applications. Understanding it is essential for web developers.
- Do I need prior experience to learn Css Basics?
- Basic familiarity with web development concepts helps, but Css Basics can be learned step by step even as a beginner.
- How long does it take to learn Css Basics?
- With consistent practice, you can grasp the fundamentals in a few days to a week. Mastery takes ongoing practice and real-world projects.
- Where can I use Css Basics in real projects?
- Css Basics is used in a wide range of applications — from simple websites to complex enterprise systems, depending on the specific tools and technologies involved.
- What are common tools used with Css Basics?
- The specific tools depend on the technology stack, but version control (Git), package managers, and testing frameworks are commonly used alongside most development topics.
{< /faq >}
FAQ
What’s Next?
Now dive deeper into selectors and the cascade:
What’s Next
Congratulations on completing this Css Basics tutorial! Here’s where to go from here:
- Practice daily — Consistency is more important than long study sessions
- Build a project — Apply what you learned by building something real
- Explore related topics — Check out other tutorials in the same category
- Join the community — Discuss with other learners and share your progress
Remember: every expert was once a beginner. Keep coding!
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro