Concept 3: Introduction to CSS
Introduction to CSS
:dart: Learning Objectives
By the end of this lesson, you will:
- Understand what CSS is and why we use it
- Learn three different ways to add CSS to HTML
- Practice writing CSS code for styling web pages
- Discover how to use fonts to make text look great
:art: What is CSS?
:information_source: CSS (Cascading Style Sheet) is a style sheet language that contains all the information about how your website looks. Think of it as the paintbrush that colors and decorates your HTML content!
- HTML creates the content of your web page (like text and images)
- CSS creates the style and design (like colors, sizes, and positions)
- CSS tells the browser how HTML elements should look on the screen
Web page without CSS and with CSS
Purpose of CSS
:memo: Three Ways to Add CSS
You can add CSS to your HTML in three different ways:
- Inline CSS - Add styles directly to one HTML element using the "style" attribute
- Internal CSS - Add styles inside a
<style>tag in the<head>section - External CSS - Create a separate CSS file and link it to your HTML
1️⃣ Inline CSS
Inline CSS is perfect when you want to style just one element on your page.
:bulb: Tip Use inline CSS when you need to quickly style a single element. Add the "style" attribute directly to your HTML tag!
How it works:
html
<h1 style={{'color':'red'}}>Hello, world!</h1>
<h1>Welcome to my web page!</h1>
What you see:
html
<!-- Browser renders: -->
<h1 style={{'color':'red'}}>Hello, world!</h1> <!-- This text appears in red -->
<h1>Welcome to my web page!</h1> <!-- This text appears in default color -->
2️⃣ Internal CSS
Internal CSS is great when you want to style multiple elements on one page.
:memo: Note With internal CSS, you write all your styles in one place inside the
<style>tag. This makes it easier to manage styles for your whole page!
Benefits of Internal CSS:
- Style many elements at once
- Keep all styles organized in one place
- Perfect for single-page projects
How it works:
html
<head>
<style>
h1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<h1>Welcome to my web page!</h1>
</body>
What you see:
html
<!-- Browser renders both h1 elements with red color and center alignment -->
<h1 style={{'textAlign': 'center', 'color': 'red'}}>Hello, world!</h1>
<h1 style={{'textAlign': 'center', 'color': 'red'}}>Welcome to my web page!</h1>
3️⃣ External CSS
External CSS is the best choice for big websites with many pages!
:information_source: Info With external CSS, you save all your styles in a separate
.cssfile. This file can style multiple HTML pages at once. Change one CSS file, and your entire website updates!
Benefits of External CSS:
- Style many web pages with one CSS file
- Keep HTML files clean and simple
- Easy to update the look of your entire website
- Professional way to organize code
How to link CSS to HTML:
html
<link rel="stylesheet" href="____.css">
Add this line in the <head> section of your HTML file.
Possible output of CSS file linking
Example: Let's create an external CSS file called hello.css
CSS Input (hello.css):
css
h1 {
text-align: center;
color: red;
}
HTML Input:
html
<head>
<link rel="stylesheet" href="hello.css">
</head>
<body>
<h1>Hello, world!</h1>
<h1>Welcome to my web page!</h1>
</body>
What you see:
html
<!-- Browser renders both h1 elements with styles from hello.css -->
<h1 style={{'textAlign': 'center', 'color': 'red'}}>Hello, world!</h1>
<h1 style={{'textAlign': 'center', 'color': 'red'}}>Welcome to my web page!</h1>
:emoji: CSS Styling Comparison
All three CSS methods create the same result! Let's compare them:
Inline CSS Example:
html
<h1 style={{'textAlign': 'center', 'color': 'red'}}>Hello, world!</h1>
<h1 style={{'textAlign': 'center', 'color': 'red'}}>Welcome to my web page!</h1>
Internal CSS Example:
html
<head>
<style>
h1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<h1>Welcome to my web page!</h1>
</body>
External CSS Example:
CSS file (styles.css):
css
h1 {
text-align: center;
color: red;
}
HTML file:
html
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, world!</h1>
<h1>Welcome to my web page!</h1>
</body>
All three methods produce the same visual output:
html
<!-- Final rendered result: -->
<h1 style={{'textAlign': 'center', 'color': 'red'}}>Hello, world!</h1>
<h1 style={{'textAlign': 'center', 'color': 'red'}}>Welcome to my web page!</h1>
:bulb: Tip Which method should you use?
- Inline CSS: Quick styling for one element
- Internal CSS: Styling for one page
- External CSS: Best for multiple pages (recommended!)
:emoji: Video Tutorial
Watch this video to see CSS in action:
:emoji: Advanced Typography with CSS Fonts
What is a font?
:information_source: Info A font is the design for a set of characters. It's like choosing different handwriting styles for your text!
Font Family in CSS
The font-family property lets you choose which font to use for your text.
Two types of font families:
- Generic family - A group of fonts that look similar
- Font family - A specific font with its own name
:bar_chart: Font Family Types
| Generic Family | Example Fonts | Description |
|---|---|---|
| Serif | Times New Roman, Georgia, Garamond | Fonts with small lines at the ends of letters (like newspaper text) |
| Sans-serif | Arial, Verdana, Trebuchet MS | Clean fonts without lines at the ends ("sans" means "without") |
| Monospace | Courier New | All letters have the same width (like typewriter text) |
| Cursive | Comic Sans MS | Fonts that look like handwriting |
| Fantasy | Impact | Fun, decorative fonts for special effects |
Difference between Serif and Sans-serif Fonts
Serif fonts have small lines at the ends of characters, while Sans-serif fonts do not.
Font Syntax and Fallback System
CSS uses a smart fallback system for fonts:
:memo: Note The Fallback System: List multiple fonts separated by commas. If the browser can't find the first font, it tries the next one. Always end with a generic family as a backup!
Important rules:
- Start with your preferred font
- List backup fonts next
- Always end with a generic family
- Use quotes for font names with spaces
:computer: Font Example
html
<!DOCTYPE html>
<html>
<head>
<style>
.a {
font-family: "Times New Roman", Times, serif;
}
.b {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>The Font-family Property</h1>
<p class="a">This paragraph is shown in Times New Roman font.</p>
<p class="b">This paragraph is shown in Arial font.</p>
</body>
</html>
Output showing different font families
:books: Summary
You've learned three powerful ways to add CSS to your HTML:
- Inline CSS - Quick styling for single elements
- Internal CSS - Organized styling for one page
- External CSS - Professional styling for multiple pages
Plus, you discovered how fonts work in CSS and how to create beautiful text with different font families!
:emoji: AI Prompts
Code with AI: AI can also help with CSS. Experiment with these:
Basic CSS Prompts:
css
"CSS to make text red and bold."
"CSS to center an image on a webpage."
"CSS to create a blue button with white text."
"CSS to style a paragraph with a specific font and font size."
AI Typography Prompts
Font Implementation & Styling:
- "Generate CSS for using Google Fonts in a webpage"
- "Create CSS that demonstrates different font families and weights"
- "Write code for responsive typography that scales across devices"
- "Generate CSS for custom font fallbacks and web-safe fonts"
- "Create code showing different font properties like size, weight, and style"
Typography Strategy:
- "What are the best Google Fonts combinations for modern websites?"
- "How do I choose appropriate fonts for different types of content?"
- "What are the best practices for web typography and readability?"
- "Help me create a typography hierarchy for my website"
- "What fonts work best for different brand personalities and industries?"
Font Concepts & Best Practices:
- "Explain the difference between serif, sans-serif, and monospace fonts"
- "What are web-safe fonts and why are they important?"
- "Quiz me on CSS font properties and their effects"
- "How do web fonts work and what are the performance considerations?"
- "What are the accessibility guidelines for web typography?"
Font Troubleshooting:
- "Why aren't my Google Fonts loading correctly?"
- "Help me fix font rendering inconsistencies across browsers"
- "My custom fonts are slow to load - how can I optimize them?"
- "Why do my fonts look different on mobile vs desktop?"
- "How do I troubleshoot font display and fallback issues?"
Advanced Typography Techniques:
- "What are some creative ways to use typography in web design?"
- "How can I create engaging text effects with CSS?"
- "Give me ideas for modern typography trends and techniques"
- "How do I implement variable fonts for dynamic typography?"
- "What are some unique font pairing ideas for creative projects?"
:dart: Practice Time!
Try these fun CSS challenges:
-
Color Challenge: Create an HTML page with three paragraphs. Style each one with a different color using inline CSS.
-
Font Fun: Use internal CSS to create a page with:
- A heading in Arial font
- A paragraph in Times New Roman
- Another paragraph in Comic Sans MS
-
External Excellence: Create a separate CSS file that:
- Makes all headings blue and centered
- Makes all paragraphs green with larger text
- Link it to an HTML page with multiple headings and paragraphs