CSS3 Interview Questions and Answers
Q1. What is CSS?
Ans: The complete form of CSS is Cascading Style Sheets. It is a styling language which is easy enough for HTML factors. It is famous in net designing, and its application is not unusual in XHTML additionally.
Q2. What is the use of CSS3 sprites?
Ans: In an internet page we're using many photos to beautify. All those photo takes time to load in my view. This antique style of image loading increases http request to server. It hampers the performance of web page. To resolve this CSS3 comes with sprites. It allows to maintain many photos in a unmarried file. Due this it decreases the http request to the server. Gives higher performance and taking much less server time.
Q3. Which assets is find to present rounded corners in CSS3?
Ans: The 'border-radius' property is used to provide rounded corners in CSS3. The rounded corners can be given to any detail using this property.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#rcorners
border-radius: 15px;
border: 2px stable #000000;
historical past: #00FFFF;
padding: 20px;
width: 150px;
height: 50px;
</style>
</head>
<body>
<p>Rounded corners for an element with a background coloration and border:</p>
<p id="rcorners">Rounded corners!</p>
</body>
</html>
Q4. What is the starting place of CSS?
Ans: Standard Generalized Markup Language marked the start of fashion sheets in 1980s.
Q5. Tell me some New capabilities in CSS3.
Ans: CSS3 is the 3rd revision of CSS. Compare to CSS2 CSS3 added the subsequent new features.
Calculating price with calc()
In CSS2 to set dynamic width we use JavaScript or Jquery. This trouble is resolved in CSS3. CSS3 added calc() function. For an example in case you need to set a div (#field) with 100px much less then the one hundred% width then you could do the following the usage of CSS3 calc method.
#box
/* Calculate the width Dynamically */
width: calc(100% - 100px);
margin: 0 vehicle;
Q6. What is the syntax for including more than one history pics in CSS3?
Ans: CSS3 allows you to set more than one heritage pix by means of calling nearby saved images.
Following syntax is used for including a couple of history photos:
Syntax:historical past-picture: url(img1.Gif), url(img2.Gif);
Example:
<html>
<head>
<style>
#bg
historical past-picture: url("/home/careerride8/careerride8/CSS3-Example/pix/heritage.Jpg"), url("/domestic/careerride8/careerride8/CSS3-Example/photos/lower back-floor.Jpg");
heritage-role: right backside, left pinnacle;
background-repeat: no-repeat;
width: 300px;
peak: 300px;
</style>
</head>
<body>
<div id="bg">
<h1>Hello World!</h1>
</div>
</body>
</html>
Output: Hello World.
Q7. What are the distinctive versions of CSS ?
Ans: The versions for CSS are:
CSS 1
CSS 2
CSS 2.1
CSS 3
CSS four
Q8. What is Grouping in CSS3?
Ans: About CSS3 Grouping allow us to talk an instance to make you greater clear in this. Some time in our web page we've h1, h2, h3 .. H5, h6 tags. If I need to apply font colour pink to all this tags. Here grouping comes. Let you watch the underneath example. It will clear your know-how.
H1, h2, h3 colour: crimson;
Q9. What do about phrase wrapping in CSS3?
Ans: In CSS3, phrase wrapping approach breaking the lengthy phrases into subsequent line.
Syntax: word-wrap: break-word;
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#wordwrap
width: 10em;
border: 1px stable #0000ff;
word-wrap: wreck-word;
</style>
</head>
<body>
<p id="wordwrap"> Delhi has a severe hassle when it comes to pollution, withpreviousDiwalisturninginto a nightmare for citizens.</p>
</body>
</html>
Q10. What are the limitations of CSS ?
Ans: Limitations are:
Ascending by way of selectors is not feasible
Limitations of vertical control
No expressions
No column statement
Pseudo-class no longer managed with the aid of dynamic conduct
Rules, patterns, focused on particular textual content now not feasible
Q11. What are Child Selectors in CSS?
Ans: In CSS3 Child Selector used to to apply patterns upon the kid elements of a discern factors. Lets for an example I actually have a ul tag inner a paragraph. Here ul is the kid detail of paragraph. To apply CSS patterns we will use the subsequent CSS3 syntax:
p > ul font-length:20px;
Q12. What is the usage of Media Queries in CSS3?
Ans: Media Queries use the @media rule to include a block of CSS homes handiest if a sure condition is true.
Example:
@media display and (max-width: 480px)
body
historical past-color: green;
If the browser window is smaller than 480px, the history color will alternate 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 history photographs the use of CSS?
Ans: To avoid repetitive history pix, you can use "historical past-repeat" property with out a-repeat fee.
"heritage-repeat" belongings has values: repeat and no-repeat.
By default heritage-repeat property has repeat price.
Example:
<html>
<head>
<style>
#bg
history-image: url("/home/careerride8/careerride8/CSS3-Example/snap shots/historical past.Jpg");
heritage-repeat: no-repeat;
width: 300px;
peak: 300px;
</style>
</head>
<body>
<div id="bg">
<h1>Hello World!</h1>
</body>
</html>
Q15. Give a few examples of CSS Pseudo-Class.
Ans: Using CSS pseudo Class we will upload special effects to some Selectors.
Example of Anchor Pseudo Class
/* style for unvisited link */
a:link color: #FF0000; font-length:12px;
/* style for visited link */
a:visited colour: #00FF00; font-size:14px;
/* on mouse over hyperlink */
a:hover shade: #FF00FF; font-length:16px;
/* decided on hyperlink */
a:lively coloration: #0000FF; font-size:12px;
Example of First Child Pseudo Class
p:first-baby colour: #0000FF;
