Top 10 questions CSS3

Here are ten commonly asked questions about CSS3:

1. What is CSS3?

• CSS3 is the third and latest version of the Cascading Style Sheets specification, introducing new features like gradients, transitions, animations, and more to help in styling web content.

2. What are the differences between CSS and CSS3?

• CSS3 is an evolution of the earlier CSS standards. The primary difference is that CSS3 is split into different “modules,” each describing separate functionalities. CSS3 also introduces new features, selectors, and properties not available in earlier versions.

3. How do you create rounded corners in CSS3?

• You can create rounded corners using the border-radius property.
  css

.rounded { border-radius: 10px; }

4. What are CSS3 transitions and how are they different from animations?

• CSS3 transitions allow for smooth changes on property values over a duration. Animations, on the other hand, give more control by allowing keyframe-based animations.

/* Transition */ 
.box:hover { transition: background-color 0.3s ease-in; background-color: red; } 
/* Animation */ 
@keyframes slide { from { transform: translateY(0); } to { transform: translateY(30px); } } 
.box { animation: slide 2s infinite; }

5. What is the CSS3 box-shadow property?

.shadow { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); }

6. How can you apply multiple background images in CSS3?

• CSS3 allows multiple backgrounds to be applied on a single element separated by commas.

.multiple-backgrounds { background-image: url(image1.jpg), url(image2.png); }

• 7. What are CSS3 gradients?

• Gradients are a smooth transition between two or more specified colors. CSS3 introduced linear and radial gradients.

.linear-gradient { background: linear-gradient(red, blue); }

8. How can you achieve text effects like text shadows in CSS3?

• The text-shadow property is used for this purpose.

.text-effect { text-shadow: 2px 2px 4px gray; }

9. What is the @font-face rule in CSS3?

• @font-face allows web designers to use non-web-safe fonts by defining and loading a font resource.

@font-face { font-family: "MyFont"; src: url("MyFont.woff2") format("woff2"); }

10. What are media queries in CSS3?

• Media queries are a feature in CSS3 that allows content rendering to adapt to conditions such as screen resolution (e.g., smartphone vs. computer).
  

These questions are centered around the newer features of CSS3. Understanding and mastering these features will give you a significant edge in modern web design and development.

@media only screen and (max-width: 600px) { body { background-color: lightblue; } }