HtmlCssMonk

50 Most Important CSS Interview Questions And Answers

By – HtmlCssMonk

List of Most Important CSS Interview Questions with Answers:

The CSS questions covering almost all the basic and advanced CSS categories are explained with examples.

CSS is one of the most essential features of Web development. It is a language by which we can describe the appearance of web pages.

Hence, it is essential to cover up all the basic and advanced portions of the CSS. In order to become a good web developer and crack the web developer interview successfully, you need to learn CSS.

Also Try-Test your Skills with Amazing Quizzes.

Let’s get started.

1- What is CSS?

CSS stands for Cascading Style Sheet. It is a popular styling language which is used with HTML to design websites. It can also be used with any XML documents including plain XML, SVG, and XUL.

2- What is the origin of CSS?

SGML (Standard Generalized Markup Language) is the origin of CSS. It is a language that defines markup languages.

3- What are the different ways you could integrate CSS into your HTML page?

There are three ways that you could integrate a certain CSS style:

  1. Inline method – It is used to insert style sheets in HTML document
  2. Embedded/Internal method – It is used to add a unique style to a single document
  3. Linked/Imported/External method – It is used when you want to make changes on multiple pages.

4- What are the benefits and demerits of External Style Sheets ? 

Benefits:

  • One file can be used to control multiple documents having different styles.
  • Multiple HTML elements can have many documents, which can have classes.
  • To group styles in composite situations, methods as selector and grouping are used.

Demerits:

  • Extra download is needed to import documents having style information.
  • To render the document, the external style sheet should be loaded.
  • Not practical for small style definitions.

5- Discuss the merits and demerits of Embedded Style Sheets?

Merits of Embedded Style Sheets:

  • Multiple tag types can be created in a single document.
  • Styles, in complex situations, can be applied by using Selector and Grouping methods.
  • Extra download is unnecessary.

Demerits of Embedded Style Sheets:

  • Multiple documents cannot be controlled.

6- What are the major versions of CSS?

Following are the different variations of CSS:

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

7- What are the advantages of using CSS?

  • Bandwidth
  • Site-wide consistency
  • Page reformatting
  • Accessibility
  • Content separated from presentation

8- What are the disadvantages of using CSS?

Following are the disadvantages of using CSS:

  • Ascending by selectors is not possible
  • Limitations of vertical control
  • No expressions
  • No column declaration
  • Pseudo-class not controlled by dynamic behaviour
  • Rules, styles, targeting specific text not possible

9- Name a few prominent CSS frameworks.

CSS frameworks are the preplanned libraries which make easy and more standard compliant web page styling. The frequently used CSS frameworks are: –

  • Bootstrap
  • Foundation
  • Semantic UI
  • Gumby
  • Ulkit

10- What is the difference between the usage of an ID and a Class?

ID – An ID is unique. A particular ID can be only assigned to a single element. IDs are used when specific styling is being tried to be achieved over a single element. Below is a pictorial example of how to use an ID.

Class – Just like the word suggests, a class is a collective way of targetting HTML elements for styling. Classes are not unique and multiple elements can have the same class. In fact, multiple classes can also be added to the same element to achieve the desired style and look. Below is an example of the usage of classes.

11- What is the RGB stream?

RGB is a system of representing a certain colour in CSS. There are three streams in this nomenclature of representing a colour, namely the Red, Green and Blue stream. The intensity of the three colours is represented in numbers ranging from 0 to 256. This allows CSS to have a wide range of colours spreading across the entire spectrum of visible colours.

12- Who maintains the CSS specifications?

World Wide Web Consortium maintains the CSS specifications.

13- What is a CSS selector?

Selector is a string that identifies the elements to which a particular declaration apply. It is also referred as a link between the HTML document and the style sheet. It is equivalent of HTML elements. There are several different types of selectors in CSS: –

  • Element Selector
  • Id Selector
  • Class Selector
  • Universal Selector
  • Group Selector

14- Name some CSS style components.

Some CSS Style components are:

  • Selector
  • Property
  • Value

15- Explain the CSS Box Model and its different elements.

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and an optional surrounding padding, border, and margin areas.

The CSS box model is responsible for calculating:

  • How much space a block element takes up.
  • Whether or not borders and/or margins overlap, or collapse.
  • A box’s dimensions.
Box Model - css interview questions - edureka

The box model has the following rules:

  • The dimensions of a block element are calculated by widthheightpaddingborders, and margin.
  • If no height is specified, a block element will be as high as the content it contains, plus padding.
  • If no width is specified, a non-floated block element will expand to fit the width of its parent minus padding.
  • The height of an element is calculated by the content’s height.
  • The width of an element is calculated by the content’s width.
  • By default, padding and border are not part of the width and height of an element.

16- Differentiate logical tags from physical tags?

  • While physical tags are also referred to as presentational mark-up, logical tags are useless for appearances.
  • Physical tags are newer versions while logical tags are old and concentrate on content.

17- Differentiate Style Sheet concept from HTML?

While HTML provides easy structure method, it lacks styling, unlike Style sheets. Moreover, style sheets have better browser capabilities and formatting options.

18- What do you understand by CSS opacity?

The technical definition of opacity is the degree to which light is allowed to pass through an object.

CSS opacity is the property used to describe the transparency of an element. Or, in other words, it explains how clear the image is.

19- How can the background color of an element be changed?

The background color of an image can be changed using the background-color property.

body 
{
background-color: coral;
}

20- What is the use of the background-position property?

It can be used to define the initial position of a background image. The default position is the top left of the page. The positions that can be set include top, bottom, left, right, and center.

<html>
<head>
<style>
body {
background-image: url('hackr.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<p>CSS Background Position: Hackr.io</p>
</body>
</html>

21- Which property controls the image scroll in the background?

Image scroll in the background can be controlled using the background-scroll property.

22- Enlist the various fonts attributes?

They are:

  • Font-style
  • Font-variant
  • Font-weight
  • Font-size/line-height
  • Font-family
  • Caption
  • Icon

23- Explain the term Responsive web design.

It is a method in which we design and develop a web page according to the user activities and conditions which are based on various components like the size of the screen, portability of the web page on the different devices, etc. It is done by using different flexible layouts and grids.

24- What are CSS counters?

CSS counters are variables that can be incremented by rules of CSS that inspector track how many times the variable has been used.

25- What is CSS specificity?

CSS specificity is a score or rank that decides which style declaration has to be used to an element. (*) this universal selector has low specificity while ID selectors have high specificity.

There are four categories in CSS which authorize the specificity level of the selector.

  • Inline style
  • IDs
  • Classes, Attributes, and pseudo-classes.
  • Elements and pseudo-elements.

26- Explain universal selector.

The universal selector matches the name of any of the element type instead of selecting elements of a specific type.

<style>    
* {    
   color: green;    
   font-size: 20px;    
}     
</style>    
    

27- Name the property used to specify the background color of an element.

The background-color property is used to specify the background color of the element. For example-

<style>    
h2,p{    
    background-color: #b0d4de;    
}    
</style>  

28- Name the property for controlling the image position in the background.

The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage.

You can set the following positions:

  1. center
  2. top
  3. bottom
  4. left
  5. right
background: white url('good-morning.jpg');  
background-repeat: no-repeat;  
background-attachment: fixed;  
background-position: center;   

29- What is the z-index in CSS? 

The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero and can take on either a positive or negative number.

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

Z-Index can take the following values:

  • Auto: Sets the stack order equal to its parents.
  • Number: Orders the stack order.
  • Initial: Sets this property to its default value (0).
  • Inherit: Inherits this property from its parent element.

30- What are pseudo-elements in CSS?

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (:first-line:first-letter) or adding elements to the markup (combined with content: ...) without having to modify the markup (:before:after).

  • :first-line and :first-letter can be used to decorate text.
  • Triangular arrows in tooltips use :before and :after. This encourages separation of concerns because the triangle is considered a part of styling and not really the DOM. It’s not really possible to draw a triangle with just CSS styles without using an additional HTML element.

31- How will you target an h2 and h3 with the same styling?

You can target multiple elements by separating the separators with a comma (,)

h2, h3 {

color: blue;

}

32- What is the float property used for in CSS?

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though it still remains a part of the flow (in contrast to absolute positioning). Below is the usage of float

float: none;

float: left;

float: right;

33- How to overrule underlining Hyperlinks?

Control statements and external style sheets are used to overrule underlining Hyperlinks.

Example –

B {
text-decoration: none;
} 
<B href="career.html" style="text-decoration: none">link text</B>

34- Can default property value be restored through CSS? If yes, how?

In CSS, you cannot revert back to old values due to lack of default values. The property can be re- declared to get the default property.

35- What is contextual selector?

Selector used to select special occurrences of an element is called contextual selector. A space separates the individual selectors. Only the last element of the pattern is addressed in this kind of selector. For e.g.: TD P TEXT {color: blue}

36- What are the media types allowed by CSS?

CSS allows different media types such as speech, audio, visual and tactile media, paged or continuous media, bitmap or grid media, and even interactive media.

37- What is the ruleset?

Rulesets can be used to identify the selectors attached to one another.

It consists of two different parts- selector and declaration.

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

The difference between visibility:hidden and display:none properties is that in the case of the former, the elements are hidden but not deleted. No space is consumed.

In case of the latter, the element is hidden and the layout is affected, that is, some space is taken up.

39- How will you add border images to an HTML element?

We can set the image to be used as the border-image alongside an element by using the property of CSS “border-image”.

Example:

#borderimg {
    border: 15px solid transparent;
    padding: 20px;
    border-image: url(border.png) 30 round;
}

40- What are gradients in CSS?

It is a property of CSS which allows you to display a smooth transformation between two or more than two specified colors.

There are two types of gradients that are present in CSS. They are:

  • Linear Gradient
  • Radial Gradient

41- What is CSS flexbox?

It allows you to design a flexible responsive layout structure without using any float or positioning property of CSS. To use CSS flexbox you need to define a flex container initially.

42- Write all the properties of the flexbox.

There are several properties of the flexbox that are used in the HTML webpage.

They are:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

43- 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.

Syntax

<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>           

Embedded: Embedded style sheets are put between the <head>…</head> tags.

Syntax

<style>    
body {    
    background-color: linen;    
}    
h1 {    
    color: red;    
    margin-left: 80px;    
}     
</style>         

External: This is used to apply the style to all the pages within your website by changing just one style sheet.

Syntax

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

44- What are the different units used in CSS?

CSS has two types of lengths. Relative length and absolute length. Different units are used for them.

Relative Length

UNITDESCRIPTION
emRelative to the font-size of the element (2em means 2 times the size of the current font)
exRelative to the x-height of the current font (rarely used)
chRelative to the width of the “0” (zero)
remRelative to font-size of the root element
vwRelative to 1% of the width of the viewport*
vhRelative to 1% of the height of the viewport*
vminRelative to 1% of viewport’s* smaller dimension
vmaxRelative to 1% of viewport’s* larger dimension
%Relative to the parent element

Absolute Length

UNITDESCRIPTION
CMcentimetres
MMmillimetres
INinches (1in = 96px = 2.54cm)
PXpixels (1px = 1/96th of 1in)
PTpoints (1pt = 1/72 of 1in)
PCpicas (1pc = 12 pt)

45- How do you control image repetition using CSS?

You can use the background-repeat property to control image.

h1 {
background-repeat: none;
 }

46- What is the overflow property in CSS used for?

The overflow property specifies what should happen if content overflows an element’s box. This property specifies whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area. Below are the overflow options available in CSS – 

overflow: auto;

overflow: none;

overflow: scroll;

overflow: visible;

47- What is the use of box-shadow in CSS?

The box-shadow CSS property adds shadow effects around an element’s frame. You can set multiple effects separated by commas. A box-shadow is described by X and Y offsets relative to the element, color, blur and spread radii. Below are a few implementations of box-shadow

box-shadow: 10px 5px 5px red;

box-shadow: 60px -16px teal;

box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);

box-shadow: inset 5em 1em gold;

48- How can the dimension be defined of an element ?

Dimension properties can be defined by:

  • Height
  • Max-height
  • Max-width
  • Min-height
  • Min-width
  • Width

49- How comments can be added in CSS?

The comments in CSS can be added with /* and */.

50- What’s the difference between a relative, fixed, absolute and statically positioned element?

A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky.

  • Static
    The default position; the element will flow into the page as it normally would. The top, right, bottom, left and z-index properties do not apply.
  • Relative
    The element’s position is adjusted relative to itself, without changing the layout (and thus leaving a gap for the element where it would have been had it not been positioned).
  • Absolute
    The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins. These elements do not affect the position of other elements.
  • Fixed
    The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn’t move when scrolled.
  • Sticky
    Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

Start learning HTMLCSS and JavaScript.

Test your skills with Amazing Quizzes.

Also Read :

Leave a Comment

Your email address will not be published. Required fields are marked *