Module 2: CSS (Cascading Style Sheets)
Goal: By the end of this module, you will understand how to use CSS to style web pages effectively. You will learn different types of CSS, how to apply styles, and various essential CSS properties.
1. Introduction to CSS (10 mins)
What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to design and style HTML pages. It controls layout, colors, fonts, spacing, and responsiveness of elements on a webpage.
Why Use CSS?
✅ Separation of Concerns: Keeps design separate from content (HTML).
✅ Improves Design: Enhances website appearance.
✅ Reusability: A single CSS file can be applied to multiple pages.
✅ Responsive Design: Makes web pages adaptable to different screen sizes.
2. Ways to Apply CSS (10 mins)
1️⃣ Inline CSS (Directly Inside HTML Elements)
CSS styles are added inside the HTML element using the style attribute.
Example:
✅ Quick styling for individual elements
❌ Not reusable and harder to manage for larger projects
2️⃣ Internal CSS (Inside <style> in the HTML <head> Section)
Internal CSS applies styles to the entire document from within the <head> section.
Example:
✅ Good for styling a single page
❌ Not reusable across multiple pages
3️⃣ External CSS (Best Practice - Using a Separate .css File)
External CSS is stored in a separate file (styles.css) and linked to the HTML file.
Example:
CSS File (styles.css):
HTML File (index.html):
✅ Best for large projects, keeps styles organized
❌ Requires an extra file
3. CSS Selectors (15 mins)
1️⃣ Element Selector
Targets all occurrences of a specific HTML element.
Example:
🔹 All <h1> elements will be red
🔹 All <p> elements will have a font size of 18px
2️⃣ Class Selector (.)
Used to style multiple elements with the same class name.
Example:
🔹 Use: Add class="highlight" to elements to get the styles
3️⃣ ID Selector (#)
Used for unique elements.
Example:
🔹 Use: Add id="header" to a unique element
4️⃣ Grouping Selector (,)
Applies the same styles to multiple elements.
Example:
🔹 Both <h1> and <p> will be centered if it used in the html page
5️⃣ Descendant Selector (element element)
Targets elements inside another element (Nested elements)
Example:
🔹 content inside p tag will be purple in color
4. Essential CSS Properties (15 mins)
1️⃣ Colors & Backgrounds
🔹 color: Changes text color
🔹 background-color: Changes background color
2️⃣ Fonts & Text Styling
🔹 font-size: Adjusts text size
🔹 font-family: Changes font
🔹 text-align: Aligns text (left, center, right)
3️⃣ Borders & Spacing
🔹 border: Defines thickness, style, and color
🔹 padding: Space inside an element
🔹 margin: Space outside an element
5. Responsive Design (10 mins)
CSS can make web pages responsive using media queries.
Example:
🔹 Changes background color when screen width is 600px or smaller
Final Activity: Build a Styled Web Page
💡 Task: Create a styled web page using headings, paragraphs, lists, and buttons.
Example (styles.css):
HTML (index.html):
Summary
✅ CSS applies styles to HTML elements
✅ There are 3 ways to apply CSS: Inline, Internal, External
✅ Selectors target elements to apply styles
✅ Media Queries help make pages responsive
.svg)
