Loading…

CSS interview questions and Answers

By Umesh Singh
Last update: 30 Mar 2020, 35 Questions
CSS interview questions

Cascading Style Sheets (CSS) is a style sheet language or a mechanism used for enhancing its style by adding colors, fonts, and spacing to your web documents. We have a collection of CSS interview questions that helps in crack your interviews. It is designed to enable the separation of content for improving content accessibility and providing more flexibility in the specification of presentation and reducing complexity in the structural content. The specifications of CSS are maintained and managed by the W3C.

Most Frequently Asked CSS interview questions

1. What is CSS?

Cascading Style Sheets is a style sheet language which is used for describing the presentation of a document written in a markup language like HTML. It is a cornerstone technology of the WWW, alongside HTML and JavaScript. It handles the look and feel part of a webpage.

2. What are the difference between Inline CSS & Internal CSS?

CSS can be applied to our website's HTML files in various ways. We can use an external css, an internal css, or an inline css.

Inline CSS : It can be applied on directly on html tags. Priority of inline css is greater than inline css.

Internal CSS : It can be applied in web page in top of the page between heading tag. It can be start with

3. What is CSS selector?

A CSS selectors is used to select HTML elements based on their name,id,class and attribute. It is the part of a CSS rule that actually selects the content we want to style.

Type of CSS selectors

  • Universal Selector
    For Example
    * {
    color: green;
    }
  • Element Type Selector
    For Example
    ul {
    list-style: none;
    }
  • ID Selector
    #container {
    width: 960px;
    }
  • Class Selector
    For Example
    .box {
    padding: 20px;
    }
  • Attribute Selector
    For Example
    input[type="text"] {
    background-color: #444;
    }
4. How to write media query for mobiles?

In between @media screen and (max-width: 600px) { and } we can write our CSS. It can directly effect for mobile device.

5. What is CSS Box Model and also explain its elements?

CSS Box Model is used when talking about design and layout. It is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content.

Elements of CSS Box Model

  • Content
  • Padding
  • Border
  • Margin
6. What is the use of @import?

@media can be used in media query to apply different styles for different media types or devices. It can be used to check many things, such as width and height of the view port.

7. Explain the difference between CSS2 & CSS3?

CSS2 : It was released in 1998. In CSS2 designers could only use web safe fonts for being 100% sure to use fonts that would always display the same on every system. CSS2 had "simple selectors". In CSS2, the developers or designers had difficulty because the standard was not equipped with automatically breaking of the text so that it fits within a box.

CSS3 : It was released in 1999. In CSS3 designers can use special fonts like those available in Google Fonts and Typecast. CSS3 calls the components as "a sequence of simple selectors". In CSS3 has the capability to split text sections into multiple columns so that it can be read as a newspaper.

8. What is attributes in CSS and how they used?

It is used to select elements with a specified attribute. It is possible to add css that have specific attributes or attribute values.

It is used to select elements with an attribute value containing a specified word.

Example

                                                    

a[href="#"] {
background-color: yellow;
}

9. What are Advantages of CSS3 over CSS?

CSS3 is a new version of CSS that have various benefits from technical features and properties. From better maintenance, loading speed, and layout design properties CSS3 is much more versatile than CSS. Designers can use all these property in a simpler manner.

10. What is Tweening?

Tweening is a familiar term for those used to animating in Flash. With CSS animation we can use the latter, pose to pose.

Example

                                                    

 

p {
animation-duration: 2s;
animation-name: slidein;
}

@keyframes slidein {
from {
margin-left: 95%;
width: 200%;
}
to {
margin-left: 0%;
width: 100%;
}
}

 

11. How we can override CSS?

With the help of !important we can override CSS properties.

Example

                                                    

.sidebar{
width:30%;
}

.sidebar{
width:40% !important;
}

13. What is the purpose of pseudo elements?

It is an element which is used to style specified parts of an element. It can be used to either "Style the first letter, or line, of an element" or "Insert content before, or after, the content of an element".

Syntax :
selector::pseudo-element {
property:value;
}

14. How many types of CSS?

There are three Types of CSS used to develop a web page.

  • External css : These types of style sheets are having their separate files.
  • Internal css : These types of styles are placed at the top of each web page document, in between head tag.
  • Inline css : These types of styles are placed directly with HTML tags.
16. What are advantages of CSS?
  • It is Easy to maintain and update.
  • It has Great consistency in design.
  • It has more formatting options.
  • It is Lightweight code.
  • Faster downlad times.
  • It has search engine optimization benefits.
17. What are the different font attributes?

There are 3 font attributes which is used to write CSS.

  • color
  • face
  • size
18. List some CSS frameworks?
  • Bootstrap
  • Semantic
  • Materialize
  • Bulma
  • Foundation
  • Pure CSS etc
19. What is universal css selector?

It is used to select any type of elements in an HTML page. An asterisk ( * ) is used to denote a universal CSS selector. This is useful when we want to set a style for of all the elements of an HTML page.

Syntax : * { CSS-Property: value; ................. }

20. What is float in CSS?

The float property in CSS places an element on the right or left side of its container, allowing text and inline elements to wrap around it.

Example

                                                    

.sidebar {
float: right;
width:30%;
}

21. What is hover effect in css? How we can apply on tags?

It select and style a link when you mouse over it. An :hover is used to select elements when you mouse over them.

Example

                                                    

a:hover{
background-color: yellow;
}

22. What is the use of z-index in CSS?

It specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. z-index only works on positioned elements like position:absolute, position:relative, or position:fixed.

23. What are the difference between "display:none" and "visibility:hidden" in CSS?

visibility:hidden : Ithides an element, but it will still take up the same space as before. The element will be hidden, but still, affect the layout.

display:none : It hides an element as well as doesn't preserve the space.

24. How to make scroll bars with the help of CSS?

The CSS overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area.

Property of overflow is given below :-

  • visible
  • hidden
  • auto
  • scroll

Example

                                                    

overflow: scroll
div {
overflow: scroll;
}

overflow-x and overflow-y
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}

25. What is the limitations of CSS?

CSS has various limitations as a programming language thats are as follows:

  • CSS cannot perform any logical operations like if/else or for/while or +/-.
  • We can not read any files using CSS.
  • It can not interact with databases.
  • CSS can not request a web page.
26. What are the difference between "position:absolute" & "position:relative" in CSS?

Both Postions(absolute & relative) are having different features. Once we set Position then you can able to use top, right, bottom, left attributes.

An absolute position element is positioned relative to the first parent element that has a position other than static.

Absolute : In case of position absolute, an element searches for the nearest available coordinate axes among its parent elements. The element is then positioned by specifying offsets from this co-ordinates axis. It removed from document normal flow.

Relative : In case of position relative, an element creates its own co-ordinates axes, at a location offset from the view port co-ordinate axis. It is Part of document flow but shifted.

27. What are the difference between Internal & External CSS?

Internal CSS are the ones that we can write within the same file i.e the HTML code and CSS code are placed in the same file.

External CSS are that we can write in a separate file than the html code i.e the HTML file is separate like(index.html) and CSS file is separate like(style.css).

28. How to write css for 3rd child of every <ul> tags?

nth-child(n) : It matches every element that is the nth child, regardless of type, of its parent.

Example

                                                    

ul:nth-child(3) {
background: red;
}

 

29. What is responsive?

It is about making a website look good on all devices like desktops, tablets, and phones etc. In responsive HTML and CSS is automatically resize a website.

30. What is the used of !important? How we can use it?

The !important css rule is used for overriding the previously assigned CSS declarations.

Example

                                                    

#sidebar {
   font-size: 12px !important;
}

31. What are the difference between margin & padding?

Margin is a outer space of an element but padding is the inner space of an element. In other words we can say margin is the space outside of an element's border but padding is the space inside of its border.

32. What is the use of sprites in CSS?

It is a collection of images put into a single image. A page with many images can take a long time to load and generates multiple server requests. Using sprites will reduce the number of server requests and save bandwidth.

35. What are difference between class selector and ID selector?

In CSS, a Class selector is a name preceded by a full stop (".") and an ID selector is a name preceded by a hash("#"). Difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

Latest Version : CSS version 4 was released in March 2017.

Advantages

  • Saves time
  • Pages load quickly
  • Easy to maintain
  • Superior styles in HTML
  • Compatible with multiple devices
Development History

CSS was proposed by Hakon Wium Lie in October 1994. The first released was made public in December 1996.