CSS BASICS Class 7

CSS BASICS Class 7 

A. Tick  the correct option.

1. Which style sheet uses style as an element?

• a. Internal

2. The <style> is used inside which element?

   • b. <head>

3. Find the odd one out.

   • a. Font-face (Note: font-size, font-family, and font-weight are standard CSS text styling properties, whereas @font-face is an at-rule used to load custom web fonts).

4. Which of these properties changes the case of the text in CSS?

   • d. Text-transform

5. What are the different ways to specify colour in CSS?

• d. All of these (Colors can be specified using color names, hexadecimal codes, and RGB values).

B. Fill in the blanks.

1. You use <style> element in embedded style sheet to define properties.

2. The xx-large, small and medium values can be given to font-size property.

3. Another name for elements in CSS is selectors.

4. To display a text in lowercase, text-transform property is used.

5. font-weight property displays the text as bolder.

C. State True or False.

1. CSS helps a webpage to look more attractive.

   • True

2. Internal CSS helps to use the style attribute of an HTML document.

   • False (Internal CSS uses the <style> element inside the <head> section, whereas the style attribute is used for inline CSS).

3. The font-style allows to make the text bolder.

• False (The font-weight property is used to make text bolder, while font-style is typically used for italic text).

4. Text-alignment property allows you to decorate the text.

   • False (text-align specifies the horizontal alignment of text, while text-decoration is used to decorate the text like underlines).

5. You need to specify the background image with the help of URL of the image.

• True (Using background-image: url(...)).

D. Rewrite the following codes correctly.

1. Original: <p style: "font-size: 40; border-type: dashed"> Hello Friends </p>

ANS1. <p style="font-size: 40px; border-style: dashed;"> Hello Friends </p>

2. Original: <h1 style="text-decoration: line through; text-decoration: uppercase">

ANS2. <h1 style="text-decoration: line-through; text-transform: uppercase;">

3. Original: <p style="font-type: arial; text-decoration; underline">

ANS3. <p style="font-family: arial; text-decoration: underline;">

4. <head> <style> P[ background-color: pink: font-style: uppercase] </head>

ANS4. <head> <style> p { background-color: pink; text-transform: uppercase; } </style> </head>

E. Answer the following questions.

1. Define CSS.

   • CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation, layout, and styling (such as colors, fonts, and spacing) of a webpage written in HTML.

2. Differentiate between CSS and HTML.

   • HTML (HyperText Markup Language): Used to create the structure and content of a webpage (e.g., headings, paragraphs, images).

   • CSS (Cascading Style Sheets): Used to design and style that structure (e.g., changing colors, font styles, and background design).

3. What are the different types of style sheets used in CSS?

   • The three types of style sheets are:

     • Inline Style Sheet (using the style attribute on individual elements)

     • Internal / Embedded Style Sheet (using the <style> element in the <head> section)

     • External Style Sheet (using a separate .css file linked via the <link> tag)

4. Write the code to change the text colour of H1 to blue colour.

   • Using inline style:

     <h1 style="color: blue;">Heading Text</h1>

5. What is the significance of text-decoration property?

   • The text-decoration property is used to add or remove decorations from text, such as underlining (underline), overlining, line-throughs (line-through), or removing default links underlining (none).

6. Write a difference between internal and inline style sheets.

   • Internal Style Sheet: Defined inside the <head> section using the <style> tag and applies to the entire single webpage document.

   • Inline Style Sheet: Applied directly to a specific HTML element using the style attribute, affecting only that single element.

7. Explain the different properties of text in CSS.

   • Common text properties in CSS include:

     • color: Sets the color of the text.

     • font-family: Specifies the font face for the text.

     • font-size: Controls the size of the text.

     • font-weight: Specifies the boldness or thickness of the text.

     • text-align: Aligns the text horizontally (left, right, center, justify).

     • text-transform: Controls the capitalization of text (uppercase, lowercase, capitalize).

     • text-decoration: Adds special features like underlines or strikethroughs.

8. What are the different ways to include CSS in HTML?

   • CSS can be included in HTML in three ways:

     • Inline (using the style attribute)

     • Internal (using the <style> tag in the <head>)

     • External (using the <link> tag to connect an external .css file)

9. Write any three advantages of CSS.

   • Consistency: You can change the style of multiple pages at once by updating a single external CSS file.

   • Faster Page Loading: Since style rules are written once and reused across elements or pages, it reduces code duplication.

   • Better Formatting Control: CSS offers much more detailed and flexible layout and design options compared to standard HTML attributes.

10. What is the difference between background-color and background-image properties in CSS?

    • background-color: Sets a solid color as the background of an element.

    • background-image: Sets an image (specified via a URL) as the background of an element.