CSS lab designed to demonstrate inline, internal, and external styles. Each task focuses on teaching students how to apply CSS using these three methods.
CSS Lab: Inline, Internal, and External Styles
Objective: Learn how to apply CSS in three different ways: inline styles, internal styles, and external styles.
Lab 1: Inline Styles
Objective: Teach students how to apply CSS directly to individual HTML elements using the style attribute.
Tasks:
-
Basic Inline CSS:
- In an HTML document, apply inline CSS to change the text color and font size of a paragraph.
- Example:
<!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>Inline CSS Example</h1> <p style="color: blue; font-size: 20px;">This paragraph uses inline CSS for styling.</p> </body> </html>
-
Experiment with Different Styles:
- Add more inline styles to other elements (e.g.,
background-color,border, etc.). - Example:
<div style="background-color: lightgray; padding: 10px;"> <p style="font-weight: bold;">This is a div with a background color and padded text.</p> </div>
- Add more inline styles to other elements (e.g.,
Lab 2: Internal Styles
Objective: Teach students how to apply CSS styles within the <style> tag in the HTML document's <head> section.
Tasks:
-
Basic Internal CSS:
- Apply internal CSS to style the same elements from the inline example, but this time using a
<style>block inside the<head>. - Example:
<!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> p { color: green; font-size: 18px; } div { background-color: lightblue; padding: 15px; } </style> </head> <body> <h1>Internal CSS Example</h1> <div> <p>This paragraph is styled with internal CSS.</p> </div> </body> </html>
- Apply internal CSS to style the same elements from the inline example, but this time using a
-
Experiment with More Styles:
- Add more styles (e.g.,
border-radius,margin,text-align) to the internal style block and apply them to other elements. - Example:
<style> h1 { color: purple; text-align: center; } </style>
- Add more styles (e.g.,
Lab 3: External Styles
Objective: Demonstrate how to link an external CSS file to an HTML document.
Tasks:
-
Creating an External CSS File:
- Create a new file named
styles.cssand add the following CSS code to it:p { color: red; font-size: 22px; } div { background-color: yellow; padding: 20px; }
- Create a new file named
-
Linking the External CSS File to HTML:
- In the HTML document, link the external CSS file in the
<head>section using the<link>tag:<!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="styles.css"> </head> <body> <h1>External CSS Example</h1> <div> <p>This paragraph is styled with an external CSS file.</p> </div> </body> </html>
- In the HTML document, link the external CSS file in the
-
Experiment with More Styles in the External File:
- Add more styles (e.g., font styles, background colors, borders) in the
styles.cssfile to style additional elements. - Example:
h1 { color: darkblue; text-align: center; }
- Add more styles (e.g., font styles, background colors, borders) in the
Conclusion:
By the end of this lab, students will have gained hands-on experience with:
- Inline CSS: Directly styling individual HTML elements.
- Internal CSS: Using a
<style>block within the HTML document. - External CSS: Linking a separate CSS file to an HTML document for global styles.
These methods of styling provide flexibility and can be used depending on the project's complexity and scale.
No comments:
Post a Comment