CSS Coding Snippets
(level 1)
1. CSS Selectors
Which CSS selector is used to select elements by their class name?
.example {
color: red;
}
A) .example
B) #example
C) example
D) *example
Answer: A) .example
2. CSS Font Size
Which of the following sets the font size of a paragraph to 16 pixels?
p{
font-size: 16px;
}
A) font: 16px;
B) font-size: 16px;
C) text-size: 16px;
D) size: 16px;
Answer: B) font-size: 16px;
3. Background Color
How do you set a background color of blue for a div element?
div {
background-color: blue;
}
A) color: blue;
B) bgcolor: blue;
C) background: blue;
D) background-color: blue;
Answer: D) background-color: blue;
4. Text Alignment
Which CSS property is used to center-align text within an element?
h1 {
text-align: center;
}
A) align: center;
B) text-align: center;
C) text-align: middle;
D) align-text: center;
Answer: B) text-align: center;
5. Margin Property
How do you set the top margin of an element to 20 pixels?
div {
margin-top: 20px;
}
A) margin: 20px;
B) padding: 20px;
C) margin-top: 20px;
D) top-margin: 20px;
Answer: C) margin-top: 20px;
6. Border Property
Which of the following correctly adds a solid, 2-pixel thick, black border around a div?
div {
border: 2px solid black;
}
A) border: solid 2px black;
B) border: 2px black solid;
C) border: 2px solid black;
D) border: black 2px solid;
Answer: C) border: 2px solid black;
7. CSS Color Property
How do you change the text color of an h2 element to green?
h2 {
color: green;
}
A) font-color: green; B) text-color: green; C) color: green; D) h2-color: green;
Answer: C) color: green;
8. Width Property
Which of the following sets the width of a div to 50% of its parent container?
div {
width: 50%;
}
A) width: 50;
B) width: 50px;
C) width: 50%;
D) width: 50vh;
Answer: C) width: 50%;
9. Padding Property
How do you add 10 pixels of padding to all sides of a div element?
div {
padding: 10px;
}
A) padding: 10px 0 10px 0;
B) padding: 10px;
C) padding: 10px 10px;
D) padding: 0 10px 0 10px;
Answer: B) padding: 10px;
10. Hover Effect
Which CSS pseudo-class is used to change the style of an element when the user hovers over
it?
a:hover {
color: red;
}
A) :hover
B) :focus
C) :active
D) :selected
Answer: A) :hover
11. Text Decoration
How do you remove the underline from an anchor (<a>) tag?
a{
text-decoration: none;
}
A) underline: none;
B) text-style: none;
C) text-decoration: none;
D) no-underline: true;
Answer: C) text-decoration: none;
12. CSS Comments
Which of the following is the correct syntax for writing a comment in CSS?
/* This is a comment */
A) // This is a comment
B) <!-- This is a comment -->
C) /* This is a comment */
D) * This is a comment *
Answer: C) /* This is a comment */
13. Font Family
Which property is used to change the font of an element to Arial?
p{
font-family: Arial, sans-serif;
}
A) font: Arial;
B) font-family: Arial, sans-serif;
C) text-font: Arial, sans-serif;
D) font-type: Arial;
Answer: B) font-family: Arial, sans-serif;
14. Float Property
How do you float an image to the right of a paragraph?
img {
float: right;
}
A) align: right;
B) float: right;
C) position: right;
D) align-image: right;
Answer: B) float: right;
15. Background Image
Which CSS property is used to set a background image for a div element?
css
div {
background-image: url('[Link]');
}
A) background: [Link];
B) background-image: [Link];
C) background-image: url('[Link]');
D) bg-image: url('[Link]');
Answer: C) background-image: url('[Link]');
16. Display Property
Which property would you use to hide an element in CSS?
div {
display: none;
}
A) visibility: hidden;
B) display: none;
C) hide: true;
D) opacity: 0;
Answer: B) display: none;
17. Opacity Property
Which CSS property is used to make an element transparent?
div {
opacity: 0.5;
}
A) opacity: 0.5;
B) visibility: 0.5;
C) alpha: 0.5;
D) transparency: 0.5;
Answer: A) opacity: 0.5;
18. Box Shadow
How do you add a shadow to a div element?
div {
box-shadow: 2px 2px 5px grey;
}
A) shadow: 2px 2px 5px grey;
B) box-shadow: 2px 2px 5px grey;
C) div-shadow: 2px 2px 5px grey;
D) text-shadow: 2px 2px 5px grey;
Answer: B) box-shadow: 2px 2px 5px grey;
19. Position Property
Which CSS property positions an element relative to its normal position?
div {
position: relative;
top: 20px;
}
A) relative-position: 20px;
B) position: relative;
C) top: 20px;
D) relative: top 20px;
Answer: B) position: relative;
20. CSS Linking
How do you link a CSS file to an HTML document?
html
<link rel="stylesheet" href="[Link]">
A) <css src="[Link]">
B) <style src="[Link]">
C) <link src="[Link]">
D) <link rel="stylesheet" href="[Link]">
Answer: D) <link rel="stylesheet" href="[Link]">
CSS Coding Snippets
(level 2)
1. CSS Flexbox
Which CSS property is used to align items along the main axis in a flex container?
.container {
display: flex;
justify-content: center;
}
A) align-items: center;
B) justify-content: center;
C) align-content: center;
D) align-self: center;
Answer: B) justify-content: center;
2. CSS Grid
How do you define a 3-column grid layout using CSS Grid?
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
A) grid-columns: 3 1fr;
B) grid-template-columns: repeat(3, 1fr);
C) grid-column: 1 / 3;
D) columns: 3 1fr;
Answer: B) grid-template-columns: repeat(3, 1fr);
3. CSS Transitions
Which CSS property is used to apply a transition effect when changing properties like width?
div {
width: 100px;
transition: width 0.5s ease-in-out;
}
A) animation: width 0.5s ease-in-out;
B) transition: width 0.5s ease-in-out;
C) transform: width 0.5s ease-in-out;
D) effect: width 0.5s ease-in-out;
Answer: B) transition: width 0.5s ease-in-out;
4. CSS Variables
How do you declare and use a CSS custom property (variable)?
:root {
--main-color: #3498db;
}
p{
color: var(--main-color);
}
A) --main-color: #3498db;
B) color: $main-color;
C) color: var(main-color);
D) color: var(--main-color);
Answer: D) color: var(--main-color);
5. CSS Pseudo-elements
Which CSS selector is used to add content before an element using a pseudo-element?
p::before {
content: 'Note: ';
color: red;
}
A) p:before
B) p::before
C) p::first-line
D) p:after
Answer: B) p::before
6. CSS Media Queries
How do you write a media query that applies styles for devices with a screen width of 768
pixels or less?
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}
A) @media (min-width: 768px)
B) @media screen and (max-width: 768px)
C) @media (max-width: 768px)
D) @media (min-width: 768px)
Answer: C) @media (max-width: 768px)
7. CSS Positioning
Which property positions an element at the top left of the viewport, even when the page is
scrolled?
div {
position: fixed;
top: 0;
left: 0;
}
A) position: absolute;
B) position: relative;
C) position: sticky;
D) position: fixed;
Answer: D) position: fixed;
8. CSS Transform
How do you scale an element to twice its size?
div {
transform: scale(2);
}
A) transform: scale(2x);
B) transform: scale(2);
C) transform: scaleX(2);
D) transform: scaleY(2);
Answer: B) transform: scale(2);
9. CSS Flexbox: Aligning Items
How do you vertically center an item within a flex container?
.container {
display: flex;
align-items: center;
}
A) justify-content: center;
B) align-content: center;
C) align-items: center;
D) align-self: center;
Answer: C) align-items: center;
10. CSS Z-Index
Which CSS property determines the stack order of an element?
div {
position: absolute;
z-index: 10;
}
A) position
B) z-index
C) order
D) stack-order
Answer: B) z-index
11. CSS Box Model
How do you include padding and border in an element's total width and height?
div {
box-sizing: border-box;
}
A) box-sizing: padding-box;
B) box-sizing: content-box;
C) box-sizing: border-box;
D) box-sizing: box-border;
Answer: C) box-sizing: border-box;
12. CSS Overflow
Which CSS property is used to add scrollbars when the content of an element is too big to fit?
div {
overflow: auto;
}
A) scroll: auto;
B) overflow: scroll;
C) overflow: auto;
D) overflow: visible;
Answer: C) overflow: auto;
13. CSS Text Shadow
How do you apply a shadow effect to text in CSS?
h1 {
text-shadow: 2px 2px 5px grey;
}
A) box-shadow: 2px 2px 5px grey;
B) text-shadow: 2px 2px 5px grey;
C) shadow: 2px 2px 5px grey;
D) text-shadow: grey 2px 2px 5px;
Answer: B) text-shadow: 2px 2px 5px grey;
14. CSS Gradients
How do you create a linear gradient that goes from red to blue?
div {
background: linear-gradient(to right, red, blue);
}
A) background: linear-gradient(to right, red, blue);
B) background: gradient(linear, red, blue);
C) background: linear-gradient(red, blue);
D) background: gradient(to right, red, blue);
Answer: A) background: linear-gradient(to right, red, blue);
15. CSS Pseudo-classes
Which CSS pseudo-class targets the first child element within its parent?
p:first-child {
font-weight: bold;
}
A) p:first-of-type
B) p:only-child
C) p:first-child
D) p:first
Answer: C) p:first-child
16. CSS Transforms: Rotate
How do you rotate an element by 45 degrees?
div {
transform: rotate(45deg);
}
A) transform: rotate(45);
B) transform: rotate(45px);
C) transform: rotate(45deg);
D) rotate: 45deg;
Answer: C) transform: rotate(45deg);
17. CSS Flexbox: Wrapping
How do you allow flex items to wrap onto multiple lines?
.container {
display: flex;
flex-wrap: wrap;
}
A) flex-wrap: wrap;
B) flex-direction: row wrap;
C) flex-wrap: nowrap;
D) wrap: flex;
Answer: A) flex-wrap: wrap;
18. CSS Background-size
How do you ensure a background image covers the entire element without stretching?
css
div {
background-size: cover;
}
A) background-size: contain;
B) background-size: cover;
C) background-size: fill;
D) background-size: stretch;
Answer: B) background-size: cover;
19. CSS Clip-path
Which CSS property is used to clip an element to a polygon shape?
div {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
A) clip: polygon(50% 0%, 0% 100%, 100% 100%);
B) clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
C) clip-area: polygon(50% 0%, 0% 100%, 100% 100%);
D) mask: polygon(50% 0%, 0% 100%, 100% 100%);
Answer: B) clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
20. CSS Responsive Design
Which CSS technique is used to make a website layout responsive?
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
A) responsive-width
B) media-queries
C) flexbox
D) fluid layout
Answer: D) fluid layout