CSS interview questions | Freshers & Experienced

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.

CSS improves the design language of a standard web document by describing how individual elements are to be displayed on the screen. CSS is used so the information document is separated from the document that describes the style. So, by doing this duplication is avoided, maintaining the documents is made easier, and reusability is improved.

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

There are some advantages of using External Style Sheets which are given below: -

• It is easy to control the many documents at once from one file. By using this, the Code remains DRY and improves performance and comfort.
• It is easy to create the classes which can be used on multiple HTML element types in several documents
• Grouping and selector methods can be used to implement styles in difficult situations.

There are disadvantages of using External Style Sheets which are given below: -

• There is a need for extra download to import the style information for each document.
• It may increase the loading time of the webpage.
• It is impossible to render the document until the external style sheet is loaded.
• It is not viable if there are not sufficient styling conditions to justify an external sheet.

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.

CSS Selectors are the component of the CSS ruleset which is used to select the content that you want to style. It selects the HTML element concerning its class, id, attributes, and types.

There are various types of selectors in CSS which are given below

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

Selectors in the CSS is used to find the HTML element. It can be divided into,

Element selector

It finds the element based on its name.

//example 
p{   
   text-align: center;   
} 
<p>name selector</p> 

Note:- It applies the style to the element that matches the name ‘p’ which is the paragraph.

ID selector

It selects the element based on its id.

//example 

#para1{
 text-align: center; 
}
 <p id = “para1”>id selector</p>

Class selector

It selects the element with a specific class attribute.

//example
  
.center {   
   text-align: center;     
}   
<p class="center">Class selector.</p>

Universal selector

It applies the style to every element on the page. It is defined with the asterisk symbol.

//example

* {   
  color: green;   
}

Note:- The above style of defined is applied to every element on the page.

Group selector

It is used to select elements with the same style.

//example
  
h1,h2,p {   
   text-align: center;   
}  

Note:- Here the h1, h2, and p will get the same style.

Use of @import in CSS

• It is used to import a style sheet into a different style sheet.
• It is used to support media queries. By doing this, you can permit the import to be media-dependent.

Combinator in CSS tells the relation between two different simple selectors. It also tells the location of the content in the document.

There are many types of combinator which are given below.

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

CSS box model has many properties like border, padding, margin, and even the content. The CSS box model is utilized to build the layout and design of the web pages. Moreover, it can be utilized to customize 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.

The CSS universal selector (*) is used to matches elements of any type.

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.

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.

The purpose of CSS margin properties is used to create space around elements, outside of the border. With the help of CSS, you have full control over the margins.

CSS has characteristics for defining the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

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

In CSS we use the term "animate". It is the most powerful and comfortable way to build animate objects. By using tweening, you can generate in-between frames.

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 properties:

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

//example  
body { 
counter-reset: section;    //initializing a counter named section. 
} 
To use a counter, use counter-increment property. To display the counter value, use content property. 
h3::before { 
counter-increment: section;           //It increments the counter value  
content: counter(section) ;    	     //It displays the value of the counter 
} 

User-select is the property used to not allow highlighting.

The default z-index of an element is 0 or auto

Advantages of using CSS Preprocessor

• Ability to add variables, mixins, functions, etc: The main advantage of using CSS preprocessors is that you are able to add the variables and functions which the basic CSS can't allow. It not only facilitates easier and effective development but also makes your code more orderly and cleaner. CSS preprocessors bring new scope to your CSS.
• Join Multiple Files: Another advantage of using CSS preprocessors is that it permits the joining of many stylesheets into one. With the help of this, the user can now create various files for each screen and then can compile them all in the main CSS file. The advantage of using this is that the main files need to be imported on the website and the rest of the internal files will be read from the server.
• Avoid Repetitions: CSS preprocessors remove the limitation of basic CSS in which you have to write everything multiple times for each object. By using CSS preprocessors, you can save your time by writing the common style once which can be imported rather by re-writing.
• Darken & Lighten functionality: CSS preprocessor provides many inbuilt functions and Darken and lighten function is one of them. The user can mention darkening color code and also the percentage
• Nested Syntax: By using this feature, it is easy to target DOM elements and saves you a lot of time. In addition to this, it also makes it amazingly easy to edit CSS files.

Disadvantages of using CSS Preprocessor

• Debugging is harder: The major drawback of the preprocessor is that it has a compilation step, which means CSS line numbers are unnecessary while debugging the code.
• Compilation slows down development: Even if you are using the best computer tool on the fastest computer compilation takes a lot of time. So, this is also a major drawback
• Produce very large CSS files: Even though the size of the file of the source is small, the generated CSS could be large
• Tooling and developer convenience: Another drawback is that CSS Preprocessor needs additional tooling. Users have to use a specific editor just to use a particular tool that is not worthy. In addition to this, it also needs extra cost and a little bit of risk to upgrade and maintain the complexity which is brought by additional stuff.

Difference between inline and inline-block CSS

Difference between "resetting" and "normalizing" CSS

Resetting: Resetting means remove all default browser styling on elements. E.g. paddings, margins, font-sizes of all elements are reset to be the same. You will have to redeclare styling for general typographical components.

Normalize: Normalize means "You will get what you write". It stores valuable default styles instead of "unstyling" everything. It also fixes bugs for popular browser territories.

The z-index property tells about the stack position of an element. The element which has greater stack order remain in front of an element that has a lower stack order.

Various types of media available in CSS are:

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.

Media signifies the type of device that is used to display a webpage. For eg. a mobile screen or computer screen. As technology is expanding, devices like cell phones, handheld or even your wristwatch want to access the website which is making designing a website complex. Every user wants to make his/her site to look good across multiple devices. With the upcoming CSS level 2's which supports the media type, it is easy to use it and make your site view-friendly across various devices.

Different Media Types available in CSS are all, print, screen, and speech

Transitions: It supports property changes in CSS values so that it can run smoothly over a particularized duration.

Transforms: It supports elements styled with CSS to be transformed in 2D or 3D space.

The syntax for adding  background-image :

body {
 background-image: url("image-url");
 background-color: #cccccc;
}

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, ...);

The gradients in the CSS allow you to create a background with a smooth transition between two colors. CSS has two types of gradients, Linear and Radical.

For the Linear gradient, you must specify two color stops, that is the start and the stop color of the transition and also the direction of the transition like goes down, top, right, left, or diagonal.

//example 
#grad { 
background-image: linear-gradient(to right, red , yellow); 
} 

Note:- It creates a background gradient that transitions from left to right from red to yellow color.

For Radical gradient,

the transition occurs as an ellipse from the center for different colors.

//example 
#grad { 
background-image: radial-gradient(red, yellow); 
} 

Note:- It creates two elliptical-shaped transitions from the center of two colors (red and green).

The opacity in CSS tells how transparent an element is. The values of elements can vary from 0 to 1 in which 0 represents completely transparent and 1 represents completely opaque(not transparent at all). BY default, the value of each element is 1. The opacity property of CSS makes it easy to alter the opacity of text, images, <div>s, and other elements.

#element{
 opacity:0.5
}

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

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
}

Transition is a CSS effect that is used to change the style of an element smoothly over some time. The duration is specified to the transition element. If it is not specified, the default value of 0 seconds is taken. The transition effect has the following sub-properties to control the element.

Transition-property- defines which element the transition is to be applied.

Transition-duration – defines the duration for the transition.

Transition-timing-function – defines a function to calculate intermediate values.

Transition-delay – defines the delay for the start of the transition.

//syntax  
div { 
   transition:    ; 
} 
//example  
div { 
width: 100px; 
height: 100px; 
background: red; 
transition: width 2s; 
} 

CSS can be applied to HTML documents in three ways, internal, inline, and external.

Internal CSS

This is used if an HTML document needs to have a unique style. The style language is defined within the style tag(<style>) inside the head of the HTML document.

//example
  
<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
background-color: linen; 
} 
 
h1 { 
color: maroon; 
margin-left: 40px;}  
</style> 
</head> 
<body> 
<h1>This is a heading</h1> 
</body> 
</html> 

Inline CSS

Here, the style can be applied to each element in the HTML document using the style attribute.

//example
  
<!DOCTYPE html> 
<html> 
<body> 
<h1 style="color:blue;text-align:center;">This is a heading</h1> 
</body> 
</html> 

External CSS

Here, an external style sheet with all the CSS coding is created with the .css extension and it can be linked to the HTML document using the link(<link>) element.

//example
 
body { 
background-color: lightblue; 
} 
It is a CSS file named ExternalCSS.css 

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
</head> 
<body> 
<h1>This is a heading <h1>
</body> 
</html> 

Note:- The CSS file is linked using the link element to the above document.

Some basic difference between "div p" and "div > p" in CSS

div p{}

It is a general descendant selector. It applies the style as long as the paragraph(p) is present inside the <div>.

div > p{}

It is a direct descendant selector. It applies the style only if the paragraph(p) is the direct child of the <div>. That is ‘p’ should be first-level children, not sub children of <div>.

//example  
<div> 
<h1> A heading  
<p> A paragraph  
</div> 

Here p is not a direct child. So, div > p will not apply the effect to 'p', but div p will.

To create a button of fixed width. Create a button class of some width and apply that class to every button in the HTML document.

//example

.btn{ Width: 100px; }

It’s a class that has fixed width.

<button class=“btn”>okay</button>

We apply the class to a button. Like this, we can apply the class to every button to get a fixed width.

The margin property in CSS is used to create space around the element borders. You can control the margin space for each side using the property top, right, left, and bottom in the margin.

//example 
p { 
margin-top: 100px; 
margin-bottom: 100px; 
margin-right: 100px; 
margin-left: 100px; 
}

Here, 100px of space is created around each side of the paragraph element.

The padding property is used to create space around the element but inside its border. The same way as margin, you can set padding for each side with the padding property.

//example 
P { 
padding-top: 50px; 
padding-right: 50px; 
padding-bottom: 50px; 
padding-left: 50px; 
} 

Here, a space of 50px is created around the element but inside its border.

CSS framework can be defined as a collection of CSS files that allows for standard-compliant design.

Some of the frameworks may contain grid or Javascript functions, but most of the framework is used to improve the design of the webpage. The most popular CSS frameworks used now are bootstrap and foundation.

CSS supports several measurement units. Such as,

• % - defines measurement as a percentage relative to other value .
• Cm – defines measurement in centimeters.
• Em – a relative measurement for the height. One em is equal to the size of the given font.
• Ex – defines measurement relative to the font ‘x’ alphabet height.
• In – defines measurement in inches.
• Mm – defines measurement in millimeters.
• Pc – defines measurement in picas. One pica is 12 points.
• Pt – defines measurement in points. One point is 1/72nd of an inch.
• Px- defines measurement in screen pixels

The embedded style sheet is a way of specifying the CSS style language in the HTML document. Here, you specify the CSS inside the tag within your HTML document. The style tag must be placed within the head tag of the document. This type is used for the document that should have a unique CSS style.

//example
 
<html> 
<head> 
<style type="text/css"> 
p { 
font-family: georgia, serif;  
font-size: x-large; 
} 
</style> 
</head> 
<body> 
<p>Example for Embedded Style Sheet 
</body> 
</html> 

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

CSS is a good language to design the webpage, but it has some limitation such as,

• CSS has different versions from CSS1 to CSS3. This may result in confusion among developers.
• CSS is fragmented. So, some functions in CSS may work in some browsers and some don’t.
• CSS doesn’t have any built-in security system. Anyone can change the CSS file with read/write permission.
• CSS is not a complete programming language. It is just a styling language. So, it cannot do certain things like logical operations, reading files, interacting with a database, request a webpage, etc

Flexbox in CSS is a layout module to create a responsive layout that is flexible to design.

//example 
<div class="flex-container"> 
<div>1</div> 
</div>

To use a flexbox layout, you need to first define a flex container. In the above example, a flex container is designed with one division.

.flex-container { 
display: flex;    //the display property makes the flex container flexible. 
} 

Flexbox has six properties. They are,

• Flex-direction – defines in which direction the elements should be stacked in the flexbox.\
• Flex-wrap – defines whether the elements in the flex should wrap or not.
• Flex-flow – defines both direction and wrap property.
• Align-items - defines the alignment of the items in the layout.
• Align- content – defines the alignment of the flex lines.
• Justify-content – aligns the flex items.