CSS Basic
1 week BeginnerColors, spacing, fonts. Styling the look.
Overview
CSS defines how HTML elements look on screen. It controls color, size, spacing, layout, and more.
Without CSS, the web is just plain text. CSS makes it readable and beautiful.
- Color properties (color, background-color)
- Spacing (margin, padding)
- Typography (font-size, font-family)
- Classes and Selectors
Detailed Explanation
Writing CSS
Syntax: selector { property: value; }. Ex: h1 { color: blue; } makes h1 text blue. Use semicolons to separate rules.
- h1 { color: blue; }
- p { font-size: 16px; margin: 10px; }
- Colon between property and value
- Always end declarations with a semicolon
- Missing colon
- Missing units (writing 16 instead of 16px)
Specifying Colors
color is text color, background-color is the background. You can use names (blue), hex (#0000ff), or rgb(0,0,255).
- color: blue;
- background-color: #f5f5f5;
- color: rgb(255, 0, 0);
- CSS variables are great for dark mode
- Ensure good contrast
- Spelling color names wrong
- Text blends into background
Margin and Padding
margin is outside space, padding is inside space. Can specify top, bottom, left, right.
- margin: 16px; (all sides)
- padding: 8px 16px; (top/bottom left/right)
- Vertical margins can collapse
- Padding adds space inside the element's background
- Confusing margin and padding
- Forgetting px unit
Width and Borders
Use width to set an element's width, and border for outlines. Use border-radius for rounded corners.
- width: 300px;
- border: 1px solid #ccc;
- border-radius: 8px;
- border is written as: width style color
- Forgetting the style (e.g., solid), so the border doesn't show
Classes and Selectors
Use a class (.classname) to style multiple elements. Add class="classname" in HTML.
- .card { border: 1px solid #ccc; }
- <div class="card">Card</div>
- Classes are reusable, IDs are for single elements
- Applying the same ID to multiple elements
- Overusing !important
Pseudo-classes (:hover)
Add :hover to style an element when the user's mouse hovers over it.
- a:hover { color: red; }
- Essential for providing visual feedback on buttons and links
- Relying too much on hover for mobile designs where it doesn't work well
Practical Steps
- 1 Add a style tag 2 mins
The quickest way to add CSS is writing it directly in the HTML file.
- Write <style> and </style> inside the <head> tag
- Add some color magic inside
<style> h1 { color: #ef4444; } </style> - 2 Style with Classes 3 mins
Targeting 'h1' styles all h1s. Let's use a class to style just one specific element.
- Add class="highlight" to a <p> tag
- Write .highlight { ... } in your CSS
<style> .highlight { background-color: #fef08a; font-weight: bold; } </style> <p class="highlight">Look at me!</p> <p>I am just normal text.</p> - 3 Build a Clickable Button 5 mins
Combine padding, colors, rounded corners, and a hover effect to make a juicy button.
- Create a button with class 'btn'
- Add padding and border-radius
- Use the :hover pseudo-class to change color on mouseover
<style> .btn { padding: 10px 20px; background-color: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; } .btn:hover { background-color: #2563eb; } </style> <button class="btn">Send Message</button>
Career & real-world context
CSS basics start design-to-code work—spacing, color, type from Figma.
Industry examples
- UI: CSS variables from tokens
- Email: inline CSS
- WordPress: theme overrides
Recommended study plan
Color → spacing → typography → classes. Five exercises each.
Prerequisites
CSS basics start design-to-code work—spacing, color, type from Figma.…
Frequently Asked Questions
- Why are my margins squishing together instead of adding up?
- Ah, the infamous 'Margin Collapse'. When vertical margins touch, they don't add up; the bigger one just swallows the smaller one. It's an ancient CSS quirk. Adding a tiny bit of padding or a border magically fixes it. Welcome to CSS, it's wild here.
- I set z-index to 999999 but it's STILL not on top!
- Z-index completely ignores your element unless its 'position' is set to relative, absolute, fixed, or sticky (anything but the default 'static'). Also, if its parent is trapped underneath another element, no amount of 9s will save the child element.
- Is 'box-sizing: border-box;' really that important?
- Yes! Without it, adding padding makes your elements grow wider like a balloon, blowing up your perfectly calculated 100% width layout and creating the dreaded horizontal scrollbar. It's the ultimate 'make math easy' spell.
- My CSS file is 3,000 lines long and I hate it. Help?
- Classic developer pain. You can learn naming conventions like BEM, or skip straight to the modern way: Utility-first CSS like Tailwind (putting styles directly in HTML), or CSS-in-JS if you're using React. For now, just embrace the spaghetti.
- margin vs padding?
- Padding inside the box; margin outside—border sits between.
- rem vs px?
- rem respects user font settings; px is fixed.
① Read the explanation. Next: ② Do exercises.
You've grasped CSS basics.
Next, we'll add interactivity with JavaScript.