Concept 5: Introduction to CSS
Introduction to CSS
:dart: Learning Objectives
By the end of this lesson, you will:
- Understand what CSS is and why websites need it
- Learn how to add colors and styles to your web pages using EduBlocks
- Know the difference between inline and internal CSS
- Create your first styled web page with visual blocks
:clipboard: Before You Start
Make sure you have:
- Completed the HTML basics lessons
- EduBlocks open in your browser
- Your previous HTML project ready
:information_source: Info What is CSS? CSS (Cascading Style Sheet) is like the paintbrush for your website! While HTML creates the structure (like walls and doors of a house), CSS adds the colors, sizes, and decorations (like paint, wallpaper, and furniture).
In EduBlocks, CSS blocks help you:
- Add colors to your text and backgrounds
- Change font sizes and styles
- Position elements on your page
- Make your website look amazing!
:art: Why Do We Need CSS?
CSS transforms plain web pages into beautiful, colorful websites. Here's what CSS does:
- Makes websites colorful - Add any color you can imagine!
- Changes text appearance - Make text big, small, bold, or fancy
- Creates layouts - Put things exactly where you want them
- Adds visual effects - Make things look professional
:bulb: Tip: Building Blocks to Real Code In EduBlocks, when you use style blocks, you're actually creating CSS code! Each color block or style block gets converted into real CSS that browsers understand.
:emoji:️ Without CSS vs With CSS
See the amazing difference CSS makes:
| Without CSS | With CSS |
|---|---|
| Your website looks like a plain text document - boring and hard to read! | Your website becomes colorful, organized, and fun to explore! |
 |
 |
note Visual Difference Notice how the website with CSS has:
- Colorful backgrounds
- Different text sizes
- Better spacing
- Professional appearance
:hammer_and_wrench: Ways to Add CSS in EduBlocks
In EduBlocks, you can add CSS styles in three different ways:
One. Inline CSS - Style One Thing
Apply styles to just one element at a time
2. Internal CSS - Style One Page
Apply styles to your whole webpage
3. External CSS - Style Many Pages
Apply styles to multiple webpages (We'll learn this in a future course!)
:bulb: Tip: What We'll Learn Today In this lesson, we'll focus on:
- Inline CSS - Quick styling for individual elements
- Internal CSS - Organizing styles for your whole page
:dart: Inline CSS - Quick Styling
:information_source: Info What is Inline CSS? Inline CSS lets you add styles directly to one HTML element. It's like painting one specific thing in your picture!
In EduBlocks, you use the style attribute block to add colors, sizes, and other styles to individual elements.
How Inline CSS Works
When you want to style just one element, attach a style block directly to it:
Adding Multiple Styles
Want to add more than one style? Use this special block:
:mag: Try It Yourself!
Here's an example using inline CSS in EduBlocks:
| Code |
|---|
 |
| Output |
 |
note Block to Code Connection When you connect style blocks in EduBlocks, it creates code like this:
html
<h1 style="color: blue;">My Title</h1>
The blocks make it visual and easy!
:page_facing_up: Internal CSS - Page Styling
:information_source: Info What is Internal CSS? Internal CSS lets you create a style sheet for your entire webpage. It's like having a color palette that you can use for everything on your page!
In EduBlocks, you put style blocks in the head section to style multiple elements at once.
How Internal CSS Works
Internal CSS uses a special structure in your HTML:
Why Use Internal CSS?
- Style many elements at once - Change all headings with one style block!
- Keep styles organized - All your styles in one place
- Easier to manage - Change styles without hunting through your code
:bulb: Tip: Where Does It Go? Internal CSS always goes in the
<head>section of your HTML, inside a<style>tag. Think of it as the instruction manual at the beginning of your webpage!
:mag: See It In Action!
Here's how internal CSS looks in EduBlocks:
| Code |
|---|
 |
| Output |
 |
note Block to Code Connection Your style blocks in the head section create code like this:
html
<style>
h1 { color: red; }
p { color: blue; }
</style>
EduBlocks makes it visual and fun!
:emoji: Troubleshooting Tips
Having trouble with your CSS? Check these common issues:
-
Styles not showing?
- Make sure your style blocks are connected properly
- Check that inline styles are attached to the right element
- Internal styles should be in the
<head>section
-
Colors look wrong?
- Double-check your color names or codes
- Some colors need exact spelling (it's "gray" not "grey"!)
-
Nothing happens when you add styles?
- Save your project
- Refresh your preview window
- Make sure you're looking at the right element
:memo: Summary
You've learned how to make your websites beautiful with CSS! Here's what you discovered:
- CSS is the style language that makes websites colorful and attractive
- Inline CSS styles individual elements (like painting one thing)
- Internal CSS styles your whole page (like choosing a color scheme)
- EduBlocks makes CSS visual by turning style concepts into blocks
:emoji: Video Review
:runner::emoji:️ Practice Time!
Try these fun challenges:
- Color Challenge: Create a paragraph and make it your favorite color using inline CSS
- Style Mix: Use internal CSS to make all headings one color and all paragraphs another
- Creative Page: Design a colorful "About Me" page using both inline and internal CSS
- Experiment: Try different style properties like font-size, background-color, and text-align
:bulb: Tip: Next Steps In the next lesson, you'll learn about specific CSS properties to make your websites even more amazing! Keep practicing with different colors and styles.