Register Login

CSS Interview Questions

Updated Apr 15, 2019

What is CSS and what does CSS stand for?

CSS stands for Cascading Style Sheets and is a styling language used for styling web pages. It is the basic layout of the styles of the different elements in a web page and describes how they will appear on any form of media like website, paper or mobile.

They are used in the form of external style sheets and used to style all the elements of the HTML documents at once, saving a lot of work and effort.

How to comment in CSS?

CSS comments are used for providing additional notes to the person reading the source code to better understand the code. They are given between /* and */.

They have no effect on the presentation of the page and are not visible in the layout. These can be a single line or of multiple lines.

Which CSS attribute would change an element's font colour to blue?

The font colour of an element will be changed into Blue by specifying the name of the colour in the colour property.

For example,

colour: Blue;

What is REM in CSS?

The REM is a unit used for mentioning a length. It stands for root length which means it is relative to the font size of the root element of the HTML document.

Therefore a single font size can be provided for the root element and other elements can be set as a percentage of that element using the rem unit.

What is inline CSS?

Inline CSS is a style statement that is used inside an HTML document that is placed within the style attribute of the tag. Putting the CSS statements inside the style attributes reduces the number of files the browser needs to download. It is helpful if a unique style is to be associated with an element.

For example,

<h1 style=”color: Purple;”>

What is SASS in CSS?    

Sass (Syntactically awesome style sheets) is a pre-processor used in CSS for improving the efficiency of CSS by reducing the repetition of the statements.

It is a powerful extension of CSS that has code written in a very structured manner for better layout designing. SASS is a superset of CSS and is coded in Ruby.

How to remove bullet points in CSS?

Bullet points are usually found in lists that are unordered. To remove any kind of ordering through bullet points, the property called list style needs to be changed to None.

The syntax is :


{list-style: none;}

Which CSS property configures the font typeface?     

The font-family property is used to mention or change the typeface of the fonts. It can be set to any values like Tahoma, Times New Roman or Garamond in the CSS file.

What are CSS selectors?

Any CSS rule set has a selector and a declaration block. The selector in this rule set is used to specify the element that needs to be styled. These selectors select the elements based on their class, attribute, ID, child class etc.

The different types of selectors are:

  • ID selector
  • Class selector
  • Universal selector
  • Element selector
  • Attribute selector
  • Pseudo-class
  • Pseudo-element
  • Child combinator
  • Descendant combinator

Which CSS property configures the colour of text?

The text colour of an element or the entire HTML document can be changed by specifying the name of the colour in the colour property.

For example,

colour: Red;

What does * mean in CSS?

The * in CSS means Universal selector that is used to select all the elements in an HTML document. This can be very useful when resetting padding and margin for the entire web page. It has the highest influence among all other selectors so it takes effect before others.

What is a CSS preprocessor?

CSS preprocessors like SASS and Haml are basically programs used for enhancing the efficiency of CSS by reducing the repetition of the statements. Using this CSS code can be generated through the processor’s syntax.

The basic functionalities of CSS are extended through preprocessors by features such as nesting selector, mixin, inheritance selector etc. This code is compiled into CSS code for the browser to understand. CSS compilers have to be installed in the web server for running pre-processor code.

Which is the correct CSS syntax?

The correct syntax for CSS is,

ul {

list-style: none;


Here the 'ul' is the element selector specifying the unordered list and the list-style attribute is set to none. The code is properly placed between a set of parenthesis.

What is Flexbox CSS?   

Flexbox or the Flexible Box Module in CSS is a layout model used to improve the presentation of the elements in the HTML document. It aims to enhance the different element’s alignment, order and direction within the container even if their sizes are not known.

Using this structure, the elements can be modified to fit in any screen resolution and their size can be adjusted according to the space available. The Flexbox algorithm is direction based instead of inline or block.

How to mount CSS to Gmod server?

The steps to mount the CSS files into the Gmod server are:

  • Install the Gmod server.
  • Compress the CSS files into a zip file.
  • Open a CSS folder in the Gmod server and upload the folder.
  • After uploading the files, unpack them by clicking on the Unzip button the top.
  • Edit the mount.cfg file for the system to know where to find them.
  • Click on Save.

How to wrap text in CSS?

Text in CSS can be wrapped through the word-wrap property. The following syntax can be used:

section {

word-wrap: break-word;


What is the Z index in CSS?

The Z index mentions the order of the elements on the stack. The elements are placed according to their stack order, so the element with greater stack order is positioned before the element with lower stack order. The Z index is only applicable to positioned elements with positions like absolute, fixed or sticky. The default value is auto.

How to override Bootstrap CSS?

The default Bootstrap can be overridden by using a custom made CSS file. After the core CSS files of Bootstrap are added to the head section of the HTML document, another CSS file has to be added to override the core styles applied by Bootstrap. Therefore, the browser will first load the Bootstrap CSS file and then the other CSS file, which will override it.

The following syntax can be used:

<link href="css/bootstrap.css" rel="stylesheet">

<link href="CSS/style. CSS" rel="stylesheet">   (This is the custom CSS file)

What is WebKit in CSS?

The Webkit is a web browser rendering engine that is used to web page layouts. It is used to display content on the pages, handle the user interactions and managing the history of the pages visited by the user. It is used as a prefix –webkit along with CSS to specify the changes that only that particular browser like Chrome can adapt.

What is the Box model in CSS?

The Box Model is a representation of the elements in HTML arranged in a box-like structure. The box wraps around each element.

This layout consists of the margin at the outer edge, then the border, the padding and then the actual element that contains the text or image content. Every element in the HTML document is rendered by the browser according to the Box Model.