latest css interview questions 2020

CSS stands for Cascading Style Sheets. It is a style sheet language that is used to describe the look and formatting of a document written in the markup language. It provides an additional feature to HTML. CSS handles the look and feel part of a web page.

Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices and screen sizes as well as a variety of other effects.

It can also be used with any kind of XML documents including plain XML, SVG, and XUL. CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications.

Given below is the list of most frequently asked CSS interview questions and answers in simple terms for your easy understanding.

How to Changing the text selection color using CSS?

::selection {
    background-color: red;
    color: white;
}

what is CSS shape-outside property?

The shape–outside CSS property defines the shape around which content will wrap on the outside of an element

div {
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
  margin: 30px;
}

How to make gradient text by CSS?

.gradient_text_class{


font-size: 72px;


background: linear-gradient(to right, #ffff00 0%, #0000FF 30%);


background-image: linear-gradient(to right, #ffff00 0%, #0000FF 30%);


-webkit-background-clip: text;


-webkit-text-fill-color: transparent;


}

what is CSS counter-increment?

The counter-increment property increases or decreases the value of one or more CSS counters. The counter-increment property is usually used together with the counter-reset property and the content property.

body {
  counter-reset: my-awesome-counter;
}
section {
  counter-increment: my-awesome-counter;
}
section:before {
  content: counter(my-awesome-counter);
}

How to use the adjacent sibling selector in CSS?

The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent

img + p {


font-style: bold;


}

how to use of general sibling selector in CSS?

The general sibling selector selects all elements that are siblings of a specified element.

div ~ p {
  background-color: yellow;
}

How to Declaring all CSS background properties in one line?

 
  background: lightblue url("img_tree.gif") no-repeat fixed center;

What is the use of CSS Image sprites?

It is a group of images placed into one image. A web page with multiple images can take a lot of time to load and uses multiple server requests to project the same. With the help of image sprites, we can decrease the number of requests to the server and save time and bandwidth as well.

Explain universal selector in CSS?

Universal selectors are used to matching any element types. Below is the example for the same. For example,

b * { 
 color: red; 
}

Explain “Attribute Selector” in CSS?

An attribute selector can be used to apply a style for an HTML element with a particular attribute. The example given below is used to apply a style for an input element with a particular attribute (text)

input[type = "text"]{
 color: #FFFFFF; 
}

List out the media types in CSS?

The names chosen for CSS media types reflect target devices for which the relevant properties make sense. In the following list of CSS media types the names of media types are normative, but the descriptions are informative. Likewise, the “Media” field in the description of each property is informative.

all: Suitable for all devices.
braille: Intended for braille tactile feedback devices.
embossed: Intended for paged braille printers.
handheld: Intended for handheld devices (typically small screen, limited bandwidth).
print: Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
projection: Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
screen: Intended primarily for color computer screens.
speech: Intended for speech synthesizers. Note: CSS2 had a similar media type called ‘aural’ for this purpose. See the appendix on aural style sheets for details.
tty: Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the “tty” media type.
tv: Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

List all the font attributes in CSS?

Below is the list of font attributes –

Font-Variant
Font-Family
Caption
Font-Style
Font-Size
Icon

What is the difference between “display:none” and “visibility:hidden” in CSS?

“Display:none” – This will just hide the element and does not take any space of the element.
“visibility:hidden” – This also hides the element and will take space for the element and this will affect the entire layout of the document.

What are the different types of CSS?

Below are the different types of CSS –

Embedded – Adding the CSS styles in <style> attribute.
Inline – Adding the CSS to the HTML elements.
Linked/External – Adding the External CSS file to the HTML document.