Assignments Of Class 1: Introduction to CSS
Assignment 1: Inline CSS - Text Color Change
Task:
Create an HTML page with a heading and a paragraph. Use inline CSS to change the color of the heading text to blue and the paragraph text to red.
Solution:
1. Create HTML Page Structure: Open any text editor (e.g., Notepad) and write the following code:
html
Copy 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;">Hello, World!</h1>
<p style="color: red;">This is a sample paragraph styled with inline CSS.</p>
</body>
</html>
2. Explanation:
o The <h1> tag has inline CSS that changes its text color to blue.
o The <p> tag has inline CSS that changes its text color to red.
Assignment 2: Inline CSS - Font Size and Background Color
Task:
Create a webpage where the font size of the heading is 40px and the background color of the paragraph is lightgray.
Solution:
1. HTML Structure:
html
Copy 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="font-size: 40px;">Welcome to CSS!</h1>
<p style="background-color: lightgray;">This paragraph has a light gray background.</p>
</body>
</html>
2. Explanation:
o The <h1> element's font size is set to 40px.
o The <p> element's background color is set to lightgray.
Assignment 3: Inline CSS - Multiple Styles
Task:
Apply multiple inline CSS styles to a heading (e.g., change color, text-align, and font-size).
Solution:
1. HTML Structure:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Styles Example</title>
</head>
<body>
<h1 style="color: purple; text-align: center; font-size: 35px;">Learn CSS with Inline Styling</h1>
</body>
</html>
2. Explanation:
o The <h1> tag has three inline styles: text color is purple, text alignment is center, and font size is 35px.
Assignment 4: Internal CSS - Styling Paragraph
Task:
Create an HTML page that uses internal CSS to set the font style of a paragraph to italic and its color to green.
Solution:
1. HTML Structure:
html
Copy 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>
p {
color: green;
font-style: italic;
}
</style>
</head>
<body>
<p>This paragraph is styled with internal CSS.</p>
</body>
</html>
2. Explanation:
o The internal CSS is defined inside the <style> tag in the <head> section.
o The paragraph’s text is styled to be italic and green.
Assignment 5: External CSS - Styling Page
Task:
Create an HTML page that links to an external CSS file to change the background color of the body to lightblue.
Solution:
1. Create an External CSS File (styles.css):
css
Copy code
body {
background-color: lightblue;
}
2. Create the HTML Page:
html
Copy 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="styles.css">
</head>
<body>
<h1>Welcome to the External CSS Example</h1>
</body>
</html>
3. Explanation:
o The CSS file is linked in the <head> section using the <link> tag.
o The external CSS changes the background color of the body to lightblue.
Assignment 6: Inline CSS - Border Styling
Task:
Create an HTML page and add a border to a paragraph using inline CSS.
Solution:
1. HTML Structure:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Styling Example</title>
</head>
<body>
<p style="border: 2px solid black; padding: 10px;">This paragraph has a border around it.</p>
</body>
</html>
2. Explanation:
o The paragraph has a black border with a thickness of 2px, and padding is added to create space around the text.
Assignment 7: Internal CSS - Styling Lists
Task:
Use internal CSS to style an unordered list. Change the list bullet to a square and set the font size to 18px.
Solution:
1. HTML Structure:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Styling Example</title>
<style>
ul {
list-style-type: square;
font-size: 18px;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
2. Explanation:
o The ul tag has been styled with list-style-type: square; to change the bullet style.
o The font size of the list items is set to 18px.
Assignment 8: Inline CSS - Box Shadow
Task:
Create an HTML page with a heading and a paragraph. Add a shadow effect to the heading using inline CSS.
Solution:
1. HTML Structure:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Effect Example</title>
</head>
<body>
<h1 style="text-shadow: 2px 2px 4px #000000;">Text with Shadow Effect</h1>
<p>This is a simple paragraph with no shadow effect.</p>
</body>
</html>
2. Explanation:
o The text-shadow property adds a shadow to the text of the heading.
o The shadow is 2px horizontally, 2px vertically, and has a blur of 4px, with a black color.
Assignment 9: Internal CSS - Link Styling
Task:
Create an HTML page with a link and use internal CSS to change the link color when it is hovered.
Solution:
1. HTML Structure:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Hover Example</title>
<style>
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
2. Explanation:
o The a:hover selector is used to style the link when it is hovered over.
o The color of the link changes to red on hover.
Assignment 10: External CSS - Centering Content
Task:
Use external CSS to center-align a heading and a paragraph both horizontally and vertically.
Solution:
1. Create an External CSS File (styles.css):
css
Copy code
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
h1 {
color: purple;
}
p {
color: green;
}
2. Create the HTML Page:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Content</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Centered Heading</h1>
<p>This content is centered horizontally and vertically.</p>
</body>
</html>
3. Explanation:
o The external CSS uses Flexbox to center the content both horizontally (justify-content: center) and vertically (align-items: center).
o The page content is displayed in the center of the browser window.
No comments:
Post a Comment