CSS

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.

This is a frequently asked in HTML CSS Javascript interview questions.  

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 the border and giving all the required values (width, style, and color). This helps in reducing the file size and even increases the performance. 

Similarly, there are shorthand notations for many CSS properties. One of the other examples is padding and margin properties, which take four different values sequentially and assign each in the clockwise direction (Top, Right, Bottom, and Left).

This question is a regular feature in CSS basic interview questions, be ready to tackle it.  

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.

Expect to come across this popular HTML CSS interview question.

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

It's no surprise that this one pops up often in CSS viva questions.

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

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

A must-know for anyone heading into CSS interview, this is a frequently asked CSS interview question for experienced professionals.

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 that can perform complex operations on raster images and svgs.

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

 filter: invert(1);

It's no surprise that this one pops up often in CSS interview questions.  

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:

A common in HTML CSS Javascript interview questions, don't miss this one.

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 refer to the areas above and below the thumb.

One of the most frequently posed CSS interview question for experienced, be ready for it.  

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.

A staple in advanced CSS interview questions, be prepared to answer this one.  

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 4 child divs will be horizontally placed next to each other and will be of equal width.

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

Expect to come across this popular question in HTML CSS interview questions.  

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.

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:

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

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

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

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

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

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

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

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