Module 19: Introduction to CSS
This module provides a comprehensive introduction to CSS (Cascading Style Sheets) and explores how to style HTML elements effectively. You’ll learn how to use external, inline, and internal CSS, understand the basic syntax, and apply styles with practical examples and exercises.
🎀
1. Overview of CSS
CSS is used to control the layout and appearance of a webpage. It separates content (HTML) from presentation, making websites easier to maintain and more visually appealing.
2. Linking External Stylesheets
Method: Linking External Stylesheets
External stylesheets allow you to apply CSS rules to multiple HTML files from a single file.
Create a CSS File
Create a new file with a .css extension (e.g., styles.css).
Link the CSS File to HTML
Use the <link> tag in the <head> section of your HTML file:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Write CSS Rules
Add CSS rules in the styles.css file. For example:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
h1 {
color: #0056b3;
}
Practical Exercise
Create an HTML file with headings, paragraphs, and a list.
Link an external stylesheet and style the elements (e.g., change background color, font, and text color).
3. Inline CSS
Method: Applying Inline CSS
Inline CSS is used to apply styles directly to an HTML element using the style attribute.
Syntax
<element style="property: value;">
Example:
<p style="color: red; font-size: 18px;">This is a red paragraph.</p>
Advantages and Disadvantages
Advantage: Quick and specific styling.
Disadvantage: Difficult to manage for larger projects.
Practical Exercise
Add inline styles to an HTML document:
Change the color of a heading.
Set the font size of a paragraph.
Add a border to an image.
4. Internal CSS
Method: Adding Internal CSS
Internal CSS applies styles to a single HTML file and is written within a <style> tag inside the <head> section.
Syntax
<head>
<style>
selector {
property: value;
}
</style>
</head>
Example
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
</style>
</head>
When to Use Internal CSS
Use it when styles are specific to a single webpage.
Practical Exercise
Create an HTML document with an internal CSS block.
Style:
Background color of the body.
Font color and size of headings.
Add padding and margins to paragraphs.
5. Basic CSS Syntax
Structure of a CSS Rule
A CSS rule consists of:
Selector: Identifies the HTML element(s) to style.
Declaration Block: Contains one or more declarations enclosed in curly braces {}.
Example:
selector {
property: value;
property: value;
}
Explanation:
Selector: Targets the HTML element (e.g., h1).
Property: The aspect to style (e.g., color).
Value: The style to apply (e.g., blue).
Example
p {
color: green;
font-size: 16px;
text-align: center;
}
Practical Exercise
Write CSS rules for the following:
Set the text color of all headings to blue.
Center-align all paragraphs.
Add a background color to the <body>.
6. Combining All Methods: Practical Project
Project: Styling a Webpage
Objective
Create a styled webpage using all three CSS methods.
Instructions
Create an HTML file with the following elements:
A heading (<h1>).
A paragraph (<p>).
A list (<ul> or <ol>).
An image.
Apply styles:
Use an external stylesheet to style the body background, fonts, and headings.
Use inline CSS to style one specific element (e.g., make one paragraph red).
Use internal CSS for the navigation bar or list.
Expected Outcome
A visually appealing webpage styled using multiple CSS methods.
7. Conclusion and Best Practices
Best Practices
🎁
Prefer external stylesheets for maintainability.
Use inline CSS sparingly for specific, one-off styles.
Internal CSS is best for single-page projects or temporary testing.
Key Takeaways
External stylesheets keep styles organized and reusable.
Inline CSS is useful for quick fixes.
Internal CSS allows customization for single pages.
This module equips learners with foundational CSS skills and hands-on experience in styling webpages. By the end of the module, students will be confident in using CSS to enhance the visual appeal of their projects.
No comments:
Post a Comment