Module 2 : Setting Up a CSS Environment – How to Include CSS in HTML (Inline, Internal, External)
CSS (Cascading Style Sheets) is essential for styling web pages. There are three primary ways to include CSS in HTML: Inline CSS, Internal CSS, and External CSS. Each method has its own use cases, advantages, and disadvantages.
1. Inline CSS
Inline CSS applies styles directly to a specific HTML element using the style attribute. It is useful for quick modifications but is not recommended for large projects due to maintenance difficulties.
Syntax & Example
html code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Inline CSS Example</title> </head> <body> <h1 style="color: blue; font-size: 24px; text-align: center;">This is a Heading</h1> <p style="color: red; font-size: 18px;">This paragraph is styled using Inline CSS.</p> </body> </html>
Explanation
The style attribute is used within the HTML tag (e.g., <h1> and <p>).
Each property-value pair (e.g., color: blue;) is separated by a semicolon (;).
Changes apply only to the specific element where the style attribute is used.
Advantages of Inline CSS
✅ Quick styling without needing external files.
✅ Useful for debugging and testing small changes.
Disadvantages of Inline CSS
❌ Hard to maintain in large projects.
❌ Styles are not reusable, leading to redundant code.
❌ Harder to separate content from design.
Practical Exercise:
Create an HTML file (inline.html).
Add a heading and a paragraph.
Use inline CSS to change their colors, font sizes, and alignment.
Open the file in a browser and observe the changes.
2. Internal CSS
Internal CSS is written inside a <style> tag within the <head> section of an HTML document. It applies styles to the entire webpage but is limited to that page only.
Syntax & Example
html code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Internal CSS Example</title> <style> body { background-color: lightgray; font-family: Arial, sans-serif; } h1 { color: green; text-align: center; } p { color: navy; font-size: 18px; } </style> </head> <body> <h1>Welcome to Internal CSS Example</h1> <p>This paragraph is styled using Internal CSS.</p> </body> </html>
Explanation
The <style> tag contains all CSS rules within the <head> section.
Each CSS rule consists of a selector (h1, p, etc.), followed by properties enclosed in {}.
Styles apply to all elements of the same type within the HTML file.
Advantages of Internal CSS
✅ Styles apply to the entire page without affecting other pages.
✅ Easier to maintain than inline CSS.
✅ Useful for single-page applications.
Disadvantages of Internal CSS
❌ Not reusable across multiple web pages.
❌ Can make the HTML file longer and harder to read.
Practical Exercise:
Create an HTML file (internal.html).
Add a <style> block in the <head>.
Define styles for different elements (background, headings, paragraphs).
Save and open the file in a browser.
3. External CSS
External CSS is written in a separate .css file and linked to an HTML document using the <link> tag. This is the best approach for large projects as it separates content from design.
Syntax & Example
Step 1: Create an External CSS File (style.css)
css code
body { background-color: lightblue; font-family: 'Arial', sans-serif; } h1 { color: darkred; text-align: center; font-size: 28px; } p { color: black; font-size: 18px; }
Step 2: Link the CSS File in an HTML File (external.html)
html code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>External CSS Example</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Welcome to External CSS Example</h1> <p>This paragraph is styled using External CSS.</p> </body> </html>
Explanation
The <link> tag inside <head> connects the HTML document to style.css.
rel="stylesheet" specifies that the file is a CSS stylesheet.
href="style.css" provides the file path of the CSS file.
The CSS file contains styling for multiple HTML elements.
Advantages of External CSS
✅ Easy to maintain and modify across multiple pages.
✅ Keeps HTML files clean and structured.
✅ Allows faster page loading due to browser caching.
Disadvantages of External CSS
❌ Requires an extra HTTP request to load the CSS file.
❌ External CSS won't apply if the file is missing or incorrectly linked.
Practical Exercise:
Create a CSS file (style.css) and define styles.
Create an HTML file (external.html) and link the CSS file using <link>.
Open the file in a browser and check if styles are applied.
.jpg)
Comparison Table: Inline vs. Internal vs. External CSS
Method
Location
Scope
Reusability
Best Use Case
Inline CSS
Inside an element’s style attribute
Affects only that element
Not reusable
Quick styling fixes
Internal CSS
Inside the <style> tag in <head>
Affects the entire HTML file
Limited to one page
Single-page designs
External CSS
In a separate .css file
Affects multiple HTML files
Fully reusable
Large and multi-page projects
Final Practical Challenge
Create a small project that demonstrates all three types of CSS:
Use Inline CSS for a specific button.
Use Internal CSS to style the body, headings, and paragraphs.
Use External CSS for a navigation menu.
Example Structure
index.html (contains inline and internal CSS)
styles.css (external CSS for styling navigation)
This will help you understand when to use each CSS method effectively.
No comments:
Post a Comment