Blog

Using CSS In HTML CLASS 7 WORKBOOK

Q2 .Observe the following CSS codes to answer the given questions.

I. Which type of selector is used in each of the given CSS codes?

ii.   Which CSS code is used to apply a style to only a single and unique element in an HTML file?

iii. Which code uses class names to find HTML elements for applying styles?

b. What is the primary purpose of CSS in web development? How does it facilitate the styling of HTML pages?

c.Reena has created a website containing more than ten web pages.She needs to use CSS for styling the web pages.Which type of style sheet will be most appropriate for her and why ?

d.Write the HTML code using the internal stylesheet to display the text in different cases as shown.

                          MY NAME IS ROHAN

                          my name is rohan

                          My Name is Rohan

Answers:

Q2. (i) Which type of selector is used in each of the given CSS codes?

  • CSSCODE1 (#paral): It uses an ID selector, which is identified by the # symbol and applies styles to a single, unique element.
  • CSSCODE2 (.center): It uses a class selector, identified by the . symbol, which can be applied to multiple elements.

(ii) Which CSS code is used to apply a style to only a single and unique element in an HTML file?

  • CSSCODE1 (#paral) is used for styling a single and unique element because it uses an ID selector.

(iii) Which code uses class names to find HTML elements for applying styles?

  • CSSCODE2 (.center) uses a class selector, which targets elements that have the class name center.

b. What is the primary purpose of CSS in web development? How does it facilitate the styling of HTML pages?

The primary purpose of CSS (Cascading Style Sheets) in web development is to control the appearance and layout of web pages. CSS facilitates styling by:

  • Separating content (HTML) from design (CSS), making code more organized.
  • Allowing designers to apply consistent styles across multiple pages.
  • Providing flexibility in styling, such as fonts, colors, margins, and positioning.
  • Improving page loading speed by reducing repetitive styling code.

c. Which type of style sheet will be most appropriate for Reena and why?

  • Reena should use an external stylesheet.
    Reason:
    • An external stylesheet allows her to define the styles in a separate file (e.g., styles.css) and link it to all the web pages.
    • This ensures consistency across all pages and simplifies maintenance. Any updates to the stylesheet automatically apply to all linked pages.

d. Write the HTML code using the internal stylesheet to display the text in different cases as shown.

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>Text Transform</title>

    <style>

        .uppercase {

            text-transform: uppercase;

        }

        .lowercase {

            text-transform: lowercase;

        }

        .capitalize {

            text-transform: capitalize;

        }

    </style>

</head>

<body>

    <p class=”uppercase”>MY NAME IS ROHAN</p>

    <p class=”lowercase”>my name is rohan</p>

    <p class=”capitalize”>My Name is Rohan</p>

</body>

</html>

This code uses the text-transform property in CSS to achieve the required text transformations:

  • uppercase: Converts all text to uppercase letters.
  • lowercase: Converts all text to lowercase letters.
  • capitalize: Capitalizes the first letter of each word.

Leave a Reply