Wednesday, 11 December 2024

Home / Tailwind / Lecture Notes Of Class 4: Background and Border Utilities

Lecture Notes Of Class 4: Background and Border Utilities

by on in

Lecture Notes Of  Class 4: Background and Border Utilities

Objectives:

  • Learn to use background color and border utilities in CSS.
  • Customize border radius and border width to style components.

Concepts Covered:

1.   Background Color Utility:

o    Use CSS to apply background colors to elements using classes like bg-color-name (Bootstrap or custom CSS classes).

2.   Border Utility:

o    Applying borders using classes such as border, border-width, and border-color for quick styling.

3.   Border Radius:

o    Customize the roundness of corners using border-radius property.

o    Use classes like rounded or rounded-{size} in frameworks like Bootstrap, or create custom sizes.

4.   Customizing Border Width:

o    Control border width using CSS properties like border-width, or classes like border-0, border-1, border-2, etc., to adjust the thickness.

Activities:

1.   Design a Card Component with Custom Background and Rounded Borders

HTML:
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Component</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .custom-card {
            background-color: #f0f8ff;  /* Light blue background */
            border: 2px solid #4CAF50; /* Green border */
            border-radius: 15px;       /* Rounded corners */
            padding: 20px;
            max-width: 300px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="custom-card">
            <h4 class="card-title">Card Title</h4>
            <p class="card-text">This is a custom card with a background color, border, and rounded corners.</p>
        </div>
    </div>
</body>
</html>
Explanation:
  • Background Color: The custom card uses a light blue background color (background-color: #f0f8ff).
  • Border: A green border (border: 2px solid #4CAF50) is applied.
  • Rounded Corners: The card's corners are rounded using border-radius: 15px.
Bootstrap Classes Alternative (if using Bootstrap):
html
<div class="card bg-info text-white rounded-lg border-success" style="max-width: 300px;">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">This is a custom card using Bootstrap utilities with background, border, and rounded corners.</p>
    </div>
</div>

In this example:

  • bg-info sets the background to a light blue color.
  • text-white ensures that the text is white for contrast.
  • rounded-lg applies a large rounded border radius.
  • border-success applies a green border using Bootstrap's border utilities.

Key Takeaways:

  • CSS and utility classes can make styling elements like cards much quicker and easier.
  • Background color and border utilities are powerful for adding quick visual styles to components.
  • Border-radius helps in giving elements a more modern and rounded look.
  • Customizing these utilities allows for full flexibility in designing UI components.

You said:

WRITE 10 ASSIGNMENTS FROM ABOVE CONCEPT WITH STEP BY STEP SOLUTIONS with proper explanation

ChatGPT said:

ChatGPT

Assignments on Background and Border Utilities

Below are 10 assignments based on the Background and Border Utilities concepts, with step-by-step solutions and explanations for each.

Assignment 1: Apply Background Color to a Section

Objective: Apply a background color to a section of your webpage.

Instructions:

1.   Create an HTML file with a section element.

2.   Use CSS to apply a background color of your choice (e.g., light gray or blue).

3.   Set the section's height to 300px and give it a width of 100%.

Solution:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Color Example</title>
    <style>
        section {
            background-color: lightblue; /* Set background color */
            height: 300px;              /* Set height */
            width: 100%;                /* Full width */
        }
    </style>
</head>
<body>
    <section></section>
</body>
</html>

Explanation:

  • The background-color: lightblue; applies a light blue background to the section.
  • The section is given a height of 300px and a width of 100% to occupy the entire width of the page.

Assignment 2: Apply Border to a Div

Objective: Add a border around a div element.

Instructions:

1.   Create a div element.

2.   Apply a 5px solid black border around the div.

Solution:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Example</title>
    <style>
        div {
            border: 5px solid black;  /* Apply border */
            padding: 20px;            /* Add padding inside the div */
        }
    </style>
</head>
<body>
    <div>This div has a border.</div>
</body>
</html>

Explanation:

  • border: 5px solid black; applies a 5px thick black border around the div element.
  • Padding is added to create space between the content and the border.

Assignment 3: Round the Corners of a Div

Objective: Apply a rounded border to a div element.

Instructions:

1.   Create a div element.

2.   Apply a border-radius of 15px to round the corners.

Solution:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rounded Corners Example</title>
    <style>
        div {
            border: 3px solid #000;        /* Add border */
            border-radius: 15px;           /* Round the corners */
            padding: 20px;                 /* Add padding */
            max-width: 300px;              /* Set a maximum width */
        }
    </style>
</head>
<body>
    <div>This div has rounded corners.</div>
</body>
</html>

Explanation:

  • border-radius: 15px; rounds the corners of the div by 15px.
  • The max-width ensures the div doesn't stretch too wide.

Assignment 4: Create a Card with Background and Border

Objective: Design a card with a custom background color, border, and rounded corners.

Instructions:

1.   Create a div with a class="card".

2.   Apply a background color of light blue and a 2px solid green border.

3.   Round the corners with a border-radius of 20px.

Solution:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Example</title>
    <style>
        .card {
            background-color: lightblue;  /* Set background color */
            border: 2px solid green;      /* Set border */
            border-radius: 20px;          /* Round corners */
            padding: 20px;
            max-width: 300px;
            margin: 20px auto;            /* Center the card */
        }
    </style>
</head>
<body>
    <div class="card">
        <h3>Card Title</h3>
        <p>This is a custom card with a background color, border, and rounded corners.</p>
    </div>
</body>
</html>

Explanation:

  • The card is styled with background-color, border, and border-radius for custom appearance.
  • max-width limits the card size, while margin centers the card.

Assignment 5: Border Width Variation

Objective: Change the border width using CSS classes.

Instructions:

1.   Create a div and apply a border with a width of 3px.

2.   Try different border widths, such as 5px, 10px, and 20px.

Solution:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Width Example</title>
    <style>
        .border-3 { border: 3px solid black; }
        .border-5 { border: 5px solid red; }
        .border-10 { border: 10px solid green; }
        .border-20 { border: 20px solid blue; }
        div { padding: 20px; margin: 10px; }
    </style>
</head>
<body>
    <div class="border-3">3px Border</div>
    <div class="border-5">5px Border</div>
    <div class="border-10">10px Border</div>
    <div class="border-20">20px Border</div>
</body>
</html>

Explanation:

  • Different classes control the border width (border-3, border-5, border-10, border-20), each with different pixel values.

Assignment 6: Apply Border to Specific Side

Objective: Apply a border to only one side of an element.

Instructions:

1.   Create a div and apply a border only to the top side.

2.   Try different sides (e.g., bottom, left, or right).

Solution:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Single Border Example</title>
    <style>
        .border-top {
            border-top: 3px solid red;
            padding: 20px;
        }
        .border-left {
            border-left: 3px solid blue;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="border-top">This has a top border only.</div>
    <div class="border-left">This has a left border only.</div>
</body>
</html>

Explanation:

  • The border-top and border-left properties apply borders only to the top and left sides, respectively.

Assignment 7: Hover Effect on Border Color

Objective: Change the border color when hovering over an element.

Instructions:

1.   Create a div and apply a border.

2.   Change the border color to blue when the user hovers over the div.

Solution:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover Border Color Example</title>
    <style>
        div {
            border: 3px solid black;
            padding: 20px;
            transition: border-color 0.3s ease;
        }
        div:hover {
            border-color: blue;  /* Change border color on hover */
        }
    </style>
</head>
<body>
    <div>Hover over this box to change the border color.</div>
</body>
</html>

Explanation:

  • div:hover changes the border color when the user hovers over the element.
  • transition: border-color 0.3s ease; provides a smooth transition effect.

Assignment 8: Custom Border Radius and Shadow Effect

Objective: Apply a custom border radius and a box-shadow effect to an element.

Instructions:

1.   Create a div.

2.   Apply a border radius of 25px and a box shadow.

Solution:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Border Radius and Shadow Example</title>
    <style>
        div {
            border: 3px solid #333;
            border-radius: 25px;  /* Apply rounded corners */
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);  /* Add shadow */
            padding: 20px;
            max-width: 300px;
        }
    </style>
</head>
<body>
    <div>This div has a rounded border and shadow effect.</div>
</body>
</html>

Explanation:

  • border-radius: 25px; rounds the corners by 25px.
  • box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); adds a subtle shadow to the div.

Assignment 9: Gradient Background with Borders

Objective: Create a gradient background with a border.

Instructions:

1.   Create a div.

2.   Apply a gradient background with a border.

Solution:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient Background with Border</title>
    <style>
        div {
            background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient background */
            border: 3px solid #333;  /* Border */
            padding: 40px;
            text-align: center;
            max-width: 300px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div>This div has a gradient background and a border.</div>
</body>
</html>

Explanation:

  • background: linear-gradient(to right, #ff7e5f, #feb47b); creates a gradient from left to right.
  • The border surrounds the div with a 3px solid border.

Assignment 10: Apply Border and Background to a Button

Objective: Style a button with borders and background colors.

Instructions:

1.   Create a button.

2.   Apply a background color, border, and text styling.

Solution:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Style</title>
    <style>
        button {
            background-color: #4CAF50;  /* Green background */
            border: 2px solid #388E3C;  /* Darker green border */
            color: white;               /* White text */
            padding: 10px 20px;         /* Padding inside the button */
            border-radius: 5px;         /* Rounded corners */
            cursor: pointer;           /* Pointer cursor */
            transition: background-color 0.3s; /* Smooth transition */
        }
        button:hover {
            background-color: #45a049;  /* Darker green on hover */
        }
    </style>
</head>
<body>
    <button>Click Me</button>
</body>
</html>

Explanation:

  • The button has a green background, white text, and a border.
  • The hover effect changes the background color when the button is hovered over.

These assignments cover a wide range of applications related to background and border utilities, allowing students to practice different styling techniques using CSS.

You said:

WRITE 50 no of MCQs only FROM ABOVE CONCEPT with explanation

ChatGPT said:

ChatGPT

Here are 50 multiple-choice questions (MCQs) based on the CSS concepts from the above assignments:

1. What property is used to round the corners of an element?

a) border
b) border-radius
c) padding
d) box-shadow

Answer: b) border-radius
Explanation: The border-radius property is used to create rounded corners on elements.

2. Which property is used to add a shadow effect to an element?

a) box-shadow
b) text-shadow
c) shadow
d) border-shadow

Answer: a) box-shadow
Explanation: The box-shadow property is used to add shadow effects to elements.

3. What is the correct syntax for applying a gradient background from left to right?

a) background: linear-gradient(left, red, yellow);
b) background: linear-gradient(to right, red, yellow);
c) background: gradient(left, red, yellow);
d) background: gradient(to right, red, yellow);

Answer: b) background: linear-gradient(to right, red, yellow);
Explanation: The correct syntax to apply a gradient from left to right is linear-gradient(to right, color1, color2);.

4. How can you make an element's corners rounded with a value of 20px?

a) border-radius: 20px;
b) round-corners: 20px;
c) radius: 20px;
d) corner-radius: 20px;

Answer: a) border-radius: 20px;
Explanation: The border-radius property is used to round the corners of an element.

5. Which property is used to apply a background image to an element?

a) background-image
b) background
c) background-color
d) image-background

Answer: a) background-image
Explanation: The background-image property is used to set an image as the background of an element.

6. What is the effect of setting box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);?

a) Adds a blurred border
b) Adds a border with shadow
c) Adds a shadow with offset and blur
d) Adds a shadow without blur

Answer: c) Adds a shadow with offset and blur
Explanation: The box-shadow property adds a shadow to an element with a horizontal and vertical offset, followed by a blur radius and color.

7. What is the result of using border: 3px solid #333;?

a) It adds a 3px dashed border.
b) It adds a 3px solid black border.
c) It adds a 3px dotted border.
d) It adds a 3px red border.

Answer: b) It adds a 3px solid black border.
Explanation: The border property is used to define a border with width, style, and color.

8. Which CSS property controls the spacing between the content and the border of an element?

a) margin
b) padding
c) border-spacing
d) border-width

Answer: b) padding
Explanation: The padding property adds space between the content of the element and its border.

9. What is the purpose of transition: background-color 0.3s; in the button style?

a) It changes the background color instantly.
b) It adds a delay in background color change.
c) It smoothly changes the background color over 0.3 seconds.
d) It animates the text color change.

Answer: c) It smoothly changes the background color over 0.3 seconds.
Explanation: The transition property is used to animate changes to a property over a specified duration.

10. What happens when border-radius: 50%; is applied to a square element?

a) The element becomes a circle.
b) The element becomes a rectangle.
c) The element gets rounded corners.
d) The element gets a gradient background.

Answer: a) The element becomes a circle.
Explanation: Setting border-radius: 50%; on a square element creates a circle by rounding the corners to half the size of the element.

11. Which of the following is used to create a hover effect on a button?

a) button:hover
b) button:focus
c) button:active
d) button:click

Answer: a) button:hover
Explanation: The :hover pseudo-class is used to apply styles when the mouse hovers over an element.

12. How do you apply a linear gradient background with two colors in CSS?

a) background: gradient(red, yellow);
b) background: linear-gradient(red, yellow);
c) background: linear-gradient(red, yellow 45%);
d) background: linear-gradient(to right, red, yellow);

Answer: d) background: linear-gradient(to right, red, yellow);
Explanation: The correct syntax to apply a linear gradient with two colors is linear-gradient(to right, color1, color2).

13. What does the property cursor: pointer; do?

a) Changes the cursor to a hand when hovering over an element
b) Makes the cursor disappear
c) Changes the cursor to a text cursor
d) Prevents the cursor from changing

Answer: a) Changes the cursor to a hand when hovering over an element
Explanation: The cursor: pointer; style changes the cursor to a hand when hovering over an element, usually for clickable items.

14. Which property is used to style the inner space of an element, between the content and the border?

a) padding
b) margin
c) border-spacing
d) content-spacing

Answer: a) padding
Explanation: The padding property defines the space between the content and the border of an element.

15. How can you make a button with a green background color and white text?

a) button { background-color: green; color: white; }
b) button { background-color: white; color: green; }
c) button { background-color: #4CAF50; text-color: white; }
d) button { background-color: green; text-color: white; }

Answer: a) button { background-color: green; color: white; }
Explanation: The background-color property is used to change the background color, and the color property sets the text color.

16. What is the correct syntax for applying a box shadow with a 5px horizontal and 5px vertical offset and a 10px blur radius?

a) box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
b) box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
c) box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
d) box-shadow: 5px 10px 5px rgba(0, 0, 0, 0.2);

Answer: a) box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
Explanation: This syntax correctly applies a shadow with horizontal and vertical offsets, as well as a blur radius.

17. Which of the following defines a button with rounded corners and padding?

a) button { border-radius: 15px; padding: 10px; }
b) button { border: 2px solid #333; padding: 15px; }
c) button { border-radius: 10px; padding: 10px 20px; }
d) button { padding: 10px 20px; border-radius: 5px; }

Answer: a) button { border-radius: 15px; padding: 10px; }
Explanation: This syntax defines a button with rounded corners and padding.

18. Which property defines the spacing between an element's border and other surrounding elements?

a) padding
b) margin
c) border-spacing
d) text-indent

Answer: b) margin
Explanation: The margin property sets the space between an element's border and the surrounding elements.

19. How can you make a button change color on hover?

a) button:active { background-color: red; }
b) button:hover { background-color: red; }
c) button:hover { color: red; }
d) button:hover { border-color: red; }

Answer: b) button:hover { background-color: red; }
Explanation: The :hover pseudo-class is used to change styles when the user hovers over an element.

20. What is the default value of the position property in CSS?

a) relative
b) absolute
c) static
d) fixed

Answer: c) static
Explanation: The default value of the position property is static, meaning the element is positioned according to the normal document flow.

21. Which CSS property is used to set the width of a border?

a) border-width
b) border-style
c) border-radius
d) border-color

Answer: a) border-width
Explanation: The border-width property defines the thickness of an element's border.

22. What is the correct syntax to apply a background color of red to a webpage?

a) background-color: red;
b) color: red;
c) background: red;
d) background: color red;

Answer: a) background-color: red;
Explanation: The background-color property is used to apply a background color to an element.

23. How can you hide an element but still take up space in the layout?

a) visibility: hidden;
b) display: none;
c) opacity: 0;
d) position: absolute;

Answer: a) visibility: hidden;
Explanation: The visibility: hidden; property hides an element but keeps its space in the layout.

24. What does the display: flex; property do?

a) Aligns the elements vertically
b) Defines the layout as flexible
c) Defines the layout as grid
d) Makes the element inline

Answer: b) Defines the layout as flexible
Explanation: The display: flex; property defines a flex container for its child elements, enabling flexible layouts.

25. Which of the following is used to specify a fixed position for an element?

a) position: relative;
b) position: fixed;
c) position: absolute;
d) position: static;

Answer: b) position: fixed;
Explanation: The position: fixed; property places an element in a fixed position relative to the viewport, meaning it stays in place during scrolling.

26. Which property defines the distance between the text and its container's edge?

a) text-indent
b) line-height
c) padding
d) text-align

Answer: a) text-indent
Explanation: The text-indent property is used to set the indentation of the first line of text in an element.

27. What does the flex-direction property do in a flex container?

a) Specifies how the content is aligned
b) Specifies the direction of the flex items
c) Specifies the alignment of items in a grid
d) Specifies the size of each item

Answer: b) Specifies the direction of the flex items
Explanation: The flex-direction property defines the direction in which the flex items are placed within a flex container (row, column, etc.).

28. What is the default value of the display property for most elements?

a) inline
b) block
c) flex
d) static

Answer: b) block
Explanation: Most HTML elements have a default display value of block, meaning they take up the full width available.

29. What is the purpose of text-align: center;?

a) Centers the element in the middle of its container
b) Centers the text within its container
c) Centers the container itself
d) Aligns the text to the right

Answer: b) Centers the text within its container
Explanation: The text-align: center; property is used to center the text horizontally within its container.

30. Which property is used to change the font size of text in an element?

a) text-size
b) font-size
c) size
d) text-style

Answer: b) font-size
Explanation: The font-size property is used to define the size of the text inside an element.

31. What does the z-index property do?

a) Controls the stacking order of elements
b) Sets the width of an element
c) Defines the opacity of an element
d) Sets the color of an element

Answer: a) Controls the stacking order of elements
Explanation: The z-index property specifies the stack order of elements. Higher values stack elements in front of lower values.

32. How can you change the text color of an element?

a) color: blue;
b) font-color: blue;
c) text-color: blue;
d) background-color: blue;

Answer: a) color: blue;
Explanation: The color property is used to change the text color of an element.

33. Which CSS property is used to define the background color of an element?

a) background-color
b) bg-color
c) color
d) background

Answer: a) background-color
Explanation: The background-color property sets the background color of an element.

34. What does the opacity property do?

a) Hides an element
b) Defines the transparency of an element
c) Sets the position of an element
d) Defines the element's size

Answer: b) Defines the transparency of an element
Explanation: The opacity property controls the transparency level of an element, where 1 is fully opaque and 0 is fully transparent.

35. Which of the following makes an element appear at the top of its container?

a) vertical-align: top;
b) top: 0;
c) position: absolute;
d) text-align: top;

Answer: a) vertical-align: top;
Explanation: The vertical-align: top; property aligns the element at the top of its container.

36. What does the float property do?

a) Positions an element in a floating container
b) Positions an element next to other elements
c) Centers the element
d) Aligns an element to the bottom

Answer: b) Positions an element next to other elements
Explanation: The float property positions an element to the left or right, allowing other elements to wrap around it.

37. Which property is used to control the size of an element’s border?

a) border-thickness
b) border-width
c) border-size
d) border-radius

Answer: b) border-width
Explanation: The border-width property defines the thickness of the element's border.

38. Which of the following defines a block-level element?

a) div
b) span
c) button
d) input

Answer: a) div
Explanation: A div element is a block-level element, meaning it occupies the entire width of its parent container.

39. What property is used to control the spacing between letters of text?

a) letter-spacing
b) word-spacing
c) text-indent
d) line-height

Answer: a) letter-spacing
Explanation: The letter-spacing property controls the space between letters of text.

40. Which property is used to specify the font of text?

a) text-style
b) font-family
c) font-weight
d) text-decoration

Answer: b) font-family
Explanation: The font-family property is used to specify the font of the text.

41. Which value of display makes an element behave like an inline element but also allow setting width and height?

a) block
b) inline
c) inline-block
d) flex

Answer: c) inline-block
Explanation: The inline-block value allows an element to behave like an inline element but also allows setting its width and height.

42. Which property is used to create a flexible layout with flexible items?

a) flex
b) display: grid;
c) display: block;
d) display: inline-block;

Answer: a) flex
Explanation: The flex property is used to create flexible layouts with flexible items inside a flex container.

43. How can you add a shadow to a box in CSS?

a) box-shadow: 5px 5px 5px gray;
b) shadow: 5px 5px 5px gray;
c) text-shadow: 5px 5px 5px gray;
d) border-shadow: 5px 5px 5px gray;

Answer: a) box-shadow: 5px 5px 5px gray;
Explanation: The box-shadow property adds shadow effects around an element's box.

44. Which of the following is used to style the active state of a link in CSS?

a) :hover
b) :visited
c) :active
d) :focus

Answer: c) :active
Explanation: The :active pseudo-class is used to apply styles to an element when it is in an active state, such as when a link is clicked.

45. Which CSS property is used to change the text alignment within an element?

a) text-align
b) align-text
c) text-position
d) align-items

Answer: a) text-align
Explanation: The text-align property is used to align the text within an element.

46. How do you add a comment in CSS?

a) // This is a comment
b) /* This is a comment */
c) <!-- This is a comment -->
d) # This is a comment

Answer: b) /* This is a comment */
Explanation: In CSS, comments are written inside /* */ to make them non-functional in the code.

47. Which CSS property controls the space between lines of text?

a) line-height
b) text-align
c) letter-spacing
d) word-spacing

Answer: a) line-height
Explanation: The line-height property is used to control the space between lines of text.

48. What does the overflow: hidden; property do?

a) Hides the content that overflows an element
b) Hides the element completely
c) Prevents the element from scrolling
d) Hides the background of the element

Answer: a) Hides the content that overflows an element
Explanation: The overflow: hidden; property hides content that exceeds the boundaries of its container.

49. Which value of the position property is used to position an element relative to its normal position?

a) relative
b) absolute
c) static
d) fixed

Answer: a) relative
Explanation: The position: relative; property positions an element relative to its normal position in the document flow.

50. What is the purpose of the visibility property in CSS?

a) Makes an element completely invisible
b) Makes an element hidden but still takes up space in the layout
c) Hides the element and its space in the layout
d) Controls the visibility of text only

Answer: b) Makes an element hidden but still takes up space in the layout
Explanation: The visibility: hidden; property hides an element but keeps its allocated space in the layout.

 


By at
Tags

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Search This Blog
Powered by Blogger.

Labels