CSS: Step-by-Step Practical Tutorial
A concise, hands-on guide for beginners → intermediate
Prepared by: Decent Computer Institute
What you'll learn:
• Core CSS syntax & inclusion methods (inline, internal, external).
• Selectors, specificity & combinators.
• Box model, layout (float, positioning), and modern layout systems (Flexbox & Grid).
• Responsive design with media queries, typography, colors, backgrounds.
• Transitions, animations, and practical mini-projects.
Table of Contents
1. Getting Started with CSS
2. Selectors & Specificity
3. The Box Model
4. Display, Visibility & Positioning
5. Flexbox - One dimensional layout
6. CSS Grid - Two dimensional layout
7. Responsive Design & Media Queries
8. Typography, Colors & Backgrounds
9. Transitions & Animations
10. Forms & UI Controls Styling
11. Practical Examples (Header, Card, Layout)
12. Exercises & Answers
1. Getting Started with CSS
CSS (Cascading Style Sheets) controls the presentation of HTML. You can include CSS by three
methods: inline, internal (style tag), and external stylesheet. External is preferred for
maintainability.
<!-- Inline -->
<p style="color: blue;">Inline styled text</p>
<!-- Internal -->
<head>
<style>
p { color: green; }
</style>
</head>
<!-- External (recommended) -->
<link rel="stylesheet" href="[Link]">
/* [Link] */
body { font-family: Arial, sans-serif; }
2. Selectors & Specificity
Selectors target elements. Specificity decides which rule applies when multiple rules target the
same element. Order: inline > id > class/attribute/pseudo-class > element. Use combinators to
target relationships.
/* Element selector */
p { color: #333; }
/* Class selector */
.highlight { background: #fffbcc; }
/* ID selector */
#main { max-width: 900px; }
/* Descendant selector */
article p { margin-bottom: 12px; }
/* Child selector */
ul > li { list-style: square; }
/* Adjacent & General sibling */
h2 + p { font-weight: bold; }
h2 ~ p { color: #666; }
/* Specificity example */
#nav .item a { color: red; } /* higher specificity than .item a */
3. The Box Model
Every element is a box: content, padding, border, and margin. Use box-sizing to include padding
and border in the element's total width.
/* Default box model */
[Link] {
width: 300px;
padding: 20px;
border: 4px solid #1976D2;
margin: 12px;
}
/* Better: include padding & border in width */
* { box-sizing: border-box; }
4. Display, Visibility & Positioning
Control how elements appear and where they sit: display, visibility, position (static, relative,
absolute, fixed, sticky), and float. Prefer modern layout methods over excessive floats.
/* Display */
.inline { display: inline; }
.block { display: block; }
.inline-block { display: inline-block; }
/* Visibility */
.hidden { visibility: hidden; }
/* Positioning */
.relative { position: relative; top: 10px; left: 5px; }
.absolute { position: absolute; top: 20px; right: 10px; }
/* Sticky header */
header { position: sticky; top: 0; background: white; }
5. Flexbox - One dimensional layout
Flexbox simplifies arranging elements in a row or column. Use container properties (display:flex)
and item properties (flex, justify-content, align-items) for alignment and distribution.
/* Container */
.container {
display: flex;
flex-direction: row; /* row | column */
justify-content: space-between; /* main axis */
align-items: center; /* cross axis */
}
/* Items */
.item { flex: 1; margin: 8px; }
/* Example: center content horizontally & vertically */
.center {
display: flex;
justify-content: center;
align-items: center;
}
6. CSS Grid - Two dimensional layout
Grid is powerful for two-dimensional layouts (rows & columns). Define
grid-template-columns/rows and place items using grid-column/grid-row.
/* Grid container */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
/* Place items */
.header { grid-column: 1 / -1; } /* spans all columns */
.sidebar { grid-column: 1 / 2; }
.content { grid-column: 2 / 4; }
7. Responsive Design & Media Queries
Responsive design ensures layouts adapt to screen sizes. Use fluid units (%, rem) and media
queries to change styles at breakpoints.
/* Mobile-first */
.container { padding: 12px; }
/* Tablet and up */
@media (min-width: 600px) {
.container { padding: 20px; max-width: 720px; margin: 0 auto; }
}
/* Desktop */
@media (min-width: 1024px) {
.container { max-width: 1100px; }
}
8. Typography, Colors & Backgrounds
Use web-safe fonts and prefer system stacks or web fonts. Control font-size, line-height,
letter-spacing. Backgrounds support gradients and images with background-size and
background-position.
body {
font-family: "Helvetica Neue", Arial, sans-serif;
color: #222;
line-height: 1.6;
}
h1 { font-size: 28px; letter-spacing: 0.5px; }
.header {
background: linear-gradient(90deg, #42A5F5, #7E57C2);
color: #fff;
padding: 24px;
background-size: cover;
}
9. Transitions & Animations
Transitions animate property changes smoothly. Use animations (keyframes) for more complex
motion.
/* Transition */
.button {
background: #1E88E5;
transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover { background: #1565C0; transform: translateY(-2px); }
/* Keyframes animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeIn 0.6s ease both; }
10. Forms & UI Controls Styling
Style inputs, labels, selects consistently. Use :focus for accessibility and :invalid for validation
feedback.
input, select, textarea {
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 6px;
width: 100%;
box-sizing: border-box;
}
input:focus { outline: none; border-color: #42A5F5; box-shadow: 0 0 0 3px rgba(66,165,245,0.12); }
button { cursor: pointer; }
11. Practical Examples (Header, Card, Layout)
Small real-world snippets to practice: responsive header, product card, two-column layout using
Flexbox.
/* Responsive Header */
.header {
display:flex; justify-content:space-between; align-items:center; padding:12px 20px;
}
.nav { display:flex; gap:12px; }
/* Product Card */
.card {
border: 1px solid #eee; border-radius:10px; padding:12px; max-width:280px;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.card img { width:100%; border-radius:8px 8px 0 0; }
.card .price { font-weight:700; color:#2E7D32; }
/* Two-column layout (flexbox) */
.row { display:flex; gap:16px; }
.col { flex:1; }
@media (max-width:700px) { .row { flex-direction:column; } }
12. Exercises & Answers
Practice tasks to reinforce learning. Try them in code editor or local files.
Exercise 1: Create a centered hero section with a background image and CTA button.
Exercise 2: Build a responsive 3-column pricing grid that stacks to one column on mobile.
Exercise 3: Create a product card with hover effect that raises and adds shadow.
Exercise 4: Make a navbar that collapses into a hamburger (use CSS only for styling, JS optional).
-- Hints / Answers --
Hero: use display:flex; align-items:center; justify-content:center; min-height:60vh;
Pricing: use display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; @media to 1fr
Card hover: .card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,0,0,0.12); }
Further Resources & Next Steps
Practice is key — try building small projects: portfolio page, blog layout, admin dashboard.
Recommended resources: MDN Web Docs, CSS-Tricks, Flexbox Froggy & Grid Garden for
interactive learning. Good luck!
Decent Computer Institute • FF-12, Amber Complex, Ajwa Road, Vadodara-19 • +91
98257 54652 / 93761 69952
