Wednesday, 19 February 2025

Assignments Of Class 5: Text Styling in CSS

 


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

Search This Blog

Powered by Blogger.