Join Regular Classroom : Visit ClassroomTech

CSS Interview Questions – Advanced Level | Codewindow.in

1. What is a CSS Preprocessor?

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.

2. SASS vs SCSS.

SASS: Sass is the acronym for “Syntactically Awesome Style Sheets”. SASS can be written in two different syntaxes using SASS or 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.

$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;
}

3. What is LESS?

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;
}

4. What is 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;

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

background: white url('good-morning.jpg');  
background-repeat: no-repeat;  
background-attachment: fixed;  
background-position: center;

C QA

Mostly Asked

DS QA

Mostly Asked

DBMS QA

Mostly Asked

ML QA

Mostly Asked

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

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

8. What is at-rule?

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.

9. What are the advantages of External Style Sheets?

You can create classes for reusing it in many documents.
By using it, you can control the styles of multiple documents from one file.
In complex situations, you can use selectors and grouping methods to apply styles.

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

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

12. How to center align a div inside another div?

Centering with transform
HTML:

<!-- HTML: -->
<div class="cn"><div class="inner">your content</div></div>

<!-- CSSL: -->

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

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

14. What do CSS Custom properties variables mean?

Custom properties (sometimes referred to as CSS variables or cascading variables) are defined by users that contain specific values to be reused throughout a document. The value is set using — notion. And the values are accessed using the var() function.

:root {
	--main-bg-color: brown
}
.one {
	color: white;
	background-color· var (--main-bg-color);
	margin: l0px,
	width: 50px,
	height: 5Opx;
	display: inline-block;
}

15. What does important mean in CSS?

The style is having the important will have the highest precedence and it overrides the cascaded property.

p {
 	color: red !important;
 }
 #thing {
 	color: green;
 }
 <p id="thing">Will be RED.</p>

16. How to determine if the browser supports a certain feature?

The @support in CSS can be very useful to scan if the current browser has support for a certain feature.

@supports (display: grid) {
	div {
		display: grid;
	}
}
Categories
Pages
Recent Posts