Properties 1

Question 1

Write CSS to change the mouse cursor to a hand pointer when hovering over an element with class ‘pointer’.

Answer 1

“.pointer { cursor: pointer; } - cursor property changes mouse cursor shape - pointer value creates hand cursor - Commonly used for clickable elements”

Question 2

How do you create rounded corners on an element using CSS?

Answer 2

Use border-radius property. Example: .box { border-radius: 15px; } - Creates rounded corners with 15px radius - Higher values = more rounded corners - Can specify different values for each corner

Question 3

Write CSS to set an element’s width to 300px and height to 200px.

Answer 3

”“.container { width: 300px; height: 200px; } - width property controls horizontal size - height property controls vertical size - Values can be in px

Question 4

Create a CSS rule for a paragraph with a 2px solid black border and 10px padding.

Answer 4

p { border: 2px solid black; padding: 10px; } - border shorthand: width style color - padding adds space inside element around content - Creates breathing room within the border

Question 5

What are the four ways to specify border-color values and give examples?

Answer 5

1. All sides same: border-color: red; 2. Top/bottom, left/right: border-color: red green; 3. Top, sides, bottom: border-color: red green blue; 4. Individual sides: border-color: red blue green orange; (top, right, bottom, left)

Question 6

Write CSS for an element with different border styles on each side.

Answer 6

”“.mixed-box { border-width: 4px; border-style: solid dashed dotted double; border-color: black; } - solid (top)

Question 7

Create CSS for an element with different border widths: 8px top, 4px right, 2px bottom, 6px left.

Answer 7

”“.four-widths { border-style: solid; border-width: 8px 4px 2px 6px; border-color: orange; } - Values go clockwise: top

Question 8

Write CSS for an element with margins: 50px top, 30px right, 20px bottom, 10px left.

Answer 8

”“.four-margins { margin: 50px 30px 20px 10px; } - Shorthand follows clockwise pattern - Individual properties: margin-top

Question 9

What are the different font-weight values and write examples for normal, bold, light, and extra bold text?

Answer 9

”“.normal-text { font-weight: normal; } /* or 400 / .bold-text { font-weight: bold; } / or 700 */ .light-text { font-weight: 300; } .extra-bold-text { font-weight: 900; } - Range: 100-900

Question 10

Create CSS for a semi-transparent green box with white text and 20px padding.

Answer 10

”“.semi-transparent-box { background-color: green; color: white; padding: 20px; opacity: 0.5; } - opacity: 0 = fully transparent

Question 11

Write CSS for smooth transitions on background-color (0.5s) and transform (0.3s) properties.

Answer 11

”“.box { transition: background-color 0.5s ease

Question 12

What’s the syntax for box-shadow and create a shadow 5px right, 10px down, 15px blur, gray color?

Answer 12

Syntax: box-shadow: horizontal-offset vertical-offset blur-radius color; Example: box-shadow: 5px 10px 15px gray; - Positive horizontal = right, negative = left - Positive vertical = down, negative = up

Question 13

How do the offset values work in box-shadow?

Answer 13

Horizontal offset: Positive = shadow moves right, Negative = shadow moves left. Vertical offset: Positive = shadow moves down, Negative = shadow moves up. Example: box-shadow: -5px -5px 10px gray; creates shadow up and left

Question 14

Write CSS to make text color dark green and background color light blue.

Answer 14

h1 { color: darkgreen; } body { background-color: lightblue; } - color property controls text color - background-color controls element’s background - Can use color names, RGB, hex, etc.

Question 15

What’s wrong with this transition CSS and how do you fix it? .box:hover { transition: all 0.3s ease; }

Answer 15

Transition should be on the original element, not the pseudo-class. Fix: .box { transition: all 0.3s ease; } .box:hover { /* changed properties */ } - Transition defines how changes happen, not what changes