CSS3 Interview Questions and Answers

by Siyamala B, on Apr 3, 2018 1:07:51 PM

Q1. What is CSS?

Ans: The full form of CSS is Cascading Style Sheets. It is a styling language which is simple enough for HTML elements. It is popular in web designing, and its application is common in XHTML also.

Q2. What is the use of CSS3 sprites?

Ans: In a web page we are using many images to decorate. All these image takes time to load individually. This old fashion of image loading increases http request to server. It hampers the performance of web page. To resolve this CSS3 comes with sprites. It helps to keep many images in a single file. Due this it decreases the http request to the server. Gives better performance and taking less server time.

Q3. Which property is use to give rounded corners in CSS3?

Ans: The 'border-radius' property is used to give rounded corners in CSS3. The rounded corners can be given to any element using this property.
Example:

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners {
border-radius: 15px;
border: 2px solid #000000;
background: #00FFFF;
padding: 20px;
width: 150px;
height: 50px;
}
</style>
</head>
<body>
<p>Rounded corners for an element with a background color and border:</p>
<p id="rcorners">Rounded corners!</p>
</body>
</html>

Q4. What is the origin of CSS?

Ans: Standard Generalized Markup Language marked the beginning of style sheets in 1980s.

Q5. Tell me some New features in CSS3.

Ans: CSS3 is the 3rd revision of CSS. Compare to CSS2 CSS3 introduced the following new features.
Calculating value with calc()
In CSS2 to set dynamic width we use JavaScript or Jquery. This problem is resolved in CSS3. CSS3 introduced calc() function. For an example if you want to set a div (#container) with 100px less then the 100% width then you can do the following using CSS3 calc method.
#container {
/* Calculate the width Dynamically */
width: calc(100% - 100px);
margin: 0 auto;
}

Q6. What is the syntax for adding multiple background images in CSS3?

Ans: CSS3 allows you to set multiple background images by calling local stored images.
Following syntax is used for adding multiple background images:

Syntax:background-image: url(img1.gif), url(img2.gif);

Example:
<html>
<head>
<style>
#bg {
background-image: url("/home/careerride8/careerride8/CSS3-Example/images/background.jpg"), url("/home/careerride8/careerride8/CSS3-Example/images/back-ground.jpg");
background-position: right bottom, left top;
background-repeat: no-repeat;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="bg">
<h1>Hello World!</h1>
</div>
</body>
</html>

Output: Hello World.

Q7. What are the different variations of CSS ?

Ans: The variations for CSS are:

CSS 1
CSS 2
CSS 2.1
CSS 3
CSS 4

Q8. What is Grouping in CSS3?

Ans: About CSS3 Grouping let us discuss an example to make you more clear on this. Some time in our page we have h1, h2, h3 .. h5, h6 tags. If I want to apply font color red to all this tags. Here grouping comes. Let you watch the below example. It will clear your understanding.
h1, h2, h3 {color: red;}

Q9. What do you know about word wrapping in CSS3?

Ans: In CSS3, word wrapping means breaking the long words into next line.
Syntax: word-wrap: break-word;

Example:
<!DOCTYPE html>
<html>
<head>
<style>
#wordwrap {
width: 10em;
border: 1px solid #0000ff;
word-wrap: break-word;
}
</style>
</head>
<body>
<p id="wordwrap"> Delhi has a serious problem when it comes to pollution, withpreviousDiwalisturninginto a nightmare for residents.</p>
</body>
</html>

Q10. What are the limitations of CSS ?

Ans: Limitations are:

Ascending by selectors is not possible
Limitations of vertical control
No expressions
No column declaration
Pseudo-class not controlled by dynamic behavior
Rules, styles, targeting specific text not possible

Q11. What are Child Selectors in CSS?

Ans: In CSS3 Child Selector used to to apply styles upon the child elements of a parent elements. Lets for an example I have a ul tag inside a paragraph. Here ul is the child element of paragraph. To apply CSS styles we can use the following CSS3 syntax:

p > ul { font-size:20px; }

Q12. What is the use of Media Queries in CSS3?

Ans: Media Queries use the @media rule to include a block of CSS properties only if a certain condition is true.

Example:
@media screen and (max-width: 480px)
{
body
{
background-color: green;
}
}
If the browser window is smaller than 480px, the background color will change to green

Q13. What are the advantages of CSS ?

Ans: Advantages are:

Bandwidth
Site-wide consistency
Page reformatting
Accessibility
Content separated from presentation

Q14. What is the syntax to avoid repetitive background images using CSS?

Ans: To avoid repetitive background images, you can use "background-repeat" property with no-repeat value.
"background-repeat" property has two values: repeat and no-repeat.
By default background-repeat property has repeat value.

Example:
<html>
<head>
<style>
#bg{
background-image: url("/home/careerride8/careerride8/CSS3-Example/images/background.jpg");
background-repeat: no-repeat;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="bg">
<h1>Hello World!</h1>
</body>
</html>

Q15. Give some examples of CSS Pseudo-Class.

Ans: Using CSS pseudo Class we can add special effects to some Selectors.
Example of Anchor Pseudo Class
/* style for unvisited link */
a:link { color: #FF0000; font-size:12px; }
/* style for visited link */
a:visited { color: #00FF00; font-size:14px; }
/* on mouse over link */
a:hover { color: #FF00FF; font-size:16px; }
/* selected link */
a:active { color: #0000FF; font-size:12px; }
Example of First Child Pseudo Class
p:first-child { color: #0000FF; }

100+ Popular IT Courses to Learn.

15+ Categories. 500+ IT Courses to Learn.

Leadership Program