Clean • Professional
Ques: How are colors defined in CSS?
Ans: Colors in CSS can be defined in multiple formats, including names, HEX, RGB, RGBA, HSL, and HSLA.
| Type | Example | Description |
|---|---|---|
| Named Colors | color: red; | 147 predefined color names |
| HEX Code | color: #ff0000; | Hexadecimal color value |
| RGB | color: rgb(255, 0, 0); | Red-Green-Blue combination |
| RGBA | color: rgba(255, 0, 0, 0.5); | RGB + Alpha (transparency) |
| HSL | color: hsl(0, 100%, 50%); | Hue, Saturation, Lightness |
| HSLA | color: hsla(0, 100%, 50%, 0.5); | HSL + Alpha transparency |
Example:
h1 {
color: rgb(34, 193, 195);
}
p {
color: hsl(200, 100%, 40%);
}
Ques: What is the difference between RGB and HSL color models?
| Model | Stands For | Based On | Example |
|---|---|---|---|
| RGB | Red, Green, Blue | Light intensity | rgb(255, 100, 50) |
| HSL | Hue, Saturation, Lightness | Color wheel | hsl(10, 70%, 60%) |
Ques: What is opacity in CSS?
Ans: The opacity property sets the transparency level of an element, including its content.
| Value | Meaning |
|---|---|
1 | Fully opaque |
0 | Fully transparent |
0.5 | 50% transparent |
Example:
img {
opacity: 0.6;
}
Ques: What is the difference between opacity and RGBA/HSLA transparency?
| Property | Affects | Applies To | Example |
|---|---|---|---|
| opacity | Entire element (including children) | Whole box | opacity: 0.5; |
| rgba()/hsla() | Only color | Specific property | background-color: rgba(0,0,0,0.5); |
Ques: What is the background-color property used for?
Ans: background-color sets the background color of an element.
Example:
div {
background-color: lightblue;
}
Ques: What is the background-image property?
Ans: background-image allows you to set an image as a background.
Example:
body {
background-image: url("bg.jpg");
}
Ques: What are different background properties in CSS?
| Property | Description |
|---|---|
background-color | Sets background color |
background-image | Sets background image |
background-repeat | Controls image repetition |
background-position | Sets the starting position |
background-size | Scales background image |
background-attachment | Fixed or scroll behavior |
background-origin | Defines where background starts |
background-clip | Controls painting area of background |
Ques: Explain background-repeat property.
| Value | Description |
|---|---|
repeat | Repeats both horizontally & vertically (default) |
repeat-x | Repeats horizontally |
repeat-y | Repeats vertically |
no-repeat | Displays once only |
Example:
div {
background-image: url("pattern.png");
background-repeat: no-repeat;
}
Ques: What does background-size property do?
| Value | Description |
|---|---|
auto | Original size (default) |
cover | Scales to cover the container |
contain | Fits image inside container |
100% 100% | Stretches to exact size |
Example:
div {
background-image: url("banner.jpg");
background-size: cover;
}
Ques: What is background-position in CSS?
Ans: Defines where the background image is placed.
| Example | Meaning |
|---|---|
background-position: top left; | Align top-left |
background-position: center; | Center image |
background-position: 50% 50%; | Centered both ways |
Ques: What is background-attachment used for?
Ans: It determines whether the background image scrolls with the page or stays fixed.
| Value | Description |
|---|---|
scroll | Moves with page scroll |
fixed | Stays fixed in viewport |
local | Scrolls with element content |
Example:
body {
background-image: url("bg.jpg");
background-attachment: fixed;
}
Ques: What are multiple backgrounds in CSS?
Ans: You can add multiple background images by separating them with commas.
Example:
div {
background-image: url("stars.png"), url("moon.png");
background-position: center, right top;
background-repeat: no-repeat, no-repeat;
}
Ques: What are gradients in CSS?
Ans: Gradients are smooth transitions between colors — created using CSS instead of images.
| Type | Function | Example |
|---|---|---|
| Linear Gradient | linear-gradient() | background: linear-gradient(to right, red, yellow); |
| Radial Gradient | radial-gradient() | background: radial-gradient(circle, blue, white); |
| Conic Gradient | conic-gradient() | background: conic-gradient(from 0deg, red, yellow, blue); |
Ques: What is background-clip in CSS?
Ans: Specifies where the background is drawn.
| Value | Description |
|---|---|
border-box | Default; extends under border |
padding-box | Stops at padding edge |
content-box | Only background behind content |
Example:
div {
background: yellow;
background-clip: content-box;
border: 5px solid black;
padding: 20px;
}
Ques: What is mask-image in CSS?
Ans: mask-image hides parts of an element based on image transparency — like a stencil effect.
Example:
div {
mask-image: url("mask.png");
mask-size: cover;
}