CSS Interview Questions and Answers

by

You have found the best collection of CSS Interview Questions and answers. Here I have provided all the questions according to my working experience. I have seen that most of the interviewers asked me these types of questions. So, These are very helpful for freshers as well as experienced web developers/designers.

In this tutorial, All the questions are explained with an example & speaking language. So, there are easy to understand. Once you read these complete tutorials. you will definitely qualify for the interview and will get a respected job in a reputed company.

css interview questions and answers

CSS Interview Questions And Answers for Freshers & Experienced

I have shared the top 70 CSS Interview Questions and Answers that can help you to raise your confidence level in the interview. These are divided into three categories and explained from basic to advanced levels. So, You must prepare all the given questions.

Read Also –

JavaScript Interview Questions and Answers

HTML Interview Questions and Answers 

Most Important CSS Interview Questions

This category is the collection of the most important CSS Interview Questions and answers with examples. It is more necessary for beginners & experienced developers.

1. What is CSS?

CSS is the short form of the Cascading Style Sheet. 

If we create a website using HTML then we will also have to use CSS to make it user-friendly & attractive. So, It is the most popular styling language.

The CSS has the following features –

  • CSS is used to customize the design, layouts, view, the structure of an HTML web page.
  • CSS can create a responsive web page that can adjust different types of device screens.
  • Even CSS can change the default HTML element properties like font size, text color, font style, background,  position, margin & padding, width & height so on.

2. What is the difference between CSS & CSS3

The maximum features of CSS are similar to CSS3. But some new features are added to CSS3. Lets us know some of the major differences between CSS and CSS3 through the following points –

CSS –

  • CSS is the older version and it does create a responsive design.
  • It is not compatible with css3. But Its provided features were updated in css3 to work properly.
  • It does not have a property to round border corner & set gradient background.
  • Even It does not have animation & text effect features.

CSS3 –

  • CSS3 is the latest version and it can create a responsive design.
  • It is compatible with CSS. Even It did not remove any CSS features. but It makes better & faster by adding some additional properties.
  • It has a property to round border corner & set gradient background.
  • Even It has animation & text effect features.

3. How to use CSS with HTML

CSS is divided into three categories to use with HTML –

  • Inline CSS
  • Internal CSS
  • External CSS

Inline CSS –

In the case of Inline CSS, We have to use CSS style directly within an opening HTML table.

Syntax –

<opentag style="property1:value1;property2:value2">

Example – 

<p style="color:red;font-size:15px;font-weight:bold">This is paragraph</p>

Internal CSS –

In the case of inline CSS, We have to use CSS style in the particular web page. Its code is written within <style></style> in the head section.

Syntax –

<style>
selector{
 property1:value1;
 property2:value2;
 property3:value3;
 
}
</style>

Example –

<style>
p{
 color:red;
 font-size:15px;
 font-weight:bold;
}
</style>

External CSS –

In the case of external CSS, We have to write CSS code without <style></style> in the external file. This file must be saved with .css  extension and included in the HTML file using the following tag. This tag should be written in the head section.

<link rel="stylesheet" type="text/css" href="file path with extension">

Example –

File Name – style.css

p{ 
 color:red; 
 font-size:15px; 
 font-weight:bold;
 }

Include it –

<link rel="stylesheet" type="text/css" href="style.css">

 

4. What is a CSS selector?

CSS selector selects an HTML element to add different types of style.

CSS selector may represent the tag name, class, id & another attribute.

Example –

Suppose that we have to add some style to the paragraph –

p{
font-size:20px;
color:red;
border:1px solid red;
}

Here p is the selector

5. What are the types of selector

CSS has the following common selectors that are mostly used to design web page –

  • Universal Selector
  • Element Selector
  • Class Selector
  • ID Selector
  • Grouping Selector
  • Attribute Selector
  • Combinator Selector
  • Pseudo-class Selector
  • Pseudo-element Selector

Universal Selector –

It selects all the HTML elements that present on the web page.

It is represented by an asterisk *

Example –

Suppose that some HTML elements like p, h1, h2, span, body, div, table so on. We can design all these elements using the universal selector.

*{
 background:red;
 border:5px solid black;
 padding:5px;
 margin:10px;
}

Element Selector –

This sector selects an HTML element with its element name.

Example – 

Suppose that we have to add some style to the paragraphs. As we know the element name of the paragraph is p. So, p would be the element selector.

P{
color:re;
border:2px solid green;
font-weight:bold;
}

Class Selector –

This selector  selects an HTML element with the value of its class attribute.

The Value of class attribute always comes with dot . symbol.

Example –

Suppose that a paragraph has a class name para like <p class="para"> This is text</p>

.para{
font-size:20;
color:red;
border:2px solid green;
}

ID Selector –

This selector selects an HTML element with the value of its id attribute.

The value of the id attribute always used with the hash # character.

Example –

Suppose that a paragraph has a class name para like <p id="para"> This is text</p>

#para{ 
font-size:20; 
color:red; 
border:2px solid green;
}

Grouping Selector –

The grouping selector selects multiple elements and writes them separated by a comma.

The grouping selector mainly used to add the style properties on multiple HTML elements.

Example –

Suppose that We have to add some style on p, h1, h2, span than we will use grouping selector

p,h1,h2,span{
 color:red;
 font-size:20px;
 border:1px solid red;
 padding:5px 10px;
}

Attribute Selector –

This selects an HTML element with its attribute or attribute value.

It is represented by element[attribute]

Example –

Suppose that We have to add style to the following input field –

<input type="text">
<input type="password">

We can use the following attribute selector to design the above input field.

input[type="text"]{
 border:1px solid green;
 height:15px;
 padding:5px;
 margin:5px 0px;
}
input[type="password"]{
 border:1px solid green;
 height:15px;
 padding:5px;
 margin:5px 0px;
}

Combinator Selector –

This selector combines more than one selectors with the following different combinator –

  • Descendant Selector (space) –
  • Adjacent Sibling Selector (+)
  • Child Selector (>)
  • General Sibling Selector (~)

Example –

Here some HTML element with text –

 <div>
<p>this is the first paragraph</p>
  <p>this is the second paragraph</p>
  <section>
    <p>this is the third paragraph</p>
   </section> 
  <p>this is the fourth paragraph</p>
</div>

<p>this is the fifth paragraph</p>
<p>this is the sixth paragraph</p>

Now, we will design the above HTML element using one of the following combinator selectors –

/* decedant selector */
div p {
  background-color:red;
  padding:5px;
  color:white;
}

/* child selector */
div > p {
  background-color:red;
  padding:5px;
  color:white;
}

/* adjacent selector */
div + p {
  background-color:red;
  padding:5px;
  color:white;
}
/* general sibling selector */
div ~ p {
  background-color:red;
  padding:5px;
  color:white;
}

Pseudo Class Selector –

This selector selects an HTML element to add style to a special state.

It will active to add style when we –

  •  take mouse cursor on HTML element
  • Click HTML element
  • finish clicking HTML element
  • focus HTML element

Syntax –

element: pseudo-class

Example –

Here, we will use the pseudo-class selector for an anchor tag.

/* unvisited link */
a:link {
  color: red;
  text-decoration:none;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: blue;
  text-decoration:underline;
}

/* selected link */
a:active {
  color: yellow;
}

Pseudo-element Selector –

This selector selects an HTML element to style its specified parts

Syntax- 

element::pseudo-element

CSS  has the following pseudo-elements –

  • ::first-letter – It will style the first letter of the text
  • ::first-line – It will style the first line of content
  • ::before – It will add  some content before existing content of HTML element
  • ::after – It will add  some content after existing content of HTML element
  • ::selection – It will style the content of the HTML element while we start selecting the existing content

Example –

Here, We use pseudo-element with a paragraph text –

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
</p>

CSS –

We can use the following pseudo-element with the above text –

p::first-letter{
color:green;
font-weight:bold;
font-size:30px;
}

p::first-line{
 text-decoration:underline;
 color:green;
}

P::selection{
background:blue;
color:white;
}

6. What is the difference between the id and class?

id selector –

  •  id has more priority than class.
  • It always comes with a hash # character.
  • It can be used with an anchor tag as a URL to redirect to the specific content.
  • Each HTML element must be single & unique id

class selector –

  •  class has less priority than id.
  • It always comes with a dot  . character.
  • It is not used with an anchor tag as a URL to redirect to the specific content.
  • Each HTML element might be multiple or duplicate class

Example –

<p id="para" class="text large">This is the paragraph text</p>
<p id="para2" class="text content">This is the paragraph text</p>
<a href="#important-content">Important Content</a>
<p id="important-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

7. Which stylesheet has the highest priority/specificity?

The inline stylesheet has the highest priority

8. Which style sheets have the lowest priority/specificity?

The external stylesheet has the lowest priority.

9. What are the benefits to use External Stylesheet?

  • We can write CSS code in a single file for multiple web pages.
  • We can easily manage the CSS code of the larger website.
  • Even We can change the design of multiple web pages through a single file.
  • Web page loading will be faster as compared to another stylesheet.

10. Why do we use !important in CSS?

We use !important with CSS property to ignore another duplicate property of a specified HTML element.

Example –

Suppose that we have styled a paragraph with duplicate/same property of inline & internal CSS.As we know that inline CSS has more priority. So, paragraph will be style with it. But in some cases, we need to style paragraph with internal CSS property then we will have to add !important in it.

<style>
p{
color:green!important;
}
</style>

<p style="color:red">This is paragraph text</p>

 

11. what is the difference between margin and padding

Margin –

  • Margin is the outer space of an HTML.
  • It is used to place two or more HTML elements separately to each other at a specified distance. This distance can be a margin.

Padding –

  • Padding is the inner space of the HTML element.
  • It is used to place an HTML element & its content at a specified distance. This distance can be padding.

12. What is the difference between width & max-width

Width – 

  • Width always treats as a fixed value. It can not be more or less than the declared value.
  • It can not be used for creating a responsive layout.

max-width –

  • Width does not treat as a fixed value. But It can be less or up to the declared value.
  • We can use it for creating a responsive layout.

13. What is the box model

All the HTML elements are in the form of boxes that contains margin, padding, borders, & the actual content. So, These boxes are represented a Box Model.

14. How to change the character case in CSS

We can change character case using three values with text-transform property –

  • text-transform: uppercase
  • text-transform: lowercase
  • text-transform: capitalize

Example –

In this example, we will change characters case of following HTML tag –

HTML element –

<h3>This is the third heading</h3>
<h4>This is the fourth heading</h4>
<p>This is a paragraph</p>

CSS code –

h3{
 text-transform:uppercase;
}
h4{
 text-transform:lowercase;
}
p{
text-transform:capitalize;
}

 

15. What is the difference between display: none and visibility: hidden

display: none –

It hides an HTML element and removes its original position.

visibility: hidden –

It also hides an HTML element and does not remove its original position.

16. What is the difference between the Relative and Absolute position

Relative Position –

  • The relative position takes an HTML element to a new position with respect to its original position.
  • It is represented by position:relative

Example –

<div id="content> This is some content </div>
<style>
#content{
width:400px;
height:200px;
background:color;
position:relative;
left:150px;
top:50px;
}
</style>

 

Absolute Position –

  • The relative position takes an HTML element to a new position with respect to the viewport or nearest section that has a relative position.
  • It is represented by position:absolute

Example – 1

<div id="content> 
This is some content
 </div>

 <style> 
#content{ 
 width:400px; 
 height:200px; 
 background:color; 
 position:absolute; 
 left:150px; 
 top:50px; 
} 
</style>

Example – 2

<div class="nearest">
<div id="content> 
This is some content
 </div>
</div>

 <style> 
.nearest{
width:800px;
height:400px;
border:1px solid red;
position:relative
}
#content{ 
 width:400px; 
 height:200px; 
 background:color; 
 position:absolute; 
 left:150px; 
 top:50px; 
} 
</style>

 

17. What is the difference between fixed &  sticky position

Fixed Position –

  • Fixed position takes HTML element to a new position with respect to the viewport.
  • It does not move an HTML element if the page is scrolled.
  • It is represented by position: fixed

Example –

<div id="content> This is some content </div> 

<style> 
#content{ 
 width:400px; 
 height:200px; 
 background:color; 
 position:fixed; 
 left:150px; 
 top:50px; 
} 
</style>

 

Sticky Position –

  • The sticky position takes an HTML element to a new position with respect to the page scroll.
  • It also moves an HTML element up to a specified position if the page is scrolled.
  • It is represented by position:sticky

Example –

<div id="content> This is some content </div>

 <style>
 #content{ 
 width:400px; 
 height:200px; 
 background:color;
 position:sticky;  
 top:0px; 
}
 </style>

18. What is the difference between display: block and display: inline

display: block –

  • display: block property  makes block-level HTML element.
  • It also can convert an inline-level element to a block-level element.
  • A block-level element covers the full width of the page.
  • The text of a block-level element starts on a new line.

Example –

<span> This is inline level element</span>
<style>
p{
display:block;
}
</style>

display: inline –

  • display: inline property  makes an inline-level HTML element.
  • It also can convert a block-level element to an inline-level element.
  • An inline-level element does not cover the full width of the page.
  • The text of an inline-level element does not start on a new line.

Example –

<p> This is block level element</p>
<style>
p{
display:inline;
}
</style>

19. What is box-sizing

The box-sizing property is used to include padding & borders of an HTML element within its total width & height.

Syntax-

box-sizing:border-box

Example –

<div class="mypage"></div>

<style>
.mypage{
 width: 200px;
 height: 100px;
 border: 30px solid red;
 padding: 50px;
 box-sizing: border-box;
}
</style>

20. What are the Media Queries?

Media Queries was introduced in CSS3. We can use it to define CSS code for the different types of screen sizes.

<p>This is some text</p>
<style>
@media only screen and (max-width:320px){
 p{
 font-size:12px;
 color:red;
}
}  

@media only screen and (max-width:600px){
 p{
 font-size:16px;
 color:green;
}
}  
</style>

21. Is CSS case sensitive

No, CSS is not case sensitive, We can define CSS property in both cases – uppercase or lowercase

22. What is the use of opacity

  • Opacity is used to create a transparent/ watermark element.
  • We can also use it to hide an HTML element.

Example –

<h3>This is transparent Text</h3>
<p>This is some text</p>
<style>
h3{
opacity:0.1;
}
p{
opacity:0;
}
</style>

 

23. What is the use z-index

We can use Z-index to place an HTML element on the z-axis.

24. What is RWD

RWD is the short form of Responsive Web Design.

It is the concept of making a web page attractive, user & mobile friendly for all types of devices.

25. What is a responsive

Responsive is the concept of creating a web page in well formated that can be adjusted on different types of screen sizes.

26. What is rule-set

Rule-set is the most important part of CSS. It contains selector, curly brackets, properties & values.

Example –

p{
backgroud:red;
border:1px solid green;
font-size:20px;
}

Tutorial Summary –

Dear Developer, I have shared the Most Important CSS Interview questions with answers. I hope that These questions will be helpful for your interview.

If you have any queries regarding Interview Questions, you can ask me through the comment box. Also, share this tutorial with your friends who are searching for it.

Best of luck for your CSS Interview