Assignments Of Class 5: Text Styling in CSS
Assignment 1: Change Text Color
Task:
Style the text of an <h1> element to be red.
Solution:
1. Create an HTML file with an <h1> element.
html
Copy code
<h1>Welcome to CSS Styling</h1>
2. Create a CSS file to change the color of the <h1> text.
css
Copy code
h1 {
color: red; /* Text color set to red */
}
3. Link the CSS file to your HTML:
html
Copy code
<link rel="stylesheet" href="styles.css">
Assignment 2: Change Font Family of Paragraph
Task:
Style the text of a <p> element using the font family Georgia.
Solution:
1. Create an HTML file with a <p> element.
html
Copy code
<p>This is a paragraph with a custom font.</p>
2. Create a CSS file to set the font family.
css
Copy code
p {
font-family: 'Georgia', serif; /* Sets font family to Georgia */
}
3. Link the CSS file to your HTML.
Assignment 3: Increase Font Size of Heading
Task:
Increase the font size of an <h2> element to 40px.
Solution:
1. Create an HTML file with an <h2> element.
html
Copy code
<h2>This is a large heading</h2>
2. Create a CSS file to change the font size.
css
Copy code
h2 {
font-size: 40px; /* Font size set to 40px */
}
3. Link the CSS file to your HTML.
Assignment 4: Align Text to Center
Task:
Align the text of a <h3> element to the center of the page.
Solution:
1. Create an HTML file with an <h3> element.
html
Copy code
<h3>This text should be centered.</h3>
2. Create a CSS file to center the text.
css
Copy code
h3 {
text-align: center; /* Aligns text to the center */
}
3. Link the CSS file to your HTML.
Assignment 5: Underline Text in a Span Element
Task:
Underline the text inside a <span> element.
Solution:
1. Create an HTML file with a <span> element.
html
Copy code
<span>Text with an underline.</span>
2. Create a CSS file to apply the text decoration.
css
Copy code
span {
text-decoration: underline; /* Underlines the text */
}
3. Link the CSS file to your HTML.
Assignment 6: Apply Multiple Text Styles
Task:
Style the <h1>, <p>, and <span> elements with different text styles (color, font family, font size, text alignment).
Solution:
1. Create an HTML file with <h1>, <p>, and <span> elements.
html
Copy code
<h1>Heading Text</h1>
<p>This is a paragraph with styled text.</p>
<span>This is a span element with a special style.</span>
2. Create a CSS file with the following styles:
css
Copy code
h1 {
color: blue;
font-family: 'Arial', sans-serif;
font-size: 32px;
text-align: center;
}
p {
color: green;
font-family: 'Times New Roman', serif;
font-size: 18px;
text-align: justify;
}
span {
color: red;
font-family: 'Courier New', monospace;
font-size: 20px;
text-decoration: underline;
}
3. Link the CSS file to your HTML.
Assignment 7: Add Strikethrough to Text
Task:
Add a line-through effect to the text of a paragraph.
Solution:
1. Create an HTML file with a <p> element.
html
Copy code
<p>This paragraph will have a strikethrough effect.</p>
2. Create a CSS file to apply the text decoration.
css
Copy code
p {
text-decoration: line-through; /* Adds a strikethrough effect */
}
3. Link the CSS file to your HTML.
Assignment 8: Customize Text Styles for Different Screen Sizes
Task:
Create a responsive design that changes the font size of a <p> element based on the screen width.
Solution:
1. Create an HTML file with a <p> element.
html
Copy code
<p>This text will have different sizes depending on the screen width.</p>
2. Create a CSS file with media queries to adjust font size.
css
Copy code
p {
font-size: 16px; /* Default font size */
}
@media (max-width: 768px) {
p {
font-size: 14px; /* Smaller font size for smaller screens */
}
}
@media (max-width: 480px) {
p {
font-size: 12px; /* Even smaller font size for mobile screens */
}
}
3. Link the CSS file to your HTML.
Assignment 9: Style a Heading with a Custom Font
Task:
Style an <h1> element with a Google font, such as Roboto.
Solution:
1. Create an HTML file with an <h1> element.
html
Copy code
<h1>This is a heading with a custom font</h1>
2. Include the Google Fonts link in your HTML <head> section to load the Roboto font.
html
Copy code
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
3. Create a CSS file to apply the Roboto font to the <h1> element.
css
Copy code
h1 {
font-family: 'Roboto', sans-serif; /* Applies the custom font */
}
4. Link the CSS file to your HTML.
Assignment 10: Style a Blockquote Element
Task:
Style a <blockquote> element to have italicized text, with a larger font size and a different color.
Solution:
1. Create an HTML file with a <blockquote> element.
html
Copy code
<blockquote>This is a quote styled using CSS.</blockquote>
2. Create a CSS file to style the <blockquote>.
css
Copy code
blockquote {
font-style: italic; /* Italicizes the text */
font-size: 24px; /* Increases font size */
color: #333; /* Sets text color to dark gray */
}
3. Link the CSS file to your HTML.
No comments:
Post a Comment