Assignments Of Class 22: Introduction to HTML and CSS Integration
Assignment 1: Inline CSS for Styling a Paragraph
Task:
Create an HTML page that applies inline CSS to a paragraph. The paragraph should have a red text color, a blue background color, and a font size of 18px.
Solution:
html<!DOCTYPE html><html><head> <title>Inline CSS Example</title></head><body> <p style="color: red; background-color: blue; font-size: 18px;"> This is a paragraph styled using inline CSS. </p></body></html>Explanation:
1. The <p> tag is used to create the paragraph.
2. The style attribute inside the <p> tag contains CSS properties: color, background-color, and font-size.
3. Inline CSS applies styles directly to individual HTML elements.
Assignment 2: Internal CSS for Styling Headings and Paragraphs
Task:
Create an HTML page with an internal CSS that changes the font family of all headings (<h1>, <h2>) to "Arial" and sets the color of paragraphs (<p>) to green.
Solution:
html<!DOCTYPE html><html><head> <title>Internal CSS Example</title> <style> h1, h2 { font-family: Arial, sans-serif; } p { color: green; } </style></head><body> <h1>This is a Heading 1</h1> <h2>This is a Heading 2</h2> <p>This is a paragraph with green text.</p></body></html>Explanation:
1. The <style> tag is used inside the <head> section to define internal CSS.
2. The h1, h2 selector changes the font family of all <h1> and <h2> tags to Arial.
3. The p selector changes the color of all paragraphs to green.
Assignment 3: External CSS for Multiple Pages
Task:
Create an HTML page and a separate CSS file. The HTML page should link to the external CSS file to change the background color of the page and the text color of headings.
Solution:
HTML File (index.html):
html<!DOCTYPE html><html><head> <title>External CSS Example</title> <link rel="stylesheet" href="styles.css"></head><body> <h1>Welcome to My Website</h1> <p>This page uses external CSS for styling.</p></body></html>CSS File (styles.css):
cssbody { background-color: lightgrey;}h1 { color: darkblue;}Explanation:
1. The <link> tag in the HTML file links to the external CSS file.
2. The styles.css file changes the background color of the body and the text color of the <h1> heading.
Assignment 4: Using Class Selectors for Multiple Elements
Task:
Create an HTML page with multiple paragraphs, all styled with a CSS class that changes the font size to 16px and the background color to yellow.
Solution:
html<!DOCTYPE html><html><head> <title>Class Selector Example</title> <style> .highlight { font-size: 16px; background-color: yellow; } </style></head><body> <p class="highlight">This is the first paragraph with a highlighted background.</p> <p class="highlight">This is the second paragraph with the same style.</p></body></html>Explanation:
1. The CSS class .highlight is defined to style elements with a yellow background and 16px font size.
2. Both <p> tags use the class="highlight" attribute, applying the same styles to each paragraph.
Assignment 5: Using ID Selector for Styling an Element
Task:
Create an HTML page where you style a specific paragraph using the id selector to change the font color to purple and align the text to the center.
Solution:
html<!DOCTYPE html><html><head> <title>ID Selector Example</title> <style> #special-paragraph { color: purple; text-align: center; } </style></head><body> <p id="special-paragraph">This paragraph has a unique style applied using the ID selector.</p></body></html>Explanation:
1. The #special-paragraph ID selector targets the specific paragraph with the id="special-paragraph".
2. The CSS changes the color to purple and centers the text.
Assignment 6: Apply CSS Border and Padding
Task:
Create a webpage with a div element styled with a border of 2px solid black and padding of 20px.
Solution:
html<!DOCTYPE html><html><head> <title>Border and Padding Example</title> <style> .box { border: 2px solid black; padding: 20px; } </style></head><body> <div class="box"> This is a box with a border and padding. </div></body></html>Explanation:
1. The .box class is used to apply a 2px solid black border and 20px padding around the content inside the div.
Assignment 7: Apply CSS Margin and Text Alignment
Task:
Create a webpage with a heading and a paragraph. Apply a margin of 30px to the heading and center-align the text of the paragraph.
Solution:
html<!DOCTYPE html><html><head> <title>Margin and Text Alignment</title> <style> h1 { margin: 30px; } p { text-align: center; } </style></head><body> <h1>This is a heading with a margin.</h1> <p>This paragraph is centered.</p></body></html>Explanation:
1. The h1 element has a margin of 30px applied, which creates space around it.
2. The p element is center-aligned using text-align: center.
Assignment 8: CSS Hover Effect
Task:
Create a webpage with a button. Apply a hover effect using CSS that changes the background color of the button when the user hovers over it.
Solution:
html<!DOCTYPE html><html><head> <title>CSS Hover Effect</title> <style> button { padding: 10px 20px; background-color: blue; color: white; border: none; } button:hover { background-color: green; } </style></head><body> <button>Hover Over Me!</button></body></html>Explanation:
1. The button element has a default blue background and white text.
2. The button:hover selector changes the background color to green when the user hovers over the button.
Assignment 9: Responsive Web Design Using Media Queries
Task:
Create a webpage that changes the font size of the paragraph based on the screen width. Use media queries to make the font size 16px for screens smaller than 600px and 20px for larger screens.
Solution:
html<!DOCTYPE html><html><head> <title>Responsive Design</title> <style> p { font-size: 20px; } @media (max-width: 600px) { p { font-size: 16px; } } </style></head><body> <p>This is a responsive paragraph. The font size changes based on screen size.</p></body></html>Explanation:
1. The p tag has a default font size of 20px.
2. A media query checks if the screen width is smaller than 600px and adjusts the font size to 16px for smaller screens.
Assignment 10: Styling a Navigation Bar
Task:
Create a webpage with a navigation bar using a list of links. Style the navbar with a background color, change the link color to white, and underline the link when hovered over.
Solution:
html<!DOCTYPE html><html><head> <title>Navigation Bar</title> <style> ul { list-style-type: none; background-color: #333; padding: 10px; margin: 0; } li { display: inline; margin-right: 20px; } a { color: white; text-decoration: none; } a:hover { text-decoration: underline; } </style></head><body> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </body></html>Explanation:
1. The navigation bar is created using an unordered list (<ul>) and list items (<li>).
2. The links (<a>) are styled with white text and no underlines by default.
3. When hovered over, the links get underlined using the :hover selector.
These assignments cover a range of HTML and CSS concepts, including inline, internal, and external CSS, class and ID selectors, margins, paddings, and responsive design. Each solution is explained in detail to ensure clarity for beginners.