CSS Interview Questions - A list of top frequently asked CSS interview questions and answers are given below.
What is CSS ?
The full form of CSS is Cascading Style Sheets. It is a styling language which is simple enough for HTML elements. It is popular in web designing, and its application is common in XHTML also.

What does “Cascading” in CSS mean?
“Cascading” refers to the cascading order in HTML document. This will sort the declared CSS in an order to avoid the conflicts.

What are the different types of CSS?
Below are the different types of CSS –
Embedded – Adding the CSS styles in <style> attribute.
Inline – Adding the CSS to the HTML elements.
Linked/External – Adding the External CSS file to the HTML document.

What is the difference between inline, embedded and external style sheets?
Inline: Inline Style Sheet is used to style only a small piece of code.
Embedded: Embedded style sheets are put between the <head>...</head> tags.
External: This is used to apply the style to all the pages within your website by changing just one style sheet.

What is Embedded Style Sheet?
An Embedded style sheet is a CSS style specification method used with HTML. You can embed the entire style sheet in an HTML document by using the STYLE element.
What are advantages and disadvantages of using external style sheet?
Reusability - The style of multiple documents or webpages can be maintained by single CSS file.
Maintainability - The CSS file is simple to maintain.
Download Overload - The CSS file need to download for style. The style will not apply until the file is downloaded.
Not Worth - It is not viable for small style definitions. For small style it is better to define them inline.

What are advantages and disadvantages of using Embedded style sheet?
We can create classes for multiple elements on the page.
No extra download of file is required.
This type of applying style is not reusable. Its scope is withing the document or web page only.

What are advantages and disadvantages of using Inline style sheet?
It is use for smaller style definition.
The style defined at inline level overrides the style defined at embedded or external level. Disadvantages:
This method does not separate style information and content.
Styles for multiple document cannot be maintained.
Control classes cannot be created to control style of multiple elements on web page.

What are the advantages of CSS?
Below are some of the advantages of CSS –
  • Accessibility
  • Multiple Device Compatibility
  • Page will load fast
  • Maintenance is Easy
  • Offline Browsing
What are the advantages and disadvantages of using External Style Sheets?
The advantages of External Style Sheets are as follows :
  • With the help of External Style Sheets, the styles of numerous documents can be organized from one single file.
  • In External Style Sheets, Classes can be made for use on numerous HTML element types in many forms of the site.
  • In complex contexts, Methods like selector and grouping can be implemented to apply styles.
The disadvantages of External Style Sheets are as follows :
  • An extra download is essential to import style information for each file.
  • The execution of the file may be deferred till the external style sheet is loaded.
  • While implementing style sheets, we need to test Web pages with multiple browsers in order to check compatibility issues.
What are the limitations of CSS ?
Limitations are:
  • Ascending by selectors is not possible
  • Limitations of vertical control
  • No expressions
  • No column declaration
  • Pseudo-class not controlled by dynamic behavior
  • Rules, styles, targeting specific text not possible
How can you integrate CSS on a web page?
There are three methods to integrate CSS on web pages.
  • Inline method
  • Embedded/Internal method
  • Linked/Imported/External method
What are the components of CSS style?
Below are the different components of CSS styles –
  • Property
  • Selector
  • Value
What are the media types in CSS?
Below are the list of media types in CSS –
  • All
  • Screen
  • Print
  • Projection
  • Embossed
  • Tty
  • Tv
What are the font attributes in CSS?
Below are the list of font attributes –
  • Font-Variant
  • Font-Family
  • Caption
  • Font-Style
  • Font-Size
  • Icon
What are the some of the properties in added in CSS3?
Below are the some of the properties in CSS3-
  • Border Images
  • New Web fonts
  • Multi Column layout
  • Box Shadows
  • Text Shadows
  • Transform property
What are the elements of CSS Box modal?
Below are the elements of CSS Box modal –
  • Border
  • Margin
  • Content
  • Padding
What are the main properties of CSS style sheets?
Below are some of main properties in CSS style sheets –
  • Text
  • Font
  • Border
  • Padding
  • Table
  • List
  • Background
  • Margin
What is the use of z-index in CSS?
Z-Index is used to avoid the overlapping of the elements. Default value of z-index is 0 and it will take positive and negative values as well.

What is Pseudo-elements?
Pseudo-elements are used to add special effects to some selectors. CSS in 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.

What is the difference between “display:none” and “visibility:hidden” in CSS?
Display:none – This will just hide the element and does not take any space of the element.
visibility:hidden – This also hides the element and will take space for the element and this will affect the entire layout of the document.

What is the property used for formatting the texts in CSS?
Property – “white-space” is used for formatting the text.

What are the possible values for attribute – “Position” in CSS?
Below are the list of possible values for attribute – “Position” –
  • Static
  • Inherit
  • Fixed
  • Absolute
  • Relative
What are the various Media types used?
Different media has different properties as they are case insensitive. They are:
  • Aural – for sound synthesizers and speech
  • Print – gives a preview of the content when printed
  • Projection - projects the CSS on projectors.
  • Handheld - uses handheld devices.
  • Screen - computers and laptop screens.
Which property is used for underlining the link in CSS?
Property – “text-decoration” is used for underlining the link.

How to add comments in CSS?
Below is the sample style for adding the comments – /* test comment */

How we can set a wait cursor by CSS?
Below is the line to set the wait cursor –
document.body.style.cursor = ‘wait’;

What you mean by pseudo classes in CSS?
Pseudo classes will allow you to identify the HTML elements. These classes are specified with “:” and pseudo class and element name.
a:hover {font-color: green;}

What is CSS Box Model and what are its elements?
This box defines design and layout of elements of CSS. The elements are:
Margin: the top most layer, the overall structure is shown
Border: the padding and content option with a border around it is shown. Background color affects the border.
Padding: Space is shown. Background colour affects the border.
Content: Actual content is shown.

How to give rounded corners in CSS3?
Rounded corners can be given to any element using the property – “border-radius”.

What are the properties of rounded corners in CSS3?
Below are the properties of rounded corners –
  • border-radius
  • border-bottom-right-radius
  • border-bottom-left-radius
  • border-top-right-radius
  • border-top-left-radius
What are the new texts added in CSS3?
Below are the list of texts added in CSS3 –
  • Word-wrap
  • Text-overflow
  • Word- break
How we can use transition effect in CSS3?
Below are the two things to be specified to create a transition effect –
  • Duration of the effect
  • CSS property to be added for an effect
List out the properties of transition in CSS3?
Below are the properties of transition in CSS3 –
  • Transition-delay
  • transition-property
  • transition-duration
  • transition-timing-function
What are the types of gradients in CSS3?
Below are the types of gradients in CSS3 –
  • Radial gradients
  • Linear gradients
What is the difference between “cell-padding” and “cell-spacing”?
Cell-Padding – This used to leave the space between the content of cell and wall/border of the cell.
Cell-Spacing – This used to specify the space between the cells.

List out the border properties in CSS?
Below are the list of properties for border in CSS –
  • Border-style
  • Border-width
  • Border-color
  • Border-top-style
  • Border-right-style
  • Border-bottom -style
  • Border-left-style etc.
What are CSS Lists types?
Below are the two CSS list types –
Ordered list (<ol>) - list items will be marked in numbers.
Unordered List (<ul>) - list items will be marked in bullets.

What is the use of CSS Image sprites?
It is a group of images placed into one image. A web page with multiple images can take a lot of time to load and uses multiple server requests to project the same. With the help of image sprites, we can decrease the number of requests to the server and save time and bandwidth as well.

What is type selector?
Type selector quite simply matches the name of an element type. To give a color to all level 1 headings –
h1 { color: #36CFFF; }

What is universal selector?
Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type –
* { color: #000000; }

What is the purpose of % measurement unit?
% - Defines a measurement as a percentage relative to another value, typically an enclosing element.
p {font-size: 16pt; line-height: 125%;}

What is the purpose of cm measurement unit?
cm − Defines a measurement in centimeters.
div {margin-bottom: 2cm;}

What is the purpose of em measurement unit?
em − A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt.
p {letter-spacing: 7em;}

What is the purpose of ex measurement unit?
ex − This value defines a measurement relative to a font's x-height. The x-height is determined by the height of the font's lowercase letter.
p {font-size: 24pt; line-height: 3ex;}
Request to Download PDF

Post A Comment: