31st
Dec
CSS interview questions

CSS Interview Questions

  • Prashant Bhusan
  • 31st Dec, 2020
  • 366 Followers
Cascading style sheet, or else CSS, is a format of programming language which is used for label presentations of a mark-up language. By utilizing CSS, you can better control the look and the feel of the websites you are designing.CSS can be defined in the head section or put in a separate file and referenced from the HTML file or both. CSS consists of definitions of how a page component should render itself on the page.It saves time and gives consistency styling to all the web pages on any website. If you have a large website that has many pages then changing one element in your website will bring change to that element in every page.CSS loads the website faster. As I mentioned above, since there are fewer codes in CSS and HTML, the page will load faster. It will give a good user experience.

CSS interview questions

1) What is CSS?

CSS stands for Cascading Style Sheets. It is used to describe the presentation of the documents usually written in the markup language like HTML. It is believed to be the base of the technology of the world wide web like HTML and JavaScript.

2) What are the advantages of using CSS?

There are numerous advantages of using CSS

  • It gives lots of flexibility for setting the properties of the element
  • Easy maintenance
  • It allows separation of the content of the HTML document from the style and layout of the content basically
  • Loading of pages at a faster pace
  • Compatibility with multiple devices
  • Increases the website’s adaptability and makes it compatible with future browsers

3) What is the origin of CSS?

CSS is originated from SGML (Standard Generalized Markup Language) which is a language that defines markup languages.

4) List different versions of CSS?

There are mainly 3 versions of CSS are available. They are CSS 1, CSS 2 , CSS 3, CSS4.

5) What are the limitations of CSS?

Several limitations of CSS are:

  • CSS can't fulfill turning completeness hence, it can never perform logical like 'if/else', for/while, etc, or arithmetical tasks
  • One cannot read files using CSS
  • It cannot provide total control over document display and allows the contents of the page to come through whatever the browser is used.
  • Ascending by selectors is not possible
  • Limitations of vertical control
  • No expressions as it is a text-based coding language
  • No column declaration
  • Pseudo-class not controlled by dynamic behavior
  • Rules, styles, targeting specific text not possible
Download Free : CSS interview questions PDF

6) In how many ways can a CSS be integrated as a web page?

There are three ways of integrating CSS on the web page which is mentioned below: -

  • Inline: In this, Style property can be applied to possess CSS implemented HTML elements.
  • Embedded: In this, the Head element can possess the Style element inside which the code can be fixed.
  • Linked/ Imported: In this, CSS can be put in an external file and can be linked via a link element.

7) What merits and demerits do External Style Sheets have?

Merits of external Style Sheets: The biggest advantages of external style sheets are that they can be applied to multiple documents while being managed from a single style sheet. This keeps code DRY and improves efficiency and convenience.

De-merits of external Style Sheets: It may decrease loading time in some situations. It may also not be practical if there are not enough styling conditions to justify an external sheet.

8) What is CSS Box Model?

CSS box model is a container that contains multiple properties including borders, margin, padding and the content itself. It is used to create the design and layout of web pages and can be used as a toolkit for customizing the layout of different elements.

According to the CSS box model, every element renders as a rectangular box. The description of some properties of the CSS box model is given below:

  • Border Area: As the name represents, it is the area between the margin and the box's padding.
  • Margin Area: This area occupies space between the border and the margin.
  • Padding Area: It holds the element’s padding. It occupies the space around the content area and within the border-box.
  • Content Area: This area involves content like image, text, or other media content.

9) Enlist some popular CSS frameworks?

Below is the list of best CSS Frameworks

  • Bootstrap: Bootstrap is one of the most popular CSS Frameworks.It is free and open source.
  • Foundation: The most advanced responsive front-end framework in the world
  • Materialize CSS: A modern responsive front-end framework based on Material Design
  • Bulma: Bulma is a free and open-source CSS framework based on the Flexbox layout model.
  • UIKIT: A lightweight and modular front-end framework for creating fast and powerful web interfaces
  • Pure: It is a lightweight and responsive CSS framework created by Yahoo in 2014. It is built using Normalize.css and help you create responsive layouts using its Grids and Menus.
  • Semantic UI: Semantic UI is a responsive front-end framework that uses human-friendly HTML.
  • Milligram: Milligram is one of the lightest CSS frameworks that can help you design fast and clean websites.
  • Skeleton: Skeleton is a minimal responsive CSS framework which contains only 400 lines of source code.
  • Spectre: Spectre.css is a great framework that can help you do faster and extensible development with the elegantly designed elements, beautiful typography, and pre-built components.

10) What is Embedded Style Sheet?

Embedded style sheets allow you to define styles for the whole HTML document in one place. Embedded style sheets refer to when you embed style sheet information into an HTML document using the <style> element. You do this by embedding the style sheet information within <style></style> tags in the head of your document.

Take Free: Css MCQ & Quiz

11) What is the purpose of the z-index and how is it used?

The z-index property specifies the stack order of an element. An element with a greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky). The default z-index of an element is 0 or auto.

12) What are the benefits of CSS sprites?

CSS Sprites is the way of combining several images into a single image file so that it can be used on a website efficiently. It helps to increase the performance of the website.

13) Enlist the various css media types?

Various types of media available in CSS are:

Media Type Description
all

Suitable/intended for all devices (default).

aural

Intended for speech synthesizers.

braille

Intended for braille tactile feedback devices.

embossed

Intended for paged braille printers.

handheld

Intended for handheld devices (typically small screen, monochrome, limited bandwidth). 

print

Intended for printed documents (applies to docs viewed in print preview mode too).

projection Intended for projected presentations (ie: projectors or print to transparencies).
screen Intended for computer screens.
tty Intended for media using a fixed-pitch character grid (ie: teletypes or terminals).
tv Intended for television-type devices.

14) What are Pseudo-elements?

A pseudo-element is used to apply a CSS style to the specific parts of the HTML element. The specific part may be the first line, letter, before or after a line or letter of an element.

//syntax

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

//example

p::first-line { 
font-variant: small-caps; 
} 

Here, the above code will apply the style to the first line of the paragraph. By the same way you can do for the first letter(::first-letter), before content(::before), after content(::after), and selection(::selection).

15) What is a CSS selector?

CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc. There are several different types of selectors in CSS.

16) What is use of Class selector?

Class selector in css is used to select all elements which belong to a particular class attribute. To select the elements with a particular class, use (.) character with specifying class name. Class name is mostly used to set the CSS property to given class.

17) What is the use of CSS Opacity?

The opacity property in CSS is used to specify how transparent an element is. Opacity has a default initial value of 1 (100% opaque). Opacity is not inherited, but because the parent has an opacity that applies to everything within it.

18) What is the use of ruleset?

A rule or "rule set" in CSS is a statement that tells browsers how to render particular elements on an HTML page. A rule set consists of a selector followed by a declaration block.

Example

p {
  color: red;
  text-align: center;
}

You can see above code of css as a ruleset for applying css for all p elements of html.

19) What is use of float property of CSS?

CSS float is a property that forces any element to float (right, left, none, inherit) inside its parent body with the rest of the element to wrap around it. This property can be used to place an image or an element inside its container and other inline elements will wrap around it.

20) What are CSS counters?

CSS counters are like variables that are managed by the CSS. These values are expanded by CSS rules so that they can be traced and can see how many times they are used. It allows the adjustment in the appearance of content concerning its location in a document.

CSS counters have some properties which are mentioned below: -

  • counter-reset: It is applied to reset a counter.
  • counter-increment: It enlarged a counter value.
  • content: It is utilized to create content.
  • counter() or counters() function: These are related to combining the value of a counter to the element.

21) What are gradients in CSS?

CSS gradients help you to display transitions between more than two colors. In order to create a linear gradient, you must represent at least two color stops. Color stops are the colors you desire to render smooth transitions among. In addition to the gradient effect, you can also set a starting point and a direction.

The syntax for creating the gradient in CSS is

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

22) What is use of @import in CSS?

The @import rule allows you to import a style sheet into another style sheet. The @import rule must be at the top of the document (but after any @charset declaration). The @import rule also supports media queries, so you can allow the import to be media-dependent.

23) What are Combinators in CSS?

Css combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS:

  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)

24) Explain Universal selector in CSS?

Universal selectors in CSS can select any type of elements in an HTML page. It matches a single element. An asterisk ( i.e. "*" ) is used to denote a CSS universal selector. An asterisk can also be followed by a selector.

25) What is Alpha channel in CSS?

Alpha channel is the color element that defines the degree of opacity of a color. In this way, it can tell how a pixel is rendered when mixed with another.

26) What is the viewport?

A viewport is an area of a web page that is visible to the users. Viewport area/space varies from device to device.

27) What is Tweening?

Tweening is the process of generating in-between frames i.e. developing frames between two images to create an appearance in which the first image generates its replica into the second image.

In CSS we use the term "animate". It is the most powerful and comfortable way to build animate objects.

28) What is the default z-index of an element?

The default z-index value of all the elements on a web page is auto, which corresponds to 0 where no z-index is assigned. An element with z-index: -1 will be displayed behind all other elements on the page, assuming they are given no z-index values.

29) What is difference between "resetting" and "normalizing" CSS?

Difference between "resetting" and "normalizing" CSS

Resetting: Resetting is meant to strip all default browser styling on elements. For e.g. margin s, padding s, font-sizes of all elements are reset to be the same.

Normalizing: Normalizing preserves useful default styles rather than "unstyling" everything. It also corrects bugs for common browser dependencies.

30) Enlist the various fonts attributes available in CSS?

Various fonts attribute available in CSS are:

  • Font-family: To change the face of font, font-family is used.
  • Font-style: used to get a font italic or oblique.
  • Font-variant: used to build a small-caps effect.
  • Font-weight: used to enhance or diminish how bright or light a font appears.
  • Font-size: used to expand or reduce the size of a font.
  • Font: used to define the number of other font properties.

31) What is primary difference between transition and transform?

CSS Transitions and transforms are completely different things.

CSS Transitions: It allows property changes in CSS values to occur smoothly over a specified duration.

CSS transforms: It allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space.

32) What is RWD?

RWD stands for Responsive web design which was built to make your web page look amaze on all devices.

33) What is difference between id and class selector in CSS?

In CSS, an Id is used to identify/select only one element whereas Class is utilized to identify more than one element.

// defining a title selector
#title{
// some css
}
// defining a class selector
.title{
// some css
}

34) What are contextual selectors in css?

Contextual selectors in CSS allow you to specify different styles for different parts of your document. You can assign styles directly to specific HTML tags, or you can create independent classes and assign them to tags in the HTML. Either approach lets you mix and match styles.

35) What are different element positions in Css?

There are five different position values in CSS. They are

  • static.
  • relative.
  • fixed.
  • absolute.
  • sticky.

36) What are the Pseudo classes?

These classes are used to define a special state of an element. You can use them for

  • Style an element when someone mouses over it
  • Style visited and unvisited links differently
  • Style an element when it gets focus

Leave A Comment :

Valid name is required.

Valid name is required.

Valid email id is required.