Embedded Files
Module 2
2.6 Typography
📖Typography in CSS: The Art of Styling Text
📖Typography in CSS: The Art of Styling Text
Typography is a key part of web design! It controls how text appears, making content readable, stylish, and engaging. Let’s break it down into the essential properties you need to master.
1️⃣ Common Text Properties
1️⃣ Common Text Properties
Text properties in CSS control how text looks on a webpage. You can:
✅ Change color 🎨
✅ Adjust size 🔤
✅ Set alignment 📏
✅ Add styles like bold, italic, or underline ✍️
🎨 How to Use Google Fonts in Your Project
🎨 How to Use Google Fonts in Your Project
🔹 Step 1: Choose a Font
🔹 Step 1: Choose a Font
Go to 👉 Google Fonts
Search for a font (e.g., Poppins).
Click the "Get Font" button (or select the style you want).
Copy the link or @import code Google provides.
🔹 Step 2: Add Google Fonts to Your Project
👉 Method 1: Using <link> in HTML (Recommended)
👉 Method 1: Using <link> in HTML (Recommended)
1. Copy the link from Google Fonts. Example:
2. Paste it inside the <head> of your HTML file.
3. Set the font in CSS like this:
📌 Why use <link>?
✔️ Faster loading ⏩
✔️ Works instantly 🎯
👉 Method 2: Using @import in CSS
👉 Method 2: Using @import in CSS
If you prefer to keep font imports in your CSS file:
Open your CSS file (e.g., style.css).
Add this at the top:
📌 Note: @import is slightly slower than <link>.
👉 Method 3: Using JavaScript (Dynamic Loading)
👉 Method 3: Using JavaScript (Dynamic Loading)
Want to load fonts using JavaScript? Try this:
📌 When to use this?
✔️ If you need to change fonts dynamically in your app.
🎯 Interactive Challenge:
🎯 Interactive Challenge:
Want to test it out? Copy this full example, save it as index.html, and open it in your browser:
👀 What to Do Next?
1️⃣ Try changing 'Poppins' to 'Roboto' or any other font.
2️⃣ Adjust the font-size, color, or font-weight.
3️⃣ Refresh and see the magic happen! ✨
📌 Best Practices
📌 Best Practices
✅ Use fewer fonts to keep your website fast.
✅ Always add a fallback font (e.g., sans-serif).
✅ Use display=swap to prevent font flickering.
Default HTML Hyperlink
Default HTML Hyperlink
By default, an <a> (anchor) tag looks blue and underlined:
But we can fully customize it using CSS! 🎨
🔹 Basic Hyperlink Styling
🔹 Now, your links will be red, bold, and without an underline.
🔹 Styling Link States
🔹 Styling Link States
Links have four different states in CSS:
🔹 Here’s how to style all four states:
📌 Tip: Always put :hover and :active after :link and :visited for best results.
🔹 Creating a Fancy Button-Like Link
🔹 Creating a Fancy Button-Like Link
Want your links to look like buttons? Try this! 🎨
📌 Usage in HTML:
🔹 Now, your link will look like a green button that changes on hover! 🚀
- 🛠 Interactive Code Example
Copy this full example into an index.html file and test it yourself!
👀 Try It Out:
Click the normal link and see what happens when you hover, click, and visit it.
Click the button-style link and watch how it changes on hover!
🎯 Summary
🎯 Summary
✅ Use color and text-decoration to style links.
✅ Customize hover, active, and visited states for a better user experience.
✅ Turn links into buttons using display: inline-block and background-color.
✅ Add smooth transitions for cool hover effects.
📌 Lists Style in CSS
📌 Lists Style in CSS
Lists (<ul>, <ol>, and <li>) are used everywhere—menus, to-do lists, and more! But the default styles are kinda boring, right? Let’s learn how to customize them with CSS and make them look awesome! 😎✨
🎯 Step 1: Understanding Lists in HTML
🎯 Step 1: Understanding Lists in HTML
✅ There are 3 types of lists:
✅ There are 3 types of lists:
✨ Basic HTML Example
📌 Looks plain... let's fix that with CSS!
🎯 Step 2: Changing List Styles
🎯 Step 2: Changing List Styles
We can change bullets or numbers using list-style-type.
✅ Unordered List (<ul>) Styles
✅ Unordered List (<ul>) Styles
✅ ONLY <p> directly inside <div> turns blue.
Other options:
✔️ circle
✔️ disc
✔️ none (removes bullets)
✅ Ordered List (<ol>) Styles
✅ Ordered List (<ol>) Styles
other options:
✔️ decimal-leading-zero (01, 02, 03)
✔️ lower-alpha (a, b, c)
🔹 Try changing these values and see what happens! 🎨
🎯 Step 3: Removing Bullets & Numbers
🎯 Step 3: Removing Bullets & Numbers
Want a clean list with no bullets or numbers?
📌 Great for navigation menus!
🎯 Step 4: Custom List Icons (Emojis or Images!)
🎯 Step 4: Custom List Icons (Emojis or Images!)
✅ Using Emojis (Easiest Way)
✅ Using Emojis (Easiest Way)
🔹 No CSS needed! 🎉
✅ Using Images for Custom Bullets
✅ Using Images for Custom Bullets
⚠️ Note: This method isn't very flexible. A better way? Use background-image! 👇
🎯 Step 5: Fancy Lists with Background Icons
🎯 Step 5: Fancy Lists with Background Icons
Want something more stylish? Use a background image!
✅ Better than list-style-image!
✅ Full control over size & position!
🎯 Step 6: Adding Cool Effects to List Items
🎯 Step 6: Adding Cool Effects to List Items
Want your list items to change color when hovered? Try this:
🔥 Now your lists are interactive!
For a better understanding, watch the video below:👇
🎯 Step 7: Full Interactive Example
🎯 Step 7: Full Interactive Example
🎨 Try this code! Copy & paste into an index.html file and open in a browser.
👀 What to Do Next?
✔️ Change list-style-type and test different styles!
✔️ Add hover effects or animations.
✔️ Replace the checkmark icon with your own!
🎯 Quick Recap
🎯 Quick Recap
✅ list-style-type changes bullet or number style.
✅ list-style: none; removes bullets/numbers (great for menus!).
✅ Use emojis or images as custom bullets.
✅ background-image gives better control over icons.
✅ Add hover effects for an interactive experience.
👏 Great Job!
Page updated
Google Sites
Report abuse