CSS Interview Questions For Freshers - the best interview questions

1. What is the Box model in CSS? Which CSS properties are a part of it?

A rectangle box is wrapped around every HTML element. The box model is used to determine the height and width of the rectangular box. The CSS Box consists of Width and height (or in the absence of that, default values and the content inside), padding, borders, margin.

Content: Actual Content of the box where the text or image is placed.

Padding: Area surrounding the content (Space between the border and content).

Border: Area surrounding the padding.

Margin: Area surrounding the border.

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

3. What are the limitations of CSS?

Disadvantages of CSS are given below:

Browser Compatibility: Some style selectors are supported and some are not. We have to determine which style is supported or not using the @support selector).

Cross Browser issue: Some selectors behave differently in a different browser).

There is no parent selector: Currently, Using CSS, you can’t select a parent tag.

You can download a PDF version of Css Interview Questions.

Download PDF

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

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

/*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";

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

}

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;

}

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>

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>

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

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

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

}

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

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

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

9. 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 and set height and width values.

10. Is it important to 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.

11. What are Pseudo elements and Pseudo classes?

Pseudo-elements 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;

}

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;

}

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

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

14. What property is used for changing the font face?

We can use the font-family property for achieving this. The font-family property is used for specifying what font needs to be applied on the targetted DOM element. It can hold several font names as part of “fallback” mechanism in case the browser does not support the fonts. For example, we can use:

p {

font-family: "Times New Roman", Times, serif;

}

In the above piece of code, we are applying font-family property to the paragraph element.

It tells the browser to look for “Times New Roman” font and apply it.

If the “Times New Roman” font is not installed or supported, then it asks the browser to use Times font.

If both “Times New Roman” and Times are not supported, then it asks the browser to use any supported generic font belonging to serif.

If you do not want the font-face of the paragraph element to be Times New Roman/Times/serif font, and you want to use the Arial/Helvetica/sans-serif font, then we can just update the CSS property of paragraph element as:

p {

font-family: Arial, Helvetica, sans-serif;

}

15. What do you have to do to automatically number the heading values of sections and categories?

We can use the concept of CSS counters. This lets us adjust the appearance of the content based on the location in a document. While using this, we need to first initialize the value of the counter-reset property which is 0 by default. The same property is also used for changing the value to any number that we need. Post initialization, the counter’s value can be incremented or decremented by using the counter-increment property. The name of the counter cannot be CSS keywords like “none”, “initial”, “inherit” etc. If the CSS keywords are used, then the declaration would be ignored.

Breaking

CSS Interview Questions For Freshers - the best interview questions