Lecture Notes Of Class 9: Hover, Focus, and State Variants

Lecture Notes Of Class 9: Hover, Focus, and State Variants

Objectives:

Understand the concept of state-based utilities like hover and focus.
Learn to style buttons and links dynamically using CSS.
Practice applying these styles to buttons and links on different states (hover, focus).

Introduction:

In web design, dynamic styles are used to enhance user interaction with web elements. This can include changing the appearance of a button when the user hovers over it or focuses on it. CSS provides pseudo-classes like :hover and :focus to apply styles based on the element's state.

Key Concepts:

1. Hover State (:hover):

o The :hover pseudo-class is triggered when a user places their cursor over an element. This is commonly used for buttons, links, and other interactive elements.

o Example: Changing the background color or adding an underline when a user hovers over a button or a link.

2. Focus State (:focus):

o The :focus pseudo-class is activated when an element, usually an input or a button, receives focus from the user. This typically happens when the user clicks on or tabs to the element.

o Example: Highlighting a form input or button when it is focused to make it visually clearer that it is active.

3. Active State (:active):

o While :active isn't the main focus here, it is also useful to understand. It is used when an element is being clicked on, providing feedback during that action.

Example CSS Code:

css

Copy code

/* Default button styles */

button {

background-color: #4CAF50; /* Green */

color: white;

padding: 10px 20px;

border: none;

cursor: pointer;

font-size: 16px;

transition: background-color 0.3s, transform 0.2s;

}

/* Hover state */

button:hover {

background-color: #45a049; /* Darker green */

transform: scale(1.1); /* Slightly enlarge the button */

}

/* Focus state */

button:focus {

outline: none; /* Remove default outline */

box-shadow: 0 0 5px #2196F3; /* Add blue glow around the button */

}

Example HTML Code:

html

Copy code

<!DOCTYPE html>

<head>

<title>Button Hover and Focus Example</title>

</head>

<body>

<form>

<button type="submit">Submit</button>

</form>

</body>

</html>

Activity:

1. Creating a Form with Hover and Focus States:

o Create a simple HTML form that contains a button.

o Apply the CSS from the example above to style the button with :hover and :focus states.

2. Additional Task:

o Add an input field to the form.

o Use the :focus pseudo-class to apply a different background color to the input field when it receives focus.

o Add :hover effects to the input field for visual feedback.

Example Extended Code:

css

Copy code

/* Input field styles */

input[type="text"] {

padding: 10px;

border: 2px solid #ccc;

font-size: 16px;

margin-bottom: 10px;

transition: border-color 0.3s, background-color 0.3s;

}

/* Hover state for input field */

input[type="text"]:hover {

background-color: #f1f1f1; /* Light gray */

}

/* Focus state for input field */

input[type="text"]:focus {

border-color: #4CAF50; /* Green border on focus */

background-color: #e6ffe6; /* Light green background on focus */

}

html

Copy code

<form>

<button type="submit">Submit</button>

</form>

Conclusion:

In this class, you learned how to use CSS pseudo-classes like :hover and :focus to create dynamic, interactive styles. These techniques improve the user experience by providing visual feedback when interacting with buttons, links, and input fields.

Assignment:

1. Create a form that includes at least two buttons and one input field.

2. Style each button to change its background color on hover and show a box shadow on focus.

3. Add hover and focus effects to the input fields for enhanced user interaction.

This will allow students to practice creating interactive UI components that respond to user interactions and improve overall website usability.

4o mini

You said:

Write 10 assignments with solution and explanation in detail on above concept

ChatGPT said:

ChatGPT

Assignments on Hover, Focus, and State Variants

Assignment 1: Hover Effect on Links

Task: Create a webpage with a navigation menu containing links to "Home," "About," and "Services." Apply a hover effect to change the color of the links when the user hovers over them.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Hover Effect on Links</title>

<style>

a {

text-decoration: none;

color: black;

font-size: 18px;

padding: 10px;

}

a:hover {

color: #4CAF50; /* Green color on hover */

}

</style>

</head>

<body>

<nav>

<a href="#">About</a>

<a href="#">Services</a>

</nav>

</body>

</html>

Explanation:

The a:hover pseudo-class is used to change the color of the links to green when the user hovers over them.
The links initially appear in black color, and on hovering, they change to green (#4CAF50).

Assignment 2: Focus Effect on Input Fields

Task: Create a form with a text input field. Apply a focus effect to change the border color to blue when the input field receives focus.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Focus Effect on Input</title>

<style>

input[type="text"] {

padding: 10px;

font-size: 16px;

border: 2px solid #ccc;

transition: border-color 0.3s;

}

input[type="text"]:focus {

border-color: blue; /* Blue border on focus */

}

</style>

</head>

<body>

<form>

</form>

</body>

</html>

Explanation:

The input[type="text"]:focus selector changes the border color of the text input to blue when it is focused.
The transition property ensures that the border color change occurs smoothly.

Assignment 3: Hover and Focus Effect on Submit Button

Task: Create a form with a submit button. Apply a hover effect to enlarge the button, and a focus effect to add a shadow around it.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Button Hover and Focus</title>

<style>

button {

padding: 10px 20px;

background-color: #4CAF50;

color: white;

border: none;

font-size: 16px;

cursor: pointer;

transition: all 0.3s ease;

}

button:hover {

transform: scale(1.1); /* Enlarge the button */

}

button:focus {

outline: none;

box-shadow: 0 0 5px 2px rgba(0, 128, 0, 0.5); /* Green glow on focus */

}

</style>

</head>

<body>

<form>

<button type="submit">Submit</button>

</form>

</body>

</html>

Explanation:

The button:hover increases the button's size slightly when hovered using the transform: scale(1.1) property.
The button:focus adds a green glow around the button using the box-shadow property when it is focused.

Assignment 4: Hover Effect on Card Elements

Task: Create a card with an image and description. Apply a hover effect to make the card scale up when hovered.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Card Hover Effect</title>

<style>

.card {

width: 200px;

height: 300px;

margin: 20px;

overflow: hidden;

border: 2px solid #ccc;

transition: transform 0.3s ease;

}

.card:hover {

transform: scale(1.05); /* Card enlarges on hover */

}

.card img {

width: 100%;

height: 200px;

object-fit: cover;

}

.card p {

padding: 10px;

font-size: 16px;

}

</style>

</head>

<body>

<p>Description of the card content.</p>

</div>

</body>

</html>

Explanation:

The card:hover increases the card's size slightly when hovered using the transform: scale(1.05) property, giving a zoom effect.
The card includes an image and a description, where the image scales within the card when hovered.

Assignment 5: Focus Effect on Form Elements

Task: Create a form with text, email, and password fields. Apply a different focus color for each field.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Form Focus Effects</title>

<style>

input[type="text"], input[type="email"], input[type="password"] {

padding: 10px;

margin: 5px 0;

border: 2px solid #ccc;

font-size: 16px;

width: 100%;

}

input[type="text"]:focus {

border-color: blue;

}

input[type="email"]:focus {

border-color: green;

}

input[type="password"]:focus {

border-color: red;

}

</style>

</head>

<body>

<form>

</form>

</body>

</html>

Explanation:

Each input field has a different :focus color to provide clear visual feedback to the user when the field is focused.
Text fields are blue, email fields are green, and password fields are red.

Assignment 6: Button Transition on Hover

Task: Create a button that smoothly changes its background color and enlarges when hovered over.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Button Transition</title>

<style>

button {

padding: 10px 20px;

font-size: 16px;

background-color: #008CBA;

color: white;

border: none;

transition: all 0.3s ease;

}

button:hover {

background-color: #005f73; /* Change color on hover */

transform: scale(1.1); /* Enlarge the button */

}

</style>

</head>

<body>

<button>Click Me</button>

</body>

</html>

Explanation:

The button:hover selector changes the background color of the button to a darker shade of blue and enlarges it by 10% using the transform property.

Assignment 7: Form Validation Feedback

Task: Create a form with an email input field. Add a focus effect that highlights the field with a green border when the input is valid and a red border when it’s invalid.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Email Validation</title>

<style>

input[type="email"] {

padding: 10px;

border: 2px solid #ccc;

font-size: 16px;

}

input[type="email"]:focus {

border-color: #2196F3; /* Blue border on focus */

}

input[type="email"]:valid {

border-color: green; /* Green border when valid */

}

input[type="email"]:invalid {

border-color: red; /* Red border when invalid */

}

</style>

</head>

<body>

<form>

</form>

</body>

</html>

Explanation:

The :valid and :invalid pseudo-classes are used to highlight the input field with green or red borders depending on the email validation result.
The :focus pseudo-class applies a blue border when the user interacts with the input.

Assignment 8: Hover Effect on Images

Task: Create a gallery of images. Apply a hover effect to darken the image when hovered.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Image Hover Effect</title>

<style>

.gallery img {

width: 100%;

transition: opacity 0.3s ease;

}

.gallery img:hover {

opacity: 0.7; /* Darken the image on hover */

}

</style>

</head>

<body>

</div>

</body>

</html>

Explanation:

The opacity property reduces the image's opacity on hover, giving it a darkened effect.
The transition ensures a smooth fade effect when hovering.

Assignment 9: Active State on Navigation Links

Task: Create a navigation bar where the current active page is highlighted by changing the background color of the link.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Active Link</title>

<style>

nav a {

text-decoration: none;

color: black;

padding: 10px;

font-size: 18px;

}

nav a.active {

background-color: #4CAF50; /* Green background for active link */

color: white;

}

</style>

</head>

<body>

<nav>

<a href="#">About</a>

<a href="#">Services</a>

</nav>

</body>

</html>

Explanation:

The a.active selector applies a background color change to the active link.
This allows the user to easily identify the active page.

Assignment 10: Combine Hover and Focus Effects

Task: Create a form with a submit button and input fields. Apply a hover effect to the button and a focus effect to the input fields.

Solution:

html

Copy code

<!DOCTYPE html>

<head>

<title>Form Hover and Focus Effects</title>

<style>

input[type="text"], input[type="email"], input[type="password"] {

padding: 10px;

font-size: 16px;

margin: 5px 0;

width: 100%;

border: 2px solid #ccc;

}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus {

border-color: #4CAF50; /* Green border on focus */

}

button {

padding: 10px 20px;

background-color: #008CBA;

color: white;

border: none;

font-size: 16px;

cursor: pointer;

transition: background-color 0.3s ease;

}

button:hover {

background-color: #005f73; /* Darken button on hover */

}

</style>

</head>

<body>

<form>

<button type="submit">Submit</button>

</form>

</body>

</html>

Explanation:

The input:focus property is used to highlight the input fields with a green border on focus.
The button:hover changes the button’s background color to a darker shade when hovered, providing visual feedback for interaction.

4o mini

You said:

write 50 MCQs for the concept above with explanation

ChatGPT said:

ChatGPT

Here are 50 multiple-choice questions (MCQs) based on the CSS concepts above, each with an explanation:

1. What does the :hover pseudo-class do in CSS?

a) Changes the background color of an element when clicked
b) Changes the background color of an element when hovered over
c) Changes the text color of an element when hovered over
d) Changes the size of an element when hovered over

Answer: b) Changes the background color of an element when hovered over
Explanation: The :hover pseudo-class is applied when the user hovers over an element with the mouse.

2. What is the purpose of the transition property in CSS?

a) To make elements move across the page
b) To animate changes in CSS properties over a specified duration
c) To change the layout of elements
d) To add borders to elements

Answer: b) To animate changes in CSS properties over a specified duration
Explanation: The transition property allows you to specify smooth transitions between different states of an element.

3. Which property is used to change the opacity of an image in CSS?

a) background
b) visibility
c) opacity
d) color

Answer: c) opacity
Explanation: The opacity property controls the transparency of an element, making it more or less visible.

4. What is the function of the :focus pseudo-class?

a) It changes the background color of an element when hovered
b) It applies styles to an element when it is clicked
c) It applies styles when an element gains focus, like input fields
d) It applies styles to an element when it is double-clicked

Answer: c) It applies styles when an element gains focus, like input fields
Explanation: The :focus pseudo-class is used when an element, such as an input field, gains focus.

5. What does the :active pseudo-class represent?

a) When an element is being hovered over
b) When an element is clicked or activated
c) When an element is in focus
d) When an element is being edited

Answer: b) When an element is clicked or activated
Explanation: The :active pseudo-class applies when an element is being activated, typically during a mouse click.

6. Which property is used to change the font size of an element in CSS?

a) font-size
b) font-weight
c) text-size
d) font-family

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

7. Which CSS property allows you to change the border color of an element?

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

Answer: b) border-color
Explanation: The border-color property changes the color of the border surrounding an element.

8. What does the width property control in CSS?

a) The height of an element
b) The amount of space between elements
c) The width of an element
d) The padding inside an element

Answer: c) The width of an element
Explanation: The width property is used to define the horizontal size of an element.

9. Which of the following is correct for applying hover effects on a button in CSS?

a) button:hover { background-color: #4CAF50; }
b) button:focus { background-color: #4CAF50; }
c) button:active { background-color: #4CAF50; }
d) button:before { background-color: #4CAF50; }

Answer: a) button:hover { background-color: #4CAF50; }
Explanation: The :hover pseudo-class is used to apply styles when the user hovers over an element, such as a button.

10. What is the effect of the following CSS code?

css

Copy code

a.active {

background-color: #4CAF50;

color: white;

}

a) It styles an active link with a green background and white text
b) It changes the link color to green
c) It applies a border to the link
d) It changes the font size of the link

Answer: a) It styles an active link with a green background and white text
Explanation: This code uses the :active class to change the background and text color of the active link.

11. Which property is used to set the background color of an element in CSS?

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

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

12. What is the default behavior of links in HTML?

a) They are styled with a bold font
b) They are underlined and blue
c) They are displayed in a block format
d) They do not have any style by default

Answer: b) They are underlined and blue
Explanation: By default, links are underlined and have a blue color in most browsers.

13. How do you make an image darken when hovered over?

a) img:hover { opacity: 0.5; }
b) img:hover { brightness: 50%; }
c) img:hover { filter: brightness(50%); }
d) Both b and c

Answer: d) Both b and c
Explanation: The filter: brightness(50%) property can be used to darken an image on hover.

14. Which property is used to apply a smooth transition effect to an element?

a) transition
b) animation
c) smooth
d) fade

Answer: a) transition
Explanation: The transition property allows you to smoothly change the value of CSS properties over a specified duration.

15. How do you add padding inside an element in CSS?

a) padding
b) margin
c) border
d) space

Answer: a) padding
Explanation: The padding property adds space inside an element, around the content.

16. Which of the following is NOT a pseudo-class in CSS?

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

Answer: c) :before
Explanation: :before is a pseudo-element, not a pseudo-class. Pseudo-classes are used to define special states of an element.

17. What is the purpose of the border-radius property in CSS?

a) To define the thickness of the border
b) To create rounded corners on an element
c) To apply a background color to the border
d) To apply a shadow to the border

Answer: b) To create rounded corners on an element
Explanation: The border-radius property allows you to round the corners of an element.

18. Which of the following properties would you use to change the text color in CSS?

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

Answer: c) color
Explanation: The color property is used to set the text color of an element.

19. Which CSS property controls the alignment of text inside an element?

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

Answer: a) text-align
Explanation: The text-align property is used to align text within an element (left, right, center).

20. What happens when you apply :focus on an input element in CSS?

a) It changes the font size of the input field
b) It changes the text color of the input field
c) It applies a border color to the input field
d) It disables the input field

Answer: c) It applies a border color to the input field
Explanation: The :focus pseudo-class is often used to apply a different border color or style when an input field is focused.

21. What does filter: brightness(50%) do in CSS?

a) Makes the element brighter
b) Increases the contrast of the element
c) Makes the element 50% darker
d) Reduces the opacity of the element

Answer: c) Makes the element 50% darker
Explanation: The brightness(50%) filter reduces the brightness, making the element appear darker.

22. Which CSS property is used to change the font weight?

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

Answer: c) font-weight
Explanation: The font-weight property allows you to adjust the thickness of the text.

23. How do you apply a shadow effect to text in CSS?

a) text-shadow
b) box-shadow
c) shadow-effect
d) font-shadow

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

24. Which property is used to set the line height in CSS?

a) line-spacing
b) text-line
c) line-height
d) font-line

Answer: c) line-height
Explanation: The line-height property defines the amount of space between lines of text within an element.

25. Which of the following is the correct syntax for applying a style to the first child of a parent element in CSS?

a) parent:first-child { color: red; }
b) parent:first { color: red; }
c) parent > first-child { color: red; }
d) parent:child:first { color: red; }

Answer: a) parent:first-child { color: red; }
Explanation: The :first-child pseudo-class targets the first child of a parent element.

26. What is the effect of the display: flex; property in CSS?

a) It creates a flexbox container and makes the children align horizontally or vertically
b) It hides the element
c) It makes the element a block-level element
d) It adds padding to the element

Answer: a) It creates a flexbox container and makes the children align horizontally or vertically
Explanation: The display: flex; property enables a flexbox layout, allowing flexible and responsive alignment of child elements.

27. Which property is used to create space between elements in CSS?

a) padding
b) margin
c) border
d) gap

Answer: b) margin
Explanation: The margin property adds space outside the border of an element, separating it from surrounding elements.

28. Which CSS property allows you to create a grid layout for elements?

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

Answer: b) display: grid;
Explanation: The display: grid; property allows you to create a grid layout system for arranging elements.

29. What does the box-sizing: border-box; property do in CSS?

a) It adds a box around the element
b) It adjusts the width and height of the element to include padding and borders
c) It resizes the element to fit its content
d) It removes borders from the element

Answer: b) It adjusts the width and height of the element to include padding and borders
Explanation: The box-sizing: border-box; property changes the box model to include padding and borders within the element's total width and height.

30. How do you remove the default underlining of a link in CSS?

a) a { text-decoration: none; }
b) a { border: none; }
c) a { font-style: none; }
d) a { display: none; }

Answer: a) a { text-decoration: none; }
Explanation: The text-decoration: none; property removes the underline from links.

4o mini

You said:

more 25

ChatGPT said:

ChatGPT

Here are 25 more multiple-choice questions based on CSS:

31. Which property is used to set the background color of an element?

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

Answer: b) background-color
Explanation: The background-color property is used to set the background color of an element.

32. Which property is used to specify the width of an element's border?

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

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

33. What does the overflow: hidden; property do in CSS?

a) It hides the entire element
b) It hides content that exceeds the element's box
c) It makes the content visible outside the element
d) It removes the element's border

Answer: b) It hides content that exceeds the element's box
Explanation: The overflow: hidden; property hides any content that exceeds the boundaries of the element.

34. How do you apply styles to elements with a specific class in CSS?

a) .classname { ... }
b) #classname { ... }
c) *classname { ... }
d) classname { ... }

Answer: a) .classname { ... }
Explanation: In CSS, you apply styles to elements with a specific class by prefixing the class name with a period (.).

35. Which property is used to change the font size in CSS?

a) font-size
b) text-size
c) size
d) letter-spacing

Answer: a) font-size
Explanation: The font-size property sets the size of the font.

36. What does the text-align: center; property do?

a) Aligns the text to the left
b) Aligns the text to the right
c) Centers the text horizontally
d) Centers the text vertically

Answer: c) Centers the text horizontally
Explanation: The text-align: center; property horizontally centers the text within its container.

37. How do you select an element with a specific ID in CSS?

a) .idname { ... }
b) #idname { ... }
c) *idname { ... }
d) idname { ... }

Answer: b) #idname { ... }
Explanation: In CSS, you apply styles to elements with a specific ID by prefixing the ID name with a hash (#).

38. Which property is used to add space inside the element, between its content and border?

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

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

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

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

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

40. Which property is used to change the font style in CSS?

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

Answer: a) font-style
Explanation: The font-style property allows you to change the font style, such as italic or normal.

41. How do you make an element invisible but still occupy space in CSS?

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

Answer: a) visibility: hidden;
Explanation: The visibility: hidden; property makes an element invisible while still occupying space in the layout.

42. Which property is used to set the font family in CSS?

a) font-family
b) font-type
c) font-style
d) text-font

Answer: a) font-family
Explanation: The font-family property sets the font for an element.

43. Which of the following values for the position property in CSS allows the element to be positioned relative to its nearest positioned ancestor?

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

Answer: b) relative
Explanation: The relative value for the position property allows the element to be positioned relative to its nearest positioned ancestor.

44. Which property is used to control the spacing between words in CSS?

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

Answer: a) word-spacing
Explanation: The word-spacing property controls the spacing between words in text.

45. What does the float property do in CSS?

a) It aligns elements vertically
b) It removes an element from the document flow
c) It makes elements responsive
d) It adds a border around an element

Answer: b) It removes an element from the document flow
Explanation: The float property is used to position elements to the left or right, removing them from the document flow.

46. What is the effect of setting display: none; on an element?

a) It hides the element but keeps its space in the layout
b) It removes the element from the layout entirely
c) It makes the element visible
d) It centers the element

Answer: b) It removes the element from the layout entirely
Explanation: The display: none; property removes the element from the layout, making it invisible and not occupying space.

47. Which property is used to create rounded corners for an element in CSS?

a) border-radius
b) corner-radius
c) radius
d) rounded-corners

Answer: a) border-radius
Explanation: The border-radius property is used to create rounded corners on an element.

48. Which of the following values for the position property makes the element stick to the top of the page when scrolling?

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

Answer: d) sticky
Explanation: The sticky value for the position property makes an element "stick" to the top of the viewport when scrolling.

49. What is the correct CSS syntax to change the background color of a <div> element with the class box?

a) div.box { background-color: red; }
b) #box { background-color: red; }
c) .div.box { background-color: red; }
d) div.box { color: red; }

Answer: a) div.box { background-color: red; }
Explanation: To target a <div> element with the class box, you use div.box.

50. Which property is used to control the visibility of content that overflows an element’s box?

a) overflow
b) clip
c) visibility
d) opacity

Answer: a) overflow
Explanation: The overflow property controls the visibility of content that overflows the element's box. It can have values like hidden, scroll, or auto.

51. What does the z-index property control in CSS?

a) The stacking order of positioned elements
b) The font size of an element
c) The color of an element
d) The position of an element

Answer: a) The stacking order of positioned elements
Explanation: The z-index property controls the stacking order of positioned elements (elements with position other than static).

52. Which CSS property is used to set the text color of an element?

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

Answer: c) color
Explanation: The color property sets the text color of an element.

53. How can you make a link open in a new tab using CSS?

a) a { target: _blank; }
b) a { open: new; }
c) a { display: new-tab; }
d) a { target: blank; }

Answer: d) a { target: blank; }
Explanation: To make a link open in a new tab, use the target="_blank" attribute in HTML, not CSS.

54. Which property is used to control the space between the content and its border in CSS?

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

Answer: a) padding
Explanation: The padding property controls the space between an element's content and its border.

55. How do you make text bold in CSS?

a) font-weight: bold;
b) text-weight: bold;
c) font-style: bold;
d) text-transform: bold;

Answer: a) font-weight: bold;
Explanation: The font-weight property is used to set the thickness of the font, and bold makes the text bold.

Wednesday, 11 December 2024

Lecture Notes Of Class 9: Hover, Focus, and State Variants

No comments:

Post a Comment

Search This Blog

Labels

Report Abuse

About Me

Popular Posts

Subscribe Us

Blog Archive

Facebook

Random Posts

Random Posts

Recent Posts