If you have just started learning CSS or you are planning to change company and give front-end developer interview, here in this post, I am going to provide you top CSS interview questions with answer, which includes CSS3 interview questions also. We will start from basic and then move on to advanced interview question/answers.

css-interview-questions-min.png

What is CSS?

CSS stands for Cascading style sheet, which is used with HTML to give design to websites. Using CSS we can control several HTML pages layout.

Name all the versions of CSS

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

What are the main differences between CSS3 and CSS2?

Here are the list of difference between CSS3 and CSS2:

  • Rounded Corners: With the help of "border-radius" property in CSS3, we can give round corners to any html element. Example:
    <!DOCTYPE html>
    <html>
        <head>
            <style>
                .roundCorners{
                    border-radius: 25px;
                    background-color: green;
                    padding: 20px;
                    width: 200px;
                    height: 150px;
                }
            </style>
        </head>
        <body>
            <div class="roundCorners"></div>
        </body>
    </html>?
  • Border-Image: Using CSS3 property "border-image", we can create image as broders, example : 'border-image: url(border.png) 30 round;'
  • Shadow: Using CSS3 property "box-shadow" or "text-shadow", we can now give shadow like effect to box and text, respectively.
  • Transitions: using CSS3 property "transition", we can change property values smoothly, over a given duration.
  • Gradients: We can use gradients in for two or more colors using linear-gradient and radial-gradient properties.
  • Grid Layout: The CSS 3 Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
  • In CSS3, a user can give multiple background images on a webpage by using properties like background-image, background-position, and background-repeat styles.

How can we include CSS in HTML?

We can include CSS in HTML by 3 ways:

  • External CSS: One CSS file is referenced by HTML pages. CSS classes and proeprties are written in seperate file. Single CSS Can work in multiple pages
  • Internal CSS: In this CSS classes/id or properties are at the top of the web page code document. Works for specific page only.
  • Inline-CSS: CSS is written inside HTML element, works for specific HTML element only.

Why is External CSS useful?

External style sheet is useful as we write all the styling codes in a single file and it can be used anywhere in complete web-applciation project, by just referring to the link of that external style sheet file.

If we do change in one CSS file, it will reflect in all HTML pages of the web-application or website.

What are the limitations of CSS?

  • Limited to vertical control
  • Rules, styles, targeting specific text not possible
  • No concept of sibling relationships. For example, it is impossible to write a CSS stylesheet that will render every other paragraph in bold.

Name the type of CSS3 positions and explain them

  • Static: It’s a default value of position to any element. Element is rendered one after the other in order. It’s the way as it is. There’s no change in the display of elements.
  • Absolute: The absolute value is used to position the element relative to its parent element. If the parent element has "X" padding in the left. The child element "Y" has padding towards left. The total padding of the child element would be "X+Y"
  • Fixed: The fixed value is used to position the element relative to the viewport (browser window) and the position of the element would be fixed.
  • Relative: The relative value is used to position the element relative to its normal position.
  • Sticky: The stick value is used to position the element based on the user’s scroll. Its position is relative until a given offset position is met. Then it will stick in a place like it’s fixed.
  • Initial: This property value allows us to use the default behavior of the element.
  • Inherit: This property value allows us to inherit the property of its parent.

What is CSS framework? Name them

A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and focused around interactive UI patterns. Here are the top CSS frameworks used by developers:

  • Bootstrap: The most widely used free and open-source CSS framework
  • Foundation: The most advanced responsive front-end framework in the world
  • Pure: The lightweight CSS framework
  • Bulma: A free, open-source CSS framework based on Flexbox
  • Semantic UI:A development framework using human-friendly HTML
  • UI Kit: A lightweight and modular front-end framework for creating fast and powerful web interfaces.
  • Materialize CSS:A modern responsive front-end framework based on Material Design

What is CSS Selector?

A CSS selector is an element pattern that tells the browser which HTML elements it should select for the application of CSS property values.

There are many types of CSS selectors, such as CSS Class Selector, CSS Universal Selector, CSS ID Selector and CSS Group Selector.

css-selector-min.jpg

  • Type Selector (Element Selector): selects all the elements which match the given type.
    Example: p [Selects all the elements with <p> tag.]
  • ID Selector: selects the element which matches the ID value. In CSS, it should be only one element for a given ID.
    Example: #Name [Selects the element having Name as an ID value.]
  • Class Selector: selects all the elements which match the given class name.
    Example: .blue [selects all the elements with a class name blue.]
  • Universal Selector: selects all the elements in the document.
    Example: * [Selects all the elements in the document.]
  • Attribute Selector: selects the element which matches the attribute value.
    Example: a [target = “_blank”] selects all the anchor elements with attribute value is _blank.

Describe Box-model in CSS

All html elements are considered as box.

css-box-model-min.png

CSS-3 box model as shown in chrome

Box-Model contains following elements:

  • Margin: Area outside the border is called a margin (Also called as outer area keeping the border as reference)
  • Borders: It represents the edge of a CSS box, which extends around the pudding and the content, the margin is 0, being invisible, but it is possible to set the style, thickness or color of the border.
  • Padding: It is the outer edge of the content box and the edge of the border, basically, it is a line that goes around the padding and content. 
  • Content: It is the area inside the box, where the content appears.

css_box_model-explanation-min.jpg

What is the difference between padding and margin?

Margin: In CSS, the margin is the property by which we can create space around elements. We can even create space to the exterior defined borders.

Padding: In CSS, padding is the property by which we can generate space around an element’s content as well as inside any known border.

What do you mean by short-hand notation in CSS3?

Shorthand notations are also called as shorthand properties in CSS. That lets you set multiple values of CSS properties simultaneously.

It’s often good to use shorthand notations because it reduces the file size and even improves the performance.

Example:

p{
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;
}

can be converted into 1 line using shorthand property

p{
background: #000 url(images/bg.gif) no-repeat left top;
}

What do you mean by graceful degradation?

Graceful degradation is about creating a website design that will be compatible with the latest browsers and, at the same time, will remain functional to an extent on smaller screens and older browsers.

Polyfills can be used to build in missing features with JavaScript, but acceptable alternatives to features like styling and layout should be provided where possible, for example by using the CSS cascade, or HTML fallback behaviour.

Explain what pseudo-elements are?

Pseudo-elements are used to style a specific part of an element. They start with a double colon ::.

::before and ::after are the most used pseudo-elements. They are used to add content before or after an element, like icons for example.

Example:

p::before {
  content: url(/myimage.png);
}
/* make the first line of a paragraph slightly bigger in font size*/
p::first-line {
  font-size: 2rem;
}

What is CSS preprocessor? What are the benefits of using it?

A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax.

CSS preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations.

Example:

/* SCSS */

$primary-color: white;
$primary-bg: darkslategrey;

body {
  color: $primary-color;
  background: $primary-bg;
}

Another example using SASS

$link-color: #999;
$link-hover: #229ed3;

ul {
    margin: 0;

    li {
        float: left;
    }

    a {
        color: $link-color;

        &:hover {
            color: $link-hover;
        }
    }
}

Benefits of using Pre-processor

  • Nested syntax
  • Ability to define variables
  • Ability to define mixins
  • Avoid Repetitions
  • Operational functions (such as “lighten” and “darken”)
  • Joining of multiple files

What is CSS opacity?

It defines the transparency of the element. By using this property, we can transparent the image or any other element, that can take the values from 0.0-1.0. If the value is lower, then the image or element is more transparent.

Example:

img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}

What is z-index in CSS?

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only affects elements that have a position value other than static (the default).

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

What are CSS Sprites?

CSS sprite basically combines multiple small images and creates a big one image. The use of image sprites is done for two main reasons:

  • Increase page speed, as we are using single image instead of multiple images.
  • Reduces bandwidth,as all images are combined into one image call.

What is Pseudo-class in CSS?

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element.

For example, :hover can be used to change a button's color when the user's pointer hovers over it.

button:hover {
  color: red;
}

What is the difference between visibility:hidden and display:none?

visibility:hidden -> It will make the HTML element hidden in the page but HTML element space is still consumed in the page

display:none -> It will not show the html element in the page, also it will not consume space of the HTML element.