CSS Interview Questions

There’s a huge demand for Web developers familiar with CSS in the market. These CSS interview questions and answers are prepared by our experts with the intention of helping you crack your CSS interview as well as getting hired as an HTML CSS developer or a web developer in general. Moreover, these questions and answers will help you to validate your knowledge of two-column layout, the different selector types exist in CSS, etc. to your potential employers.

  • 4.8 Rating
  • 53 Question(s)
  • 32 Mins of Read
  • 3294 Reader(s)

Beginner

Conditional comments are developed by microsoft. And it only worked with IE browser. The conditional comments help to target IE browser & comments can be written to target the different version of IE 5-IE 9. CSS rules or code embedded inside of the comments will be used by Internet explorer based browser.  Whereas from IE10 & above the support for conditional comments has been dropped.

<p class=“conditional-comments“>
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9<br />
<!-- <![endif]-->
</p>

The aspect ratio is defined as the ratio of width media feature to the ratio of height media features W:H.

And the aspect ratio 16/9 is 42:32

The below Media query allows to target the media query based on device-aspect-ratio which is 16/9

@media screen and (device-aspect-ratio: 16/9) {
  /* Your code here */
}

The :first-line pseudo-element is used to style the first formatted line of a paragraph by using text-transform property with value uppercase.

For e.g.

p:first-line { text-transform: uppercase }

Colors in CSS can be specified by the following six methods:

  •          Hexadecimal colors color: #000000;
  •          RGB colors color: rgb(100, 115, 220);
  •          RGBA colors color: rgba(0, 0, 1, 0.6);
  •          HSL colors color: hsl(34, 100%, 23%);
  •          HSLA colors color: hsla(34, 100%, 53%, 0.5);
  •          Predefined/Cross-browser color names color: burlywood;

Pseudoclass :first-letter can refer to the first letter of the element, paragraph as below. It is clean approach without enclosing the first letter in span tag and applying the required rule based on the representation.

HTML
<p>Booker T</p>

CSS

html {
  font-size: 3rem;
}
 
p::first-letter {
  border: 1px solid;
  font-weight: bold;
  color: red; 
}

Intermediate

CSS3 is the latest evolution extending CSS2. It has a lot of new features like selectors, rounded corners, border-image, text-shadow, box-shadow, transitions, animations, gradients, and grid layouts. Let us discuss each of them below.

Selectors: Selectors are used to selecting the content which you want to add styles too. There are five types of selectors in CSS.

  1. Type Selector (Element Selector)
  2. ID Selector
  3. Class Selector
  4. Universal Selector
  5. Attribute Selector

Rounded Corners: Using this feature, we can apply smooth corners to any element. The border-radius property is used to give the element smooth edges. Check out the example below for syntax and usage.

<!DOCTYPE html>
<html>
    <head>
        <style>
            #rcorner {
                border-radius: 25px;
                background: #73AD21;
                padding: 20px;
                width: 200px;
                height: 150px;
            }
        </style>
    </head>
    <body>
        <div id="rcorner"></div>
    </body>
</html>

Border Image: border-image property allows us to use an image as a border. Check the example below for syntax and usage.

<!DOCTYPE html>
<html>
    <head>
        <style>
            #borderimg {
                border: 10px solid transparent;
                padding: 15px;
                border-image: url(border.png) 30 round;
            }
        </style>
    </head>
    <body>
        <p id="borderimg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita ut esse, accusamus id totam ipsam voluptatum magni. Aliquam, ipsa ipsum! Soluta optio quia recusandae qui sed suscipit. Dolorem, libero obcaecati.</p>
    </body>
</html>

Shadow: It’s an effect which can be applied to text and box. text-shadow and box-shadow are the property names used to added shadow to text and box respectively.

Transitions: CSS Transitions allows us to change the values of the transition property smoothly.

Gradients: We can directly use gradients in for two or more colors using linear-gradient and radial-gradient properties.

Grid Layouts: We have two new display properties which are grid and inline-grid which offers us a grid-based layout with similar rows and columns concept.

CSS
CSS3
CSS main focus was on providing formatting features and basic styling to the HTML elements.
CSS3 has evolved to overcome the drawbacks of CSS with a lot of new features and better performance.
In CSS, everything was a kind of specification which defined different features.
CSS3 has made this simpler by bringing in the concept of modules.
CSS will not support media queries for responsive design.
CSS3 supports media queries for responsive design.
CSS supports only standard hex colors and It’s a pain to use elegant colors and make the UI better.
CSS3 supports RGBA, HSL, HSLA and gradient colors too. Using these types of colors helps us to frame and use better colors in UI.
CSS supports simple selectors. Like the ones with ID, class and tag names.
CSS3 calls the components as a sequence of selectors in a very different and advanced way.
CSS supports only ‘web-safe fonts’ to make sure that the text displays in all the browsers.
CSS3 has introduced designers to use special fonts like those available in Google fonts.


CSS3 position property allows us to position an element. The types of property values available for a position are static, absolute, fixed, relative, sticky, initial, and inherit.

Static: It’s a default value of position to any element. Element is rendered one after the other in order. It’s the way as it is. There’s no change in the display of elements. Which will display in the window with default paddings and margins?

Absolute: The absolute value is used to position the element relative to its parent element. Say if the parent element has ‘x’ margin in the left. The child element ‘y’ margin towards left. The total margin of the child element would be ‘x+y’.

Fixed: The fixed value is used to position the element relative to the viewport (browser window) and the position of the element would be fixed.

Relative: The relative value is used to position the element relative to its normal position. 

Sticky: The stick value is used to position the element based on the user’s scroll. Its position is relative until a given offset position is met. Then it will stick in a place like it’s fixed.

Initial: This property value allows us to use the default behavior of the element.

Inherit: This property value allows us to inherit the property of its parent.

CSS can be written in three different ways for an HTML file. 

  1. Inline: Writing CSS for an element along with the element definition using the style property.
  2. Embedded: Writing the CSS in the head using the style tag.
  3. External: Having CSS written in an external document and linking it via link tag.

The best way to write CSS by having an external document and linking it in the required HTML documents. Whereas the reason why having an external document is best because having our CSS written inline it should be rewritten for another element too lots of same code comes up. Whereas CSS is embedded in a style tag we cannot use the styles in a different HTML document again the code should be rewritten in different HTML document too. So, the best way is to use an external document to write CSS and link it in an HTML document.

Ex:

  1. Inline: <h1 style=”color: red;”>Hello, World!</h1>
  2. Embedded: <style>h1{color: red;}</style>
  3. External: <link rel=”stylesheet” type=”text/css” href=”main.css”>

The inline one is written along with the HTML element encapsulated in the body tag. And, the embedded style is written in the style tag encapsulated inside the head tag. And, the external style sheet named main.css is linked using link tag.

Selectors are used to selecting the content which you want to add styles too. There are five types of selectors in CSS.

1. Type Selector (Element Selector): selects all the elements which match the given type.

Example: h1 [Selects all the elements with h1 tag.]

2. ID Selector: selects the element which matches the ID value. It’s suggested that there should be only one element for a given ID.

Example: #first-name [Selects the element having first-name as an ID value.]

3. Class Selector: selects all the elements which match the given class name.

Example: .blue [selects all the elements with a class name blue.]

4. Universal Selector: selects all the elements in the document.

Example: * [Selects all the elements in the document.]

5. Attribute Selector: selects the element which matches the attribute value.

Example: a [target = “_blank”] selects all the anchor elements with attribute value is _blank.

90% of the times we use class selectors to apply styles. Only for specific conditions, we use other selectors. It’s better to use class selectors to apply styles for similar elements like labels in a form.

In CSS3 the value for a color property can be given in the below-mentioned ways.

  1. Predefined color names: ~140 color names are supported inCSS3. Examples like red, brown, blue, Aqua, Indigo, etc.,
  2. Hexadecimal values: The values are given in the format of #RRGGBB where RR is red, GG is green and BB is blue. The values are between 00 and FF.
  3. RGB values: RGB color value is specified using the RGB (red, green, blue) function. The RGB values are integer values between 0 and 255 or percentage values between 0% to 100%
  4. RGBA values: RGBA color value is specified using the RGBA (red, green, blue, alpha) function. It’s similar to RGB value with an extra parameter called alpha which specifies the opacity.
  5. HSL values: HSL stands for hue, saturation, and lightness. HSL color value is specified with the HSL (hue, saturation, lightness) function. Hue is a degree on the color wheel (from 0 to 360). 0 (Zero) or 360 is red, 120 is green, 240 is blue. Saturation is a percentage value. 0% means a shade of grey and 100% is the full color. Lightness is also a percentage. 0% is black, 100% is white.
  6. HSLA values: HSLA color value is specified with the HSLA(hue, saturation, lightness, alpha) function. It’s similar to HSL values with an extra parameter called alpha which specifies the opacity.

Serif and sans-serif are the parent fonts to all the available fonts. Serif fonts usually have a hook (commonly known as feet) for all the letters, whereas in sans-serif (sans means without in French), we will not have those hooks.

From the above image, we could clearly see that for the first ‘F’ I have hooks which are highlighted by circles and these are also called as feet. Whereas, we don’t have the feet in the second ‘F’. It’s important to always know which font-family that font which you are using belongs to. Some of the examples of popular serif fonts are Times New Roman, Bookman, Baskerville, Cambria, Courier, Century, Copper Black, Minion, and New York. Some of the examples of popular sans-serif fonts are Arial, Calibri, and Comic Sans, Helvetica, Geneva, San Francisco, and Ubuntu.

All the elements of HTML are boxes. In CSS we use the term box model when we talk about the designs and layouts of the HTML elements. The CSS box model consists of margins, border, padding, and content.

Margin: Area outside the border is called a margin (Also called as outer area keeping the border as reference). The property to use margin in CSS is ‘margin’ which is a shorthand property will give the mentioned space in all the four sides equally. 

Border: The area that goes around the padding and content is called a border. The property to use the border in CSS is ‘border’ which is a shorthand will take the size of the border, the color of the border and type of the border as values sequentially.

Padding: The area around the content is called padding (Also called as Inner area keeping the border as reference). The property to use padding in CSS is ‘padding’ which is a shorthand property will give the mentioned space in all the four sides equally.

Content: It’s the actual content of the box model which contains text or image.

From the above figure, we can clearly understand that the element as a box and the meaning of all other properties of a box model. It’s always important to know the meaning of all the properties and how they behave and where exactly they occupy the space to become a better CSS developer.

Shorthand notations are also called as shorthand properties in CSS. That lets you set multiple values of CSS properties simultaneously. It’s often good to use shorthand notations because it reduces the file size and even improves the performance.

/* Example */
.border{
    border-width: 1px;
    border-style: solid;
    border-color: #000;
}
/* shorthand property for the above border example */
.border{
    border: 1px solid #000;
}

In the above example, we can see that for a border class we have written three different properties of a border (width, style, and color). Which can be written in a better way by just mentioning border and giving all the required values (width, style, and color). This helps in reducing the file size and even increase the performance. Similarly, there are shorthand notations for many CSS properties one of the other examples is padding and margin properties. Which takes four different values sequentially and assigns each in the clockwise direction (Top, Right, Bottom, and Left).

A pseudo-class is a special keyword which is added to a selector which specifies the state of the element. There are around ~60 pseudo-classes available. Some of the relevant examples of pseudo-classes are active, checked, disabled, empty, first-child, hover, focus, in-range, invalid, last-child, nth-child, optional, read-only, target, valid, visited, root, required which can actually be used to apply styles.

/* Color changes to Brown on Hovering on anchor tag */
a:hover{
    color: brown;
}
/* Color changes to Red on clicking on anchor tag */
a:active{
    color: black;
}
/* Color changes to red after visiting on anchor tag */
a:visited {
    color: red;
}

In the above example for anchor tag where: visited, hover and: active are used specify the state of the anchor tag and depending on the pseudo-classes the specific styles will be applied. By default, the color of the anchor tag will be blue, on hovering on the anchor tag the color will change to blue, on clicking on it when it activates the color will change to black and after clicking for the remaining period of time the color of the anchor tag will be in red.

For the above scenario, we need to use a pseudo-class to achieve this. pseudo-class is a special keyword which is added to a selector which specifies the state of the element. There are around ~60 pseudo-classes available.  We use: read-only pseudo-class here in order to achieve selecting the right element and to make the selector only select the not editable one.

/* :read-only pseudo-class is used for the input element */
input:read-only{ 
    background: cyan; 
}

From the above code, we can see that we have used the input selector to select the input element, and the: read-only pseudo-class targets the required element. And the cyan color is added using background property.

The easiest way to draw a circle in CSS is using border-radius property. The code below will display a circle.

<!DOCTYPE html>
<html>
  <head>
    <style> 
      #rcorners {
        border-radius: 50%;
        background: #73AD21;
        border: 3px solid black;
        padding: 20px;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="rcorners"></div>
  </body>
</html>

OUTPUT:

Make sure you have the same width and height and have border-radius as 50% which will display a circle as shown above.

In CSS, ID is suggested to be unique for an element whereas the class name is can be the same for many elements. As the ID is unique for the element, ID has higher priority than class in CSS. Consider the below example for better understanding.

<!DOCTYPE html>
<html>
  <head>
    <style> 
      #rcorners {
        border-radius: 50%;
        background: #FF0000;
        border: 3px solid black;
        padding: 20px;
        width: 200px;
        height: 200px;
      }
      .corners-div {
        border-radius: 50%;
        background: #73AD21;
        padding: 1px;
        width: 20px;
        height: 20px;
      }
    </style>
  </head>
  <body>
    <div id="rcorners" class="corners-div"></div>
  </body>
</html>

OUTPUT:

For the above example, we still see the background color like red with the black border as output even after trying to override the background color as green without a border using the class selector below. This clearly answers our question that ID has a higher priority than class.

Advanced

We can define a two column layout using a container and two divs inside the container by the following code.  

The parent container (.row) will have display: flex property. And the column will have flex value 50%, which will divide the available width from the parent in two equal halves. 

Code example:

HTML

<div class="row"> 
  <div class="column">
    Left column
  </div>
 
  <div class="column">
    Right column
  </div>
 
</div>

CSS

.row {
  display: flex;
  width: 100%;
}
 
.column {
  flex: 50%;
  border: 1px solid #ccc;
}

Output

We can use the CSS pseudo-class property :checked on input type radio & checkbox and the adjacent sibling combinator (E + F) E is the first element which is input type radio or checkboxes and F is the next element which is label.

CSS  

/* E + F */

/* Selected radio input & label */
input[type=radio]:checked+label{
  /* Your styles here */
}

/* Checked checkbox input & label */
input[type=checkbox]:checked+label {
  /* Your styles here */
}

CSS variables enables developers to reuse the code, once the variable are defined and it can be reused effectively, which gives good control over stylesheet in terms of code readability, maintenance and bring consistency.

The variables which are declared in :root pseudo-class act as global CSS variables. 

We can declare the variable via :root pseudo-class and reusing the variable using var followed by variable name in parenthesis and assigning to CSS property.

The class .foo and .bar will have the text color in red, the declared variable
--color has been reused via var (--color) in both of these classes.

:root {
  --color: red;
}
 
.foo {
  color: var(--color)
}
 
.bar {
  color: var(--color)
}

There are 11 types of selector, such as:

  1. Universal 
  2. Element or Type selector
  3. ID
  4. Class
  5. Descendant combinator
  6. Child combinator
  7. General Sibling combinator
  8. Adjacent Sibling combinator
  9. Attribute selector
  10. Pseudo-class
  11. Pseudo-element

The element with position:fixed property will be displayed at the specific offset (top, bottom, left and right) based on the position relative to the viewport.

It will stay at same place when the page is scrolled.

Whereas in position:sticky the element behave as relatively positioned element and once the containing block of the element crosses a specified threshold value it act as position:fixed element. So, the element switches its position based on the threshold value specified by top, bottom, left & right co-ordinates value.

We can do a pattern match for such urls by using the following syntax

a[href^="/"], a[href^=".."] {
        /* Write your styles here */
}

The visibility of the div during 3d transform can be managed via

backface-visibility:hidden

This property set the visibility as whether to show or hide the back face of an element during 3d transform.

Example from code:

HTML

<div class='container'>
  <div class="card">
<div class="face front">
   See
</div>
<div class="face back">
   Saw
</div>
  </div>
</div>
.container {
  position: relative;
  margin: 12px 24px;
  font-family:  system-ui, -apple-system, Arial, Helvetica, Trebuchet MS;
}

CSS

.card {
  width: 200px;
  height: 50px;
  position: relative;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.container:hover .card {
  transform: rotateY(180deg);
}
.face {
  position: absolute;
  backface-visibility: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  line-height: 50px;
  text-align: center;
  border-radius:5px;
}
.front {
  background: DodgerBlue;
  z-index: 10;
}
.back {
  transform: rotateY(180deg);
  background: SlateBlue;
}
.container:hover .front {
  z-index: 0;
}

The difference between the two lies how the effective width of the container is calculated.

The border-box & content-box belong to box-sizing property. The box-sizing property tell the browser how the effective width of the container to be calculated.

content-box is based on default css box sizing behavior. The rendered width of the container will include the container width+padding+border.

Whereas the border-box tell the browser to include the padding & border values with-in the declared width for e.g. 200 pixels. So, the rendered width will be 200 pixels only. 

So, If you see in terms of historical perspective it behave as the earlier version of internet explorer box model whereas as the content-box is based on W3C box model computation.

Code example                

HTML

<div id="container-parent">
  <p>I am a parent with two children. </p>
  <div id="container-border-box">
<p>I am child with <code>box-sizing:border-box</code>&nbsp;&amp; i stay with in parent width limit.</p>
  </div>
  <br />
  <div id="container-content-box">
<p>I am child with <code>box-sizing:content-box</code>&nbsp;&amp; i love to cross the parent width limit.</p>
  </div>
</div>

CSS

#container-parent {
  width: 400px;
  height: 300px;
  border: solid 10px DodgerBlue;
  margin: 0.8em;
}
#container-parent div {
  width: 100%;
  border: 10px solid SlateBlue;
  padding: 5px;
}
#container-border-box {
  box-sizing: border-box;
}
#container-content-box {
  box-sizing: content-box;
}

CSS Counters are similar to variables. It allows to number a list of element.
It is also supported by vast number of browsers IE, Edge, Firefox, Chrome, Safari & Opera. CSS counters can be used to order  

It can be used in various ways to dynamically manage the information with sequential number with prefix or suffix content. It is a great addon for css authors if they are working on a content which include table of content, chapters heading and the numbering is been prefered to be handled by dynamically, rather fixing the numbers manually at each location/line in the code.

CSS has filters which can perform complex operation on raster images and svgs.

It gives tremendous power to css author to perform these operation in browser dynamically. invert()css function invert the color of input image.

 filter: invert(1);

To select language text direction the selector will be [dir=rtl] and followed by class .cw-alert, and to select the div except class .alert-button-container :not pseudoclass can be used as follows.

[dir=rtl] .cw-alert>div:not(.alert-button-container){
/* Your code here */
}

The font family system is proposed by apple in 2015, available with prefix as -apple-system

The idea behind is to allow the web author to make use of native fonts available on different platform running the browser. The font-family system is platform-specific rather browser specific.

The same browser running on different platform/operating system will implement the generic font differently as available on that platform.

body {
  font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif;
}

For more: https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html

The @page at-rule is used to specify the bleed area. It is a good property to manage your content when the medium is based on print.

The bleed is the part on the side of a document that gives the printer a small

amount of space.

@page {
  bleed: 1cm;
}

CSS paint api allows to programmatically generate an image via css.
The author can create their own paint worklet which is written in javascript and that code can be used with background-image: paint(checkerboard).

The css paint api is still an evolving technology and google chrome is leading the pack among the browser.
https://ishoudinireadyyet.com/

To apply stroke on text and fill color, the property text-stroke and text-fill-color can be used with prefix. The same property with prefix (-webkit) is supported by edge, firefox, chrome, safari and opera.

HTML

<div id="fill-stroke">
  <h1>
    Stroke &amp; Fill
  </h1>
</div>

CSS  

h1 {
  font-family: Arial, Helvetica, Sans-serif;
}
#fill-stroke {
  background-color: rgb(255, 255, 255);
  color: rgb(102, 102, 102);
  -webkit-text-stroke: 1.4px rgb(0, 0, 0);
  -webkit-text-fill-color: rgb(46, 255, 60);
}

Output:

The will-change property inform the browser which properties are expected to change via css or by javascript

HTML

<a class='demo' href='#'>Demo url</a>

CSS

.demo {
  transition: opacity .2s;
  opacity: 1;
  font-family: Arial, Helvetica, Sans-serif;
  font-size: 35px;
  font-weight: bold;
  color: black;
}
.demo:hover {
  will-change: opacity;
}
.demo:active {
  opacity: .2;
}

DEMO:

The anchor will appear as below. With the css declaration .demo:hover the browser has been informed in advance that opacity will change and set up optimizations in advance.
And when the hyperlink is clicked, the text will have 20% opacity during the transition.

The variable font is a single font, yet it can exhibit multiple appearance. It can be considered as evolution of Open type fonts.

The permutation of appearance is stored in a single font and the file size may be larger than the traditional font.

It gives css authors to vary the size and appearance based on content and context while working with single font.

font-variation-settings provides low level control to modify the weight (thickness), font stretch and other related properties which are manipulated by axis of variation (identifiable by axis tag).

The scrollbar thumb is styled by pseudoclass ::-webkit-scrollbar-thumb

A scrollbar is made of scrollbar buttons and a track. The track is made up of track pieces and a thumb. The track pieces refers to the areas above and below the thumb.

The reflow can be imagined via water. As water fit itself according to the container it is poured into. It becomes the cup when poured in cup, if poured in a glass it become glass.

Similarly the content displayed on various devices need to fit and reflow the content based on the device size. 

For example, by using media queries the page can be authored to reflow the content based on the device dimensions. The reflow of content is also known as responsive web design (RWD).

Reflow computes the layout of page. And it recomputes the position and dimension of the element.

object-fit is the property which handles the picture based on the available width and height.

Using fill value the aspect ratio (Width:Height) will be maintained and image will not appear distorted or squeezed, it will resized so that the longest of either the height or width can fit in the given dimensions.

Other values are cover, none, scale-down.

The :focus-within pseudo selector in CSS, It selects an element if that element contains any children that have :focus.

For e.g. In a form element if there is an element which is capable to receive :focus, the :focus-within will be active on form element.

When the list-style-type:lower-greek symbol is used, the list can be rendered as below.

HTML 

<ol>
<li>Who</li>
<li>When</li>
<li>Where</li>
<li>What</li>
<li>How</li>
<li>Why</li>
</ol>

CSS

 li{
  list-style-type:lower-greek
}

Output

Based on the DOM tree, the representation is div element followed by paragraph element which is p, so the choice is (1)

HTML

<div id='container'>
  The Creative tension
</div>

CSS

#container {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dotted #c1c1c1;
}

Output 

To add a background color to paragraph element who has no children, we can use the following rule with :empty pseudo class.

HTML

<p></p>
<p>Just</p>
<p>Another world!</p>

CSS

p:empty {
    width: 100px;
    height: 20px;
    background: whitesmoke;
}

Output

The basic idea to draw a triangle using pure CSS is using border of a box with zero height and width. Let’s see the code below.

<!-- HTML Code -->
<div class="triangle"></div>
/* CSS Code */
.triangle {
    height: 0;
    width: 0;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-right: 100px solid red;
}

Using the basic idea, in the above code example, we have kept the width and height as zero, where the top and bottom borders are transparent and then the right border will be responsible to display the triangle in red color. You can event toggle them by having any two of the borders as transparent and the other border with a random color. Give a try.

/* Answer */
#outer {
    width: 300px;
    height: 300px;
    background-color: black;
    position: relative;
}
#inner {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

OUTPUT:

We have a relative position to the outer div tag and absolute position for the inner div tag. In order to place the inner div in the middle. We used the top and left at 50%. Using top and left the box position starts from the middle of the top and left which not exactly in the center. So, in order to keep the inner div exactly at the center, we need to use transform, which helps us to place the inner div exactly at the center of the outer div.

Using a CSS selector alone is inefficient in some situations. So, CSS selectors become much more useful when we start combining them to perform a better selection. These relationships are indicated using CSS combinators. Below are examples of combinators.

Name
Syntax
Selects
Selector List
A, B
Selects the matching element A/B.
Descendant Combinator
A B
Selects any element matching B that is descendant of an element matching A.
Child Combinator
A > B
Selects any element matching B that is the direct child of an element matching A.
Adjacent Sibling Combinator
A + B
Selects any element matching B that is the next sibling of the element matching A.
General Sibling Combinator
A ~ B
Selects any element matching B that is one of the next siblings of an element matching A.

Pseudo-elements are used to style or modify the specific part of an HTML element using CSS. Let us take an example and understand this better.

Examples:

  1. Styling the first letter of an element.
  2. Inserting the content before or after the element.
/* Styling the first letter of a p tag */
p::first-letter {
    color: red;
}
/* Adding the content after p tag */
p::after{
    content: "I'm added after the element";
}
/* Adding the content before p tag */
p:hover::before{
    content: "I'm added before the element"
}

Here, in the above example to add the first letter to be in red we use the first-letter pseudo-element. For which the first letter of the paragraph will be in red color. In the next example, we have after and before in which while rendering the p tag. By default, we’ll have the content in the after pseudo-element displayed at the end of the p tag. Whereas when you hover on the p tag. We’ll have the content in the before pseudo-element displayed in the beginning as we have used hover pseudo-class.

Types of selectors:

1. Type Selector (Element Selector): selects all the elements which match the given type. 

Example: h1 [Selects all the elements with h1 tag.]

2. ID Selector: selects the element which matches the ID value. It’s suggested that there should be only one element for a given ID.

Example: #first-name [Selects the element having first-name as an ID value.] 

3. Class Selector: selects all the elements which match the given class name.

Example: .blue [selects all the elements with a class name blue.] 

4. Universal Selector: selects all the elements in the document.

Example: * [Selects all the elements in the document.]

5. Attribute Selector: selects the element which matches the attribute value.

Example: a [target = “_blank”] selects all the anchor elements with attribute value is _blank.

In CSS, Gradients lets you display transition between two or more colors in a very smooth way. There are two types of Gradients in CSS3.

1. Linear Gradients – In CSS, a Linear gradient is a property value which allows directions and stops colors. The direction goes in 5 different directions up, left, right, down and diagonal any one of the value can be used and for stop colors, there should be a minimum of 2 colors to be mentioned. We can even repeat the linear gradient.

Ex: p {background-image: linear-gradient (direction, stop-color1, stop-color2, stop-color3)}

2. Radial Gradients – In CSS, a Radial gradient is a property value where the transition of the color will be defined from its center axis. By default, the shape would be an ellipse and the position would be in the center. Similar to linear gradients there should at least be two stop colors specified.

Ex: p {background-image: radial-gradient (yellow, green, blue)}

In CSS, say if you have two conflicting styles for an element, the browser should decide which one to apply and render. This is chosen by the browser-based on specificity. Specificity is nothing but a set of rules. Some of the rules are mentioned below.

  1. Say- if you have two element selectors selecting the same element but having different styles. The element selector which is read latest by the browser will get applied
  2. The element selector has less priority compared to a class selector. So, the styles written in the class selector gets applied.
  3. The class selector has less priority compared to an ID selector. So, the styles written in the ID selector gets applied.
  4. If we use !important along with the value for a CSS property. This style gets applied no matter it’s a class or an element or an ID selector.

In CSS, rule sets are the complete composition of writing a style to an element. Which comprises of selector along with a pseudo-class or a pseudo-element, declaration block with style properties and values.

Description

CSS stands for “Cascading Style Sheet”. It is used to format the display of HTML elements on screen paper or in any other media, as well as control the layout of multiple web pages. CSS programmers aid in creating user-friendly web applications for clients. This field requires a basic associate’s degree or a bachelor's degree.

Every business is trying to make websites that are user engaging. An attractive website increases the engagement time as the customer spends some time exploring it. For a company, it’s necessary to have a different kind of professionals from the different fields of expertise. Today there is a huge demand for CSS composers and designers. The average pay for an HTML CSS Developer is $60,571 per year. With a huge demand, there is also an increased number of CSS- related job interviews occurring.

That’s why we have talked about some of the most popular CSS interview questions. These Interview questions on CSS will be the best source for your preparation.

CSS interview questions and answers here covers almost all the basic and advanced level questions. Every candidate faces jitters when it comes to CSS interviews. If you are planning to build a career as a CSS programmer and are facing troubles in cracking the CSS interview, then practice these Interview questions on CSS.

To give you an idea of the type of questions which may be asked in an interview we have bought you a list of advanced CSS interview questions which are framed by experts. These are the best samples of advanced CSS interview questions and answers.

We are sure that these CSS interview questions for freshers and experienced will help you to crack your next CSS job interview. Many certifications are available in this technology. There is a huge demand for this technology in the market. You can also take up  HTML/CSS Training which will enhance your skills.

Crack your CSS interview easily. All the best!

Read More
Levels