Quest 1 • Lesson 7
🎨 CSS Basics
CSS (Cascading Style Sheets) controls the look and feel of your web pages: colors, fonts, spacing, layout. There are three ways to add CSS to HTML.
📌 Inline CSS
Uses the style attribute inside an HTML tag. Affects only that element. Good for quick tests, but not recommended for large projects.
🔵 This text is styled with inline CSS (blue, bold).
body { background-color: #0f172a; }
h1 { color: #60a5fa; }
</style>
📌 Internal CSS
Uses a <style> tag inside <head>. Applies to the whole page. Good for single‑page designs.
📌 External CSS
CSS in a separate .css file linked via <link>. Best for multi‑page websites – one file controls all pages.
🎨 Common CSS Properties
color – text colourbackground-color – background colourfont-size – text size (px, rem, em)font-family – typefacemargin – space outside elementpadding – space inside elementborder – border around elementtext-align – left, center, rightThis paragraph uses inline CSS: yellow text, dark background, padding, rounded corners.
✨ Challenge: Style a Card
Write internal CSS to create a card with:
- Background:
#1e293b - Padding: 1rem
- Border radius: 1rem
- Text color: white
- Box shadow
.card {
background-color: #1e293b;
padding: 1rem;
border-radius: 1rem;
color: white;
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
</style>
<div class="card">Your content here</div>
❤️ Support Free Education
This course is 100% free. If it helps you, consider buying me a coffee.
☕ Buy Me a Coffee➡️ Ready for more?
Next lesson: CSS Box Model – margin, padding, border.
Continue to Lesson 1.8 →(Coming soon – check back or buy Pro Pack for instant access)