Explore topic-wise InterviewSolutions in .

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.
  • Type Selector (Element Selector)
  • ID Selector
  • Class Selector
  • Universal Selector
  • 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.

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

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

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.

CSS

opacty is not a CSS PROPERTY.

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;

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.

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.

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.

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.

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.

<P>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)}

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.

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.

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.

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.

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

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.

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.

The 4 child divs will be horizontally PLACED next to each other and will be of EQUAL WIDTH.

To add a BACKGROUND COLOR to paragraph element who has no children, we can use the FOLLOWING rule with :empty pseudo class.

HTML

CSS

Output

HTML

CSS

Output

<P>BASED on the DOM tree, the representation is div ELEMENT followed by PARAGRAPH element which is p, so the choice is (1)

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

• HTML 

• CSS

OUTPUT

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.

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

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 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 will-CHANGE property inform the browser which properties are expected to change via css or by javascript

• HTML

• CSS

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

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

• CSS  

Output:

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

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.

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.

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

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.

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.

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.

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

• CSS

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

• CSS

We can do a PATTERN match for such urls by using the FOLLOWING syntax

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 &AMP; right co-ordinates value.

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

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.

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  

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

• CSS

OUTPUT

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.

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.

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

OUTPUT:

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

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.

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.

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.

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.

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.

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

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.

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.

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.

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.