CSS Interview Questions

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.

What is the origin of CSS?

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

What are the different variations of CSS?

Following are the different variations of CSS:9.5M172Difference between JDK, JRE, and JVM

CSS1
CSS2
CSS2.1
CSS3
CSS4

CSS Interview Questions

How can you integrate CSS on a web page?

There are three methods to integrate CSS on web pages.

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

What are the advantages of CSS?

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

What are the limitations of CSS?

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

Advance CSS Interview Questions

Why background and color are the separate properties if they should always be set together?

There are two reasons behind this:

It enhances the legibility of style sheets. The background property is a complex property in CSS, and if it is combined with color, the complexity will further increase.
Color is an inherited property while the background is not. So this can make confusion further.

What is Embedded Style Sheet?

An Embedded style sheet is a CSS style specification method used with HTML. You can embed the entire stylesheet in an HTML document by using the STYLE element.

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

What are the advantages of Embedded Style Sheets?

You can create classes for use on multiple tag types in the document.
You can use selector and grouping methods to apply styles in complex situations.
No extra download is required to import the information.

CSS Interview Questions

What is a CSS selector?

It 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: –

CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector

Name some CSS style components.

Some CSS Style components are:

Selector
Property
Value

What is the use of CSS Opacity?

The CSS opacity property is used to specify the transparency of an element. In simple word, you can say that it specifies the clarity of the image. In technical terms, Opacity is defined as the degree to which light is allowed to travel through an object. For example:

<style>    
img.trans {    
    opacity: 0.4;    
    filter: alpha(opacity=40); /* For IE8 and earlier */    
}    
</style>

Advance CSS Interview Questions

Which command is used for the selection of all the elements of a paragraph?

The p[lang] command is used for selecting all the elements of a paragraph.

What is the use of % unit?

It is used for defining percentage values.

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>

Advance CSS Interview Questions

Name the property for controlling the image repetition of the background.

The background-repeat property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically.

<style>    
body {    
background-image: url("paper1.gif");    
margin-left:100px;    
}    
</style>

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:

center
top
bottom
left
right

Name the property for controlling the image scroll in the background.

The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in the browser window. If you set fixed the background image, then the image not move during scrolling in the browser. Let’s take an example with the fixed background image.

CSS Interview Questions

What is the use of ruleset?

The ruleset is used to identify that selectors can be attached with other selectors. It has two parts:

Selector – Selector indicates the HTML element you want to style.
Declaration Block – The declaration block can contain one or more declarations separated by a semicolon.

What is the difference between class selectors and id selectors?

An overall block is given to class selector while id selectors take only a single element differing from other elements.

CSS Class Selector

<style>    
.center {    
    text-align: center;    
    color: blue;    
}    
</style>

CSS Id Selector

<style>    
#para1 {    
    text-align: center;    
    color: blue;    
}    
</style>

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>

Advance CSS Interview Questions

What is RWD?

RWD stands for Responsive Web Design. This technique is used to display the designed page perfectly on every screen size and device, for example, mobile, tablet, desktop and laptop. You don’t need to create a different page for each device.

What are the benefits of CSS sprites?

If a web page has a large number of images that take a longer time to load because each image separately sends out an HTTP request. The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of HTTP requests and hence the loading time.

What is the difference between logical tags and physical tags?

Physical tags are referred to as presentational markup while logical tags are useless for appearances.
Physical tags are newer versions, on the other hand, logical tags are old and concentrate on content.

CSS Interview Questions

What is the CSS Box model and what are its elements?

The CSS box model is used to define the design and layout of elements of CSS.

The elements are:

Margin – It removes the area around the border. It is transparent.
Border – It represents the area around the padding
Padding – It removes the area around the content. It is transparent.
Content – It represents the content like text, images, etc.

How to restore the default property value using CSS?

In short, there is no easy way to restore to default values to whatever a browser uses.

The closest option is to use the ‘initial’ property value, which restores the default CSS values, rather than the browser’s default styles.

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

The z-index helps to 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.

Advance CSS Interview Questions

Explain the difference between visibility: hidden and display: none?

visibility: hidden hides the element, but it occupies space and affects the layout of the document.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h1.vis {  
    visibility: visible;  
}  
  
h1.hid {  
    visibility: hidden;  
}  
</style>  
</head>  
<body>  
<h1 class="vis">It is visible</h1>  
<h1 class="hid">It is hidden</h1>  
  
<p>Note - Second heading is hidden, but it still occupy space.</p>  
</body>  
</html>

display: none also hides the element but not occupy space. It will not affect the layout of the document.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h1.vis {  
    display: block;  
}  
  
h1.hid {  
     display: none;  
}  
</style>  
</head>  
<body>  
<h1 class="vis">It is visible</h1>  
<h1 class="hid">It is hidden</h1>  
  
<p>Note - Second heading is hidden and not occupy space.</p>  
</body>  
</html>

What do you understand by W3C?

W3C stands for World Wide Web Consortium. Its purpose is to deliver the information of the World Wide Web. It also develops rules and guidelines for the Web.

What is tweening ?

It is the process of generating intermediate frames between two images.

It gives the impression that the first image has smoothly evolved into the second one.

It is an important method used in all types of animations.

In CSS3, Transforms (matrix, translate, rotate, scale) module can be used to achieve tweening.

CSS Interview Questions

What is the difference between CSS2 and CSS3?

The main difference between CSS2 and CSS3 is that CSS3 is divided into different sections which are also known as modules. Unlike CSS2, CSS3 modules are supported by many browsers.

Apart from that, CSS3 contains new General Sibling Combinators which is responsible for matching the sibling elements with the given elements.

What are the advantages of using CSS?

The main advantages of CSS are given below:

Separation of content from presentation – CSS provides a way to present the same content in multiple presentation formats in mobile or desktop or laptop.
Easy to maintain – CSS, built effectively can be used to change the look and feel complete by making small changes. To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
Bandwidth – Used effectively, the style sheets will be stored in the browser cache and they can be used on multiple pages, without having to download again.

How to include CSS in the webpage?

There are different ways to include a CSS in a webpage,

1 – External Style Sheet: An external file linked to your HTML document: Using link tag, we can link the style sheet to the HTML page.

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

2 – Embed CSS with a style tag: A set of CSS styles included within your HTML page.

<style type="text/css">

/*Add style rules here*/

</style>

Add your CSS rules between the opening and closing style tags and write your CSS exactly the same way as you do in stand-alone stylesheet files.

3 – Add inline styles to HTML elements(CSS rules applied directly within an HTML tag.): Style can be added directly to the HTML element using a style tag.

<h2 style="color:red;background:black">Inline Style</h2>

4 – Import a stylesheet file (An external file imported into another CSS file): Another way to add CSS is by using the @import rule. This is to add a new CSS file within CSS itself.

@import "path/to/style.css";

Advance CSS Interview Questions

What are the different types of Selectors in CSS?

A CSS selector is the part of a CSS ruleset that actually selects the content you want to style. Different types of selectors are listed below.

Universal Selector: The universal selector works like a wildcard character, selecting all elements on a page. In the given example, the provided styles will get applied to all the elements on the page.

* {
  color: "green";
  font-size: 20px;
  line-height: 25px;
}

Element Type Selector: This selector matches one or more HTML elements of the same name. In the given example, the provided styles will get applied to all the ul elements on the page.

ul {
  line-style: none;
  border: solid 1px #ccc;
}

ID Selector: This selector matches any HTML element that has an ID attribute with the same value as that of the selector. In the given example, the provided styles will get applied to all the elements having ID as a container on the page.

#container {
  width: 960px;
  margin: 0 auto;
}

<div id="container"></div>

Class Selector: The class selector also matches all elements on the page that have their class attribute set to the same value as the class. In the given example, the provided styles will get applied to all the elements having ID as the box on the page.

.box {
  padding: 10px;
  margin: 10px;
  width: 240px;
}

<div class="box"></div>

Descendant Combinator: The descendant selector or, more accurately, the descendant combinator lets you combine two or more selectors so you can be more specific in your selection method.

#container .box {
	float: left;
	padding-bottom: 15px;
} 

<div id="container">
	<div class="box"></div>
	
	<div class="box-2"></div>
</div>

<div class=”box”></div>

This declaration block will apply to all elements that have a class of box that is inside an element with an ID of the container. It’s worth noting that the .box element doesn’t have to be an immediate child: there could be another element wrapping .box, and the styles would still apply.

Child Combinator: A selector that uses the child combinator is similar to a selector that uses a descendant combinator, except it only targets immediate child elements.

#container> .box {
	float: left;
	padding-bottom: 15px;
}

<div id="container">
	<div class="box"></div>
	
	<div>
		<div class="box"></div>
	</div>
</div>

The selector will match all elements that have a class of box and that are immediate children of the #container element. That means, unlike the descendant combinator, there can’t be another element wrapping .box it has to be a direct child element.

General Sibling Combinator: A selector that uses a general sibling combinator to match elements based on sibling relationships. The selected elements are beside each other in the HTML.

h2 ~ p {
	margin-bottom: 20px;
}

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<div class=”box”>
	<p>Paragraph example.</p>
</div>

In this example, all paragraph elements (<p>) will be styled with the specified rules, but only if they are siblings of <h2> elements. There could be other elements in between the <h2> and <p>, and the styles would still apply.

Adjacent Sibling Combinator: A selector that uses the adjacent sibling combinator uses the plus symbol (+), and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling.

p + p {
	text-indent: 1.Sem;
	margin-bottom: 0;
}

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>

<div class=”box”>
	<p>Paragraph example.</p>
	<p>Paragraph example.</p>
</div>

The above example will apply the specified styles only to paragraph elements that immediately follow other paragraph elements. This means the first paragraph element on a page would not receive these styles. Also, if another element appeared between two paragraphs, the second paragraph of the two wouldn’t have the styles applied.

Attribute Selector: The attribute selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets.

input [type=”text”] {
	background-color: #444;
	width: 200px;
}

<input type="text">

What is a CSS Preprocessor? What are Sass, Less, and Stylus? Why do people use them?

A CSS Preprocessor is a tool used to extend the basic functionality of default vanilla CSS through its own scripting language. It helps us to use complex logical syntax like – variables, functions, mixins, code nesting, and inheritance to name a few, supercharging your vanilla CSS.

SASS: Sass is the acronym for “Syntactically Awesome Style Sheets”. SASS can be written in two different syntaxes using SASS or SCSS

SASS vs SCSS

SASS is based on indentation and SCSS(Sassy CSS) is not.
SASS uses .sass extension while SCSS uses .scss extension.
SASS doesn’t use curly brackets or semicolons. SCSS uses it, just like the CSS.

SASS Syntax

$font-color: #fff 
$bg-color: #00f

#box
	color: $font-color
	background: $bg-color

SCSS Syntax

$font-color: #fff;
$bg-color: #00f;

#box{
	color: $font-color;
	background: $bg-color;
}

LESS: LESS is an acronym for “Leaner Stylesheets”. LESS is easy to add to any JavaScript projects by using NPM or less.js file. It uses the extension .less.

LESS syntax is the same as the SCSS with some exceptions. LESS uses @ to define the variables.

@font-color: #fff;
@bg-color: #00f

#box{
	color: @font-color;
	background: @bg-color;
}

Stylus: Stylus offers a great deal of flexibility in writing syntax, supports native CSS as well as allows omission of brackets, colons, and semicolons. It doesn’t use @ or $ for defining variables.

/* STYLUS SYNTAX WRITTEN LIKE NATIVE CSS */
font-color= #fff;
bg-color = #00f;

#box {
	color: font-color;
	background: bg-color;
}

/* OR */

/* STYLUS SYNTAX WITHOUT CURLY BRACES */
font-color= #fff;
bg-color = #00f;

#box
	color: font-color;
	background: bg-color;

What is VH/VW (viewport height/ viewport width) in CSS?

It’s a CSS unit used to measure the height and width in percentage with respect to the viewport. It is used mainly in responsive design techniques. The measure VH is equal to 1/100 of the height of the viewport. If the height of the browser is 1000px, 1vh is equal to 10px. Similarly, if the width is 1000px, then 1 vw is equal to 10px.

CSS Interview Questions

Difference between reset vs normalize CSS?. How do they differ?

Reset CSS: CSS resets aim to remove all built-in browser styling. For example margins, paddings, font-sizes of all elements are reset to be the same.

Normalize CSS: Normalize CSS aims to make built-in browser styling consistent across browsers. It also corrects bugs for common browser dependencies.

What is the difference between inline, inline-block, and block?

Block Element: The block elements always start on a new line. They will also take space for an entire row or width. List of block elements are <div>, <p>.

Inline Elements: Inline elements don’t start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are <a>, <span> , <strong>, and <img> tags.

Inline Block Elements: Inline-block elements are similar to inline elements, except they can have padding and margins added on all four sides.

How do you test the webpage in different browsers?

It’s most important to test a website in different browsers when you’re first designing it, or when making major changes. However, it’s also important to repeat these tests periodically, since browsers go through a lot of updates and changes.

Advance CSS Interview Questions

What is a Pseudo element? What is pseudo-class?

Pseudo-classes select regular elements but under certain conditions like when the user is hovering over the link.

:link
:visited
:hover
:active
:focus

Example of the pseudo-class, In the below example, the color applies to the anchor tag when it’s hovered.

/* mouse over link */
a:hover {
	color: #FFOOFF;
}

A pseudo-element however allows us to create items that do not normally exist in the document tree, for example ::after.

::before
::after
::first-letter
::first-line
::selection

In the below example, the color will appear only on the first line of the paragraph.

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

How do you specify units in the CSS?. What are the different ways to do it?

There are different ways to specify units in CSS like px, em, pt, percentage (%). px(Pixel) gives fine-grained control and maintains alignment because 1 px or multiple of 1 px is guaranteed to look sharp. px is not cascade. em maintains relative size. you can have responsive fonts. Em, will cascade 1em is equal to the current font-size of the element or the browser default. If u sent font-size to 16px then 1em = 16px. The common practice is to set default body font-size to 62.5% (equal to 10px).

pt(point) are traditionally used in print. 1pt = 1/72 inch and it is a fixed-size unit.

%(percentage) sets font-size relative to the font size of the body. Hence, you have to set the font-size of the body to a reasonable size.

Explain CSS position property?

Absolute

To place an element exactly where you want to place it. absolute position is actually set relative to the element’s parent. if no parent is available then the relative place to the page itself (it will default all the way back up to the element).

Relative

“Relative to itself”. Setting position: relative; on an element and no other positioning attributes, it will no effect on its positioning. It allows the use of z-index on the element and it limits the scope of absolutely positioned child elements. Any child element will be absolutely positioned within that block.

Fixed

The element is positioned relative to the viewport or the browser window itself. viewport doesn’t change if you scroll and hence the fixed element will stay right in the same position.

Static

Static default for every single page element. The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control.

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.

CSS Interview Questions

What does DOM reflow occur?

Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document.

Reflow occurs when:

Insert, remove or update an element in the DOM.
Modify content on the page, e.g. the text in an input box.
Move a DOM element.
Animate a DOM element.
Take measurements of an element such as offsetHeight or getComputedStyle.
Change a CSS style.

Different Box Sizing Property?

The box-sizing CSS property sets how the total width and height of an element are calculated.

Content-box: The default width and height values apply to the element’s content only. The padding and border are added to the outside of the box.

Padding-box: Width and height values apply to the element’s content and its padding. The border is added to the outside of the box. Currently, only Firefox supports the padding-box value.

Border-box: Width and height values apply to the content, padding, and border.

How to center align a div inside another div?

Centering with table

HTML:

<div class=”cn”><div class=”inner”>your content</div></div>

CSS:

.cn {
	display: table-cell;
	width: 500px;
	height: 500px;
	vertical-align: middle;
	text-align: center;
}

.inner {
	display: inline-block;
	width: 200px; height: 200px;
}

Centering with transform

HTML:

<div class="cn"><div class="inner">your content</div></div>

CSS:

.cn {
	position: relative;
	width: 500px;
	height: 500px;
}

.inner {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	width: 200px;
	height: 200px;
}

Centering with flexbox

HTML:

<div class="cn"><div class="inner">your content</div></div>

CSS:

.cn {
	display: flex;
	justify-content: center;
	align-items: center;
}

Centering with grid

HTML:

<div class=”wrap_grid”>
	<div id=”container”>vertical aligned text<br />some more text here
	</div>
</div>

CSS:

.wrap-grid {
	display: grid;
	place-content: center;
}

Advance CSS Interview Questions

Can you name the four types of @media properties?

The four types of @media properties are:

All → It’s the default property. Used for all media-type devices.
Screen → Used for computer screen, mobile screen.
Print → Used for printers.
Speech → Used for screen readers.

What is the grid system?

CSS Grid Layout is the most powerful layout system available in CSS. It is said to be a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.

Does margin-top or margin-bottom have an effect on inline elements?

No, it doesn’t affect the inline elements. Inline elements flow with the contents of the page.

CSS Interview Questions

What is Responsive Web design?

Responsive Web design is the method that recommends that design and development should reply to the user’s activities and situation based on various components such as size of the screen, the platform and the orientation. The preparation comprises of a mix of flexible layouts and grids, images and an intellectual use of CSS media queries.

What is the syntax to link external style sheet?

External style sheet comprises of style description that can be linked with the HTML document externally. To keep style separate from the structure, External style sheet is one of the best and organized way.

The syntax for using link External style sheet is as follows :

<HTML>
<HEAD>
<LINK REL=STYLESHEET HREF="Test.css" TYPE="text/css">
</HEAD>
</HTML>

How embedded style can be linked with HTML documents?

Embedded style can be implemented within HTML code. It is written using the <Style> tag and used under the <Head> structure.

The syntax of it is as follows :

<HEAD>
<STYLE TYPE=”text/css”>
style {text-indent: 15pt;}
style1{text-color: #060000;}
</STYLE>
</HEAD>

Advance CSS Interview Questions

Why imported is an easy way to insert the file?

Imported style sheet permits you to import the files which are external or combine one style sheet with another. There can be created many files, different style sheets to have different functions. Import function gives the provision to combine many elements or functionality into one. The syntax to import any file is @import notation, which is used inside the <Style> tag. There is a one rule that implies that the last imported sheet will override the previous ones.

The syntax is shown by coding as :

<Link Rel=Stylesheet Href=”Main.Css” Type=”Text/Css”>
<STYLETYPE=”text=css”>
<!–
@import url(http://www.xyz.css);
…. your code
–>
</STYLE>

What are the different ways to integrate CSS in an HTML page?

There are three ways to integrate CSS into an HTML page:

a. Inline CSS

Inline CSS contains the CSS property in the body section, attached with the element. This style is specified within the HTML tag using the ‘ style’ attribute.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Inline CSS</title>

</head>

<body>

<p style = “color:#009999; font-size:40px;

font-style:italic; text-align:center;”>

Interview Kickstart

</p>

</body>

</html>

b. Internal or Embedded CSS

Internal CSS can be used to style a single HTML page uniquely. Here, the CSS file must be placed inside the HTML page in the ‘Head’ section.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Internal CSS</title>

<style>

.main {

text-align:center;

}

.IK {

color:#009999;

font-size:50px;

font-weight:bold;

}

.interview {

font-style:bold;

font-size:20px;

}

</style>

</head>

<body>

<div class =”IK”>Interview Kickstart</div>

Interview Kickstart is like a fitness coach which guides you to achieve your dream job.

</div>

</body>

</html>

c. External CSS

External CSS contains a separate CSS file having a . CSS extension. This file contains only styling properties with the help of tag attributes. It should be linked to the HTML file using the ‘link’ tag. This CSS file can be used on multiple web pages.

Example:

ik.css

body {

background-color:powderblue;

}

.main {

text-align:center;

}

.IK {

color:#009900;

font-size:50px;

font-weight:bold;

}

#interview {

font-style:bold;

font-size:20px;

}

HTML File

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div class =”IK”>Interview Kickstart</div>

Interview Kickstart is like a fitness coach which guides you to achieve your dream job.

</div>

</body>

</html>

What is the difference between an ‘ID’ and a ‘Class’?

ID: IDs are unique. Each ID can be assigned to only one single element. IDs are used for a specific styling of an element.

Syntax:

#submit {

Position: absolute;

}

Class: Classes are not unique. Multiple elements can have the same class. A class is a collective way of styling multiple elements together. Multiple classes can be added to a single element to achieve the desired style.

Syntax:

.button {

font-color: yellow;

}

CSS Interview Questions

Name a few prominent CSS frameworks

Following are some important frameworks in the web development industry:

Bootstrap: Bootstrap is the most popular CSS framework for developing responsive and mobile-first websites.
Foundation: Foundation is a responsive front-end framework that provides a responsive grid, HTML and CSS UI components, and code snippets like typography, forms, buttons, navigation, and other UI elements.
Semantic UI: Semantic UI is a modern front-end development framework powered by LESS (CSS-preprocessor) and jQuery.
UIkit: UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

How do CSS precedence/cascading rules work? How does the !important directive affect the rules?

CSS style rules “cascade” in the sense that they follow an order of precedence. Global style rules apply first to HTML elements, and local style rules override them. For example, a style defined in a style element in a webpage overrides a style defined in an external style sheet. Similarly, an inline style that is defined in an HTML element in the page overrides any styles that are defined for that same element elsewhere. The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

What Can Be Done With Style Sheets That Can Not Be Accomplished With Regular Html?

Many of the recent extensions to HTML have been tentative and somewhat crude attempts to control document layout. Style sheets go several steps beyond, and introduces complex border, margin and spacing control to most HTML elements. It also extends the capabilities introduced by most of the existing HTML browser extensions. Background colors or images can now be assigned to ANY HTML element instead of just the BODY element and borders can now be applied to any element instead of just to tables. For more information on the possible properties in CSS, see the Index DOT CSS Property Index.

Advance CSS Interview Questions

Why Shouldn’t I Use Fixed Sized Fonts ?

Only in very rare situations we will find users that have a “calibrated” rendering device that shows fixed font sizes correct. This tells us that we can never know the real size of a font when it’s rendered on the user end. Other people may find your choice of font size uncomfortable. A surprisingly large number of people have vision problems and require larger text than the average. Other people have good eyesight and prefer the advantage of more text on the screen that a smaller font size allows. What is comfortable to you on your system may be uncomfortable to someone else. Browsers have a default size for fonts. If a user finds this inappropriate, they can change it to something they prefer. You can never assume that your choice is better for them. So, leave the font size alone for the majority of your text. If you wish to change it in specific places (say smaller text for a copyright notice at the bottom of page), use relative units so that the size will stay in relationship to what the user may have selected already. Remember, if people find your text uncomfortable, they will not bother struggling with your web site. Very few (if any) web sites are important enough to the average user to justify fighting with the author’s idea of what is best.

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.

Why background and color are the separate properties if they should always be set together?

There are two reasons behind this:

It enhances the legibility of style sheets. The background property is a complex property in CSS, and if it is combined with color, the complexity will further increase.
Color is an inherited property while the background is not. So this can make confusion further.

CSS Interview Questions

What are the advantages and disadvantages of using a CSS pre-processor?

The usage depends on the type of project but the following advantages/disadvantages come with a preprocessor.

Advantages:

CSS is made more maintainable.
Easy to write nested selectors.
Variables for consistent theming. Can share theme files across different projects.
Mixins to generate repeated CSS.
Sass features like loops, lists, and maps can make configuration easier and less verbose.
Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.

Disadvantages:

Requires tools for preprocessing. Re-compilation time can be slow.
Not writing currently and potentially usable CSS. For example, by using something like postcss-loader with webpack, you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you’re learning new skills that could pay off if/when they become standardized.

How would you implement the basic layout components of the box model in CSS? Give an example.

Each element of the box model—border, content, margin, and padding—can be specified independently for each side of the element by listing dimensions in the following order: top, bottom, right, and left. Alternatively, multiple sides can be specified as a group by listing fewer parameters.

How is clearfix css property useful?

A clear fix is a way for an element to automatically clear its child elements, so that you don’t need to add additional markup. It’s generally used in float layouts where elements are floated to be stacked horizontally.

Advance CSS Interview Questions

What is your least favorite part of working with CSS?

All people have things that they don’t like about their jobs. An honest answer to this question can help you place an applicant with the right team. For instance, if a person loves finding errors in CSS files, you may want to hire that applicant to work on a project with creative people who prefer focusing on the big picture.

What to look for in an answer:

Understanding the pros and cons of CSS.
Knowing what role the applicant could play.
Learning about the applicant’s other interests.

What happens to text if ‘auto’ value is assigned to overflow property, to the element containing the text?

If text overflows, it is clipped and scroll bar appears.

Does overflow: hidden create a new block formatting context?

overflow property deals with the content if content size exceeds the allocated size for the content. You can make extra content visible, hidden, scroll or auto (viewport default behavior).

CSS Interview Questions

How can you load CSS resources conditionally?

@import allows you to load/ import stylesheet by using a path (uri) representing the location of the file. You can define one or more media by comma separation for which you want to load the stylesheet. If browser don’t support the media stylesheet will not be loaded.

How does inheritance work in CSS?

Inheritance is a concept that is used in HTML and other languages but it is used in CSS as well to define the hierarchy of the element from top level to bottom level. In inheritance child will inherit the properties of parent. In this the restriction is being applied that not all the properties can be applied. Inheritance passes its properties to its children class so that the same property doesn’t have to define the same property. Inherited properties can be override by the children class if child uses the same name properties.

Do you use any CSS preprocessors, and which do you prefer?

If you’re working on a medium to large project, it’d be a good idea to use a CSS preprocessor. They allow you to write more concise CSS, split it up into multiple files and use a large number of very useful functions and mixins (you can even create your own!), along with variables.

Advance CSS Interview Questions

What are web safe fonts and fallback fonts?

Not all operating systems and browsers have the same fonts installed. Web safe fonts are fonts that are commonly pre-installed on many computer systems, such as Arial and Times New Roman. In case the browser or operating system doesn’t recognize the first font you set (e.g. Ubuntu), you should choose a web safe fallback font to display (e.g. Arial), followed by a generic font family (e.g. sans-serif). If your fallback font doesn’t display either, the browser can pick a generic font in the sans-serif family.

Explain the preferred way of font sizing?

In CSS, defining the font size is very important for making the content as per the requirements. The size of the text mainly focused on the units that you have used. The units can be px, em, rem, %, vs, and vh. Mainly pixel (px) is used for defining the font sizes. As we know that all the browsers do not support the same fonts. Mainly web-safe fonts are installed in the systems and browsers are sometimes not able to recognize them. To avoid this fallback font is used to display the content in a browser.

How can you clear sides of a floating element?

If you clear a slide of an element, floating elements will not be accepted on that side. With ‘clear’ set to ‘left’, an element will be moved below any floating element on the left side. clear is used to stop wrap of an element around a floating element.

CSS Interview Questions

Name all the modules which are used in the current version of CSS.

Selectors
Box Model
Backgrounds and Borders
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface.

What are the major versions of CSS?

The following are the major versions of CSS

CSS 1
CSS 2
CSS 2.1
CSS 3
CSS 4

Write all the position states used in CSS.

In CSS, there are four position states as stated below:

Static(default)
Relative
Fixed
Absolute

Advance CSS Interview Questions

What are the different css filter you can use?

CSS filter allows u to render DOM element, image, or video. You can choose from: grayscale, blur, opacity, brightness, contrast.

What do you understand by W3C?

W3C stands for World Wide Web Consortium. Its purpose is to deliver the information of the World Wide Web. It also develops rules and guidelines for the Web.


	CSS Part 2	CSS Part 3