Top 40 CSS & CSS3 Interview Questions

Top 40 CSS & CSS3 Interview Questions: Here are the top interview questions of CSS & CSS3. Be prepared for the interview. You can download the entire questions in a pdf format. so guys All the best for your interview.

1) What is CSS?

CSS stands for Cascading Style Sheet. It is a popular styling language which is used with HTML to design websites. It can also be used with any XML documents including plain XML, SVG, and XUL.


2) What is the origin of CSS?

SGML (Standard Generalized Markup Language) is the origin of CSS. It is a language that defines markup languages.


3) What are the different variations of CSS?

Following are the different variations of CSS:

  • CSS1
  • CSS2
  • CSS2.1
  • CSS3
  • CSS4

You might like: Top 32 Node.js Interview Questions And Answers


4) How can you integrate CSS on a web page?

There are three methods to integrate CSS on web pages.

  1. Inline method – It is used to insert style sheets in HTML document
  2. Embedded/Internal method – It is used to add a unique style to a single document
  3. Linked/Imported/External method – It is used when you want to make changes on multiple pages.

5) What are the advantages of CSS?

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

6) What are CSS frameworks?

It is a pre-planned library, which allows easier and more standards-compliant webpage styling, using CSS language.

7) How block elements can be centered with CSS1?

Top 40 CSS & CSS3 Interview Questions Block level elements can be centered by:

The margin-left and margin-right properties can be set to some explicit value:

 BODY {
 
width: 40em;
 
background: fluorescent;
 
}
 
P {
 
width: 30em;
 
margin-right: auto;
 
margin-left: auto
 
} 

In this case, the left and right margins will be each, five ems wide since they split up the ten ems left over from (40em-30em). It was unnecessary for setting up an explicit width for the BODY element; it was done here for simplicity.

8) Who maintains the CSS specifications?

World Wide Web Consortium maintains the CSS specifications.

9) In how many ways can a CSS be integrated as a web page?

CSS can be integrated in three ways:

  • Inline: Style attribute can be used to have CSS applied HTML elements.
  • Embedded: The Head element can have a Style element within which the code can be placed.
  • Linked/ Imported: CSS can be placed in an external file and linked via a link element.

10) What benefits and demerits do External Style Sheets have? 

Benefits:

  • One file can be used to control multiple documents having different styles.
  • Multiple HTML elements can have many documents, which can have classes.
  • To group styles in composite situations, methods as selector and grouping are used.

Demerits:

  • The extra download is needed to import documents having style information.
  • To render the document, the external style sheet should be loaded.
  • Not practical for small style definitions.

11) What are CSS counters?

CSS counters are variables which can be incremented by rules of CSS that inspector track how many times the variable has been used.

12) What is CSS specificity?

CSS specificity is a score or rank that decides which style declaration has to be used to an element.

(*) this universal selector has low specificity while ID selectors have high specificity.

There are four categories in CSS which authorized the specificity level of the selector.

  • Inline style
  • IDs
  • Classes, Attributes, and pseudo-classes.
  • Elements and pseudo elements.

13) How can we calculate specificity?

Top 40 CSS & CSS3 Interview Questions: To calculate specificity we will start with 0, then we have to add 1000 for each ID and we have to add 10 to the attributes, classes or pseudo-classes with each element name or pseudo-element and later we have to add 1 to them.

Example:

h2
             #content h2
            <div id=”content”>
              <h2 style=”color:#FF0000”>heading</h2>
            </div>

14) How do we make a rounded corner by using CSS?

We can make a rounded corner by using the property “border-radius”. We can apply this property to any element.

Example:

<html>
<head>

<style>
#rcorners1 {
    border-radius: 25px;
    background: #715751;
    padding: 20px;
    width: 200px;
    height: 150px;   
}

</style>
</head>

<body>
<h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
</body>

</html>

15) How will you add border images to an HTML element?

We can set the image to be used as the border image alongside an element by using the property of CSS “border-image”.

Example:

#borderimg {
    border: 15px solid transparent;
    padding: 20px;
    border-image: url(border.png) 30 round;
}

16) What is the use of % unit?

It is used for defining percentage values.


17) Name the property used to specify the background color of an element.

The background-color property is used to specify the background color of the element. For example:

  1. <style>    
  2. h2,p{    
  3.     background-color: #b0d4de;    
  4. }    
  5. </style>  
  6.    

18) Name the property for controlling the image repetition of the background.

The background-repeat property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically.

  1. <style>    
  2. body {    
  3. background-image: url(“paper1.gif”);    
  4. margin-left:100px;    
  5. }    
  6. </style>  
  7.    

19) Name the property for controlling the image position in the background.

The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage.

You can set the following positions:

  1. center
  2. top
  3. bottom
  4. left
  5. right
  1. background: white url(‘good-morning.jpg’);  
  2. background-repeat: no-repeat;  
  3. background-attachment: fixed;  
  4. background-position: center;   

20) Name the property for controlling the image scroll in the background.

Top 40 CSS & CSS3 Interview Questions The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in the browser window. If you set fixed the background image, then the image not moves during scrolling in the browser. Let’s take an example with the fixed background image.

  1. background: white url(‘bbb.gif’);  
  2. background-repeat: no-repeat;  
  3. background-attachment: fixed;  

21) What is the usage of Class selector?

Selectors that are unique to a specific style, are called CLASS selectors. Declaration of style and association with HTML can be made through this. Syntax:

 Classname
it can be A-Z, a-z or digits.
.top {font: 14em ;}, class selector
<Body class= “top”> this class is associated with element </body> 

22) Differentiate Class selector from ID selector?

While an overall block is given to class selector, the ID selector prefers only a single element differing from other elements. In other words, ID is uniques while classes are not. It is possible that an element has both class and ID.

23) Can more than one declaration be added in CSS?

Yes, it can be achieved by using a semicolon.

24) What is Pseudo-elements ?

Pseudo-elements are used to add special effects to some selectors.  CSS is used to apply styles in HTML mark-up. In some cases when extra mark-up or styling is not possible for the document, then there is a feature available in CSS known as pseudo-elements. It will allow extra mark-up to the document without disturbing the actual document.

25) How to overrule underlining Hyperlinks?

Control statements and external style sheets are used to overrule underlining Hyperlinks.

 
text-decoration: none;
 
}
 
<B href="career.html" style="text-decoration: none">link text</B> 

26) Write all the position states used in CSS.

In CSS, there are four position states as stated below:

  • Static(default)
  • Relative
  • Fixed
  • absolute

27) What are navigation bars in CSS?

By using navigation bars we can make an ordinary HTML page into a user-specific and more dynamic web page.

Basically, it is a list of links, hence use of <ul> and <li> elements makes the perfect sense.

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

28) What are the differences between relative and absolute in CSS?

The main difference between relative and absolute is that “relative” is used for the same tag in CSS and it means that if we write the left:10px then the padding will shift to 10px in the left while absolute is totally relative to the non-static parent.

It means if we write left:10px then the result will be 10px far from the left edge of the parent element.

29) Define ‘important’ declarations used in CSS.

Important declarations are defined as that declaration which is having more importance than the normal declaration.

While executing, these declarations override the declaration which is having less importance.

Example, if there are two users Having important declaration then one of the declarations will override the declaration of another user.

For Example:

Body {background: #FF00FF !important; color: blue}

In this body background has more weight than the color.

30) Define different cascading methods that can be used inside the cascading order.

Cascading order is itself a sorting method that allows many other different sorting methods:

#1) Sort by origin: There are some rules which can provide the alternate way which can be defined as:

  • The normal weight of style sheet of a particular provider will be overridden by the increased weight of the user’s style sheet.
  • Stylesheet rules of a particular user will be overridden by the normal width of the provider’s style sheet.

#2) Sort by selector’s specificity: Less specific selector is been overridden by the more specific selector.

Example, A Contextual selector is less specific in comparison to the ID selector which is a more specific one and with that contextual selector is been overridden by the ID selector.

#3) Sort by order specified: This comes in the scenario when the two selectors are the same in weight and the other properties than the specification which will be seen for overriding.

Example:

All other styles will be seen overridden if the style attribute is used for inline style.

And also if the link element is used for external style, then it will override the imported style.

31) What is the purpose of the z-index and how is it used?

Top 40 CSS & CSS3 Interview Questions The z-index helps to specify the stack order of positioned elements that may overlap one another. The z-index default value is zero and can take on either a positive or negative number.

An element with a higher z-index is always stacked above than a lower index.

Z-Index can take the following values:

  • Auto: Sets the stack order equal to its parents.
  • Number: Orders the stack order.
  • Initial: Sets this property to its default value (0).
  • Inherit: Inherits this property from its parent element.

32) Explain the difference between visibility: hidden and display: none?

visibility: hidden hides the element, but it occupies space and affects the layout of the document.

 <!DOCTYPE html>  
<html>  
<head>  
<style>  
h1.vis {  
    visibility: visible;  
}  
  
h1.hid {  
    visibility: hidden;  
}  
</style>  
</head>  
<body>  
<h1 class="vis">It is visible</h1>  
<h1 class="hid">It is hidden</h1>  
  
<p>Note - Second heading is hidden, but it still occupy space.</p>  
</body>  
</html>  
        

display: none also hides the element but not occupy space. It will not affect the layout of the document.

 <!DOCTYPE html>  
<html>  
<head>  
<style>  
h1.vis {  
    display: block;  
}  
  
h1.hid {  
     display: none;  
}  
</style>  
</head>  
<body>  
<h1 class="vis">It is visible</h1>  
<h1 class="hid">It is hidden</h1>  
  
<p>Note - Second heading is hidden and not occupy space.</p>  
</body>  
</html>   

33) What do you understand by W3C?

W3C stands for World Wide Web Consortium. Its purpose is to deliver the information of the World Wide Web. It also develops rules and guidelines for the Web.


34) What is tweening?

It is the process of generating intermediate frames between two images.

It gives the impression that the first image has smoothly evolved into the second one.

It is an important method used in all types of animations.

In CSS3, Transforms (matrix, translate, rotate, scale) module can be used to achieve tweening.


35) What is the difference between CSS2 and CSS3?

The main difference between CSS2 and CSS3 is that CSS3 is divided into different sections which are also known as modules. Unlike CSS2, CSS3 modules are supported by many browsers.

Apart from that, CSS3 contains new General Sibling Combinators which is responsible for matching the sibling elements with the given elements.

36) How does Z index function?

Overlapping may occur while using CSS for positioning HTML elements. Z index helps in specifying the overlapping element. It is a number which can be positive or negative, the default value being zero.

37) What is graceful degradation?

Top 40 CSS & CSS3 Interview Questions In case the component fails, it will continue to work properly in the presence of graceful degradation. The latest browser application is used when a webpage is designed. As it is not available to everyone, there is basic functionality, which enables its users to a wider audience. In case the image is unavailable for viewing, the text is shown with the alt tag.

38) What is progressive enhancement?

It’s an alternative to graceful degradation, which concentrates on the matter of the web. The functionality is same, but it provides an extra edge to users having the latest bandwidth. It has been into prominent use recently with mobile internet connections expanding their base.

39) How can backward compatibility be designed in CSS?

HTML sheet methods is collaborated with CSS and used accordingly.

40) How can the gap under the image be removed?

As images being inline elements are treated the same as texts, so there is a gap left, which can be   removed by:

 img { display: block ; } 

Top 40 CSS & CSS3 Interview Questions & Answers with PDF Download