Most Asked CSS Questions

1.Explain the CSS “box model” and the layout components that it consists of.

The CSS box model is a rectangular layout paradigm for HTML elements that consists of the following:

Content - The content of the box, where text and images appear
Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content)
Border - A border surrounding the padding (if any) and content
Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)
Each of these properties can be specified independently for each side of the element (i.e., top, right, bottom, left) or fewer values can be specified to apply to multiple sides. For example:

top   right  bottom left  */
padding: 25px  50px   75px   100px;

/* same padding on all 4 sides: */
padding: 25px;

/* top/bottom padding 25px; right/left padding 50px */
padding: 25px 50px;

/* top padding 25px; right/left padding 50px; bottom padding 75px */
padding: 25px 50px 75px; 

2.How does fixed positioning work in CSS?

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the viewport, unless any ancestor has transform, perspective, or filter property set to something other than none, which then causes that ancestor to take the place of the elements containing block. This can be used to create a "floating" element that stays in the same position regardless of scrolling.
3.What is a class selector?

A class selector is used to target a CSS class. It allows us to specify elements that have a specific class applied to them using the class attribute in HTML. For example, the following styles definition will only affect the first and the third divs but not the second one.

.red {
color: red;
}

As you can see in the above example, the class selector used a dot (.) before the name of the class to target to specify that it is a class selector.
4.What are the differences between Flexbox and CSS Grid?

Flexbox is a very useful layout tool, especially for smaller areas within the site. Its main features are to align items in horizontal or vertical axes, space them out automatically, invert the order in which they’re displayed, along with a few other layout options.

CSS Grid is more of a layout tool for the entire page. While Flexbox excels in laying out items along a single axis, Grid is better for layouts with both horizontal and vertical axes.

5.What are the advantages and disadvantages of using external stylesheets?
The advantages of external stylesheets 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.
6.What are CSS preprocessors?
A preprocessor is an abstraction layer built on top of CSS. Preprocessors extend the functionality of CSS by offering powerful features like variables, inheritable “classes” called extends, and “function-like” mixins. Sass, LESS, and Stylus are some of the more well-known preprocessors.

Like every programming language, pre-processors have different syntax, but hopefully, not too separated. All of them support classic CSS coding and their syntax are like classic CSS. SASS and Stylus have additional styles. In SASS, you can omit curly brackets and semicolon, whereas in Stylus, you can also omit colons. These are optional in both SASS and Stylus.

All the style definitions, whichever pre-processor you may choose, ultimately are compiled down to the vanilla CSS style definitions. Pre-processors only help you to write styles faster with a lot of complexities taken care of for you.
7.What is CSS3 Flexbox?
The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities.

An area of a document laid out using flexbox is called a flex container. To create a flex container, we set the value of the area's container's display property to flex or inline-flex. As soon as we do this the direct children of that container become flex items. As with all properties in CSS, some initial values are defined, so when creating a flex container all of the contained flex items will behave in the following way.

Items display in a row (the flex-direction property's default is row).
The items start from the start edge of the main axis.
The items do not stretch on the main dimension but can shrink.
The items will stretch to fill the size of the cross axis.
The flex-basis property is set to auto.
The flex-wrap property is set to nowrap.
The result of this is that your items will all line up in a row, using the size of the content as their size in the main axis. If there are more items than can fit in the container, they will not wrap but will instead overflow. If some items are taller than others, all items will stretch along the cross axis to fill its full size.

.box {
display: flex;
}
<div class="box">
<div>One</div>
<div>Two</div>
<div>Three <br> has <br> extra <br> text</div>
</div>

Consider the style and html above. We have only defined the minimal code required to configure a flexbox in CSS3. Here is the output.
8.Explain the concept of Tweening.

Answer: Tweening is the process in which we create intermediate frames between two images to get the appearance of the first image which develops into the second image.

It is mainly used for creating animation.
9.Explain the term Responsive web design.

Answer: 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.
10.What is CSS specificity?

Answer: 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.
11.What is the difference between padding and margin?

Answer: In CSS, the margin is the property by which we can create space around elements. We can even create space to the exterior defined borders.

In CSS, we have margin property as follows:

margin-top
margin-right
margin-bottom
Margin-left
Margin property has some defined values as shown below.

Auto – Using this property browser calculates the margin.
Length – It sets the margin values in px,pt,cm etc.
% – It sets the width % of the element.
Inherit – By this property we can inherit the margin property from the parent element.
In CSS, padding is the property by which we can generate space around an element’s content as well as inside any known border.

CSS padding also has properties like,

Padding-top
Padding-right
Padding-bottom
Padding-left
Negative values are not allowed in padding.

div {
padding-top: 60px;
padding-right: 40px;
padding-bottom: 50px;
padding-left: 70px;
}

12 What is a CSS pseudo-class?

Answer: It is a class that is used to define a special state of an HTML element.

This class can be used by styling an element when a user snooped over it and also it can style an HTML element when it gets the focus.

selector:pseudo-class {
property:value;
}

It is a feature of CSS which is used to style the given parts of an element.

For Example, we can style the first letter or line of an HTML
element.

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