Explore topic-wise InterviewSolutions in .

“Cascading” REFERS to the process of going through the style declarations and defining weight or importance to the styling RULES that help the browser to select what rules have to be applied in times of conflict. The conflict here refers to multiple rules that are applicable to a particular HTML element. In such cases, we need to let the browser know what style needs to be applied to the element. This is done by cascading down the list of style declarations elements.

For example, if we have the below style:

and we also have the following declaration below it or in another stylesheet that has been linked to the page:

We have a conflict in color property here for the paragraph elements. Here, the browser just CASCADES down to identify what is the most recent and most specific style and applies that. Since we have the color:black; as the most specific declaration, the color black is applied to the paragraph elements. Now if you want to ensure color white is applied to the paragraph, we can define weight to that style by ADDING !important as shown below:

!important ensures that the property has the MAXIMUM weight in presence of other conflicting properties.

Flexbox stands for flexible box and it was introduced around 2017 in CSS with the purpose of providing an efficient way to handle layouts, align elements within them and distribute spaces amongst the items in dynamic/responsive conditions. It provides an enhanced ability to alter the dimensions of the items and make use of the available SPACE in the container efficiently. In order to achieve this, CSS3 provides some properties.

The properties of flexbox are as follows:

• flex-direction: This property helps in defining the direction the container should stack the items targetted for flex. The values of this property can be
  • row: STACKS items horizontally from left to right in the flex container.
  • column: Stacks items vertically from top to bottom in the flex container.
  • row-reverse: Stacks items horizontally from right to left in the flex container.
  • column-reverse: Stacks items vertically from bottom to top in the flex container.
• flex-wrap: This property specifies of the flex items should be wrapped or not. Possible values are:
  • wrap: The flex items would be wrapped if NEEDED.
  • nowrap: This is the DEFAULT value that says the items won’t be wrapped.
  • wrap-reverse: This specifies that the items will be wrapped if needed but in reverse order.
• flex-flow: This property is used for setting both flex-direction and flex-wrap properties in one statement.
• justify-content: Used for aligning the flex items. Possible values are:
  • center: It MEANS that all the flex items are present at the center of the container.
  • flex-start: This value states that the items are aligned at the start of the container. This is the default value.
  • flex-end: This value ensures the items are aligned at the end of the container.
  • space-around: This value displays the items having space between, before, around the items.
  • space-between: This value displays items with spaces between the lines.
• align-items: This is used for aligning flex items.
• align-content: This is used for aligning the flex lines.

1. div, p
2. div p
3. div ~ p
4. div + p
5. div > p

The meaning of the given list of selectors goes as follows:

• div, p: This selector implies selecting all div elements and all p elements.

Consider an example below:

Here, all the div elements and the p elements would be selected by the browser irrespective of their PARENTS or where they are placed. The REMAINING tags like h1 and span are ignored.

• div p : This selector tells to select all p elements that are inside div elements. Consider an example below:

Here, <p> paragraph 1</p> and <p> Inner Div Paragraph </p> would be selected by the browser and the properties are applied. The rest of the paragraph tags are not selected.

• div ~ p : This selector tells to select all p elements that have div elements preceeded anywhere. Consider an example,

Here, paragraph 2 and paragraph 3 elements would be selected as marked in the code above.

• div + p : This selector says to select all p elements placed immediately after the div element. Consider an example in this case:

In this case, we have paragraph 2 element immediately after the div TAG. Hence, only that element will be selected.

• div > p : This selector says to select all p elements which has div as an immediate parent. In the same example below:

Only <p> paragraph 1</p> will be selected in this case because it has immediate div as the parent.

z-index is used for specifying the vertical STACKING of the overlapping elements that occur at the time of its positioning. It specifies the vertical stack ORDER of the elements positioned that helps to DEFINE how the display of elements should happen in cases of overlapping.

The default value of this property is 0 and can be either positive or negative. Apart from 0, the values of the z-index can be:

• Auto: The stack order will be set equal to the parent.
• Number: The number can be positive or negative. It defines the stack order.
• Initial: The default value of 0 is set to the property.
• Inherit: The properties are inherited from the parent.

The elements having a LESSER value of z-index is stacked lower than the ONES with a higher z-index.

From the above figure, we can see that as the value of the z-index increases along the z-axis, the order of stacking would be towards the top of other elements along the vertical axis.

The float property is USED for positioning the HTML elements horizontally either TOWARDS the left or RIGHT of the container. For INSTANCE,

Here, the element to which the class is applied ensures that the element is POSITIONED on the right of the container. If you specify the value of float as left, then the element will be placed on the left side of the container.

OPACITY refers to the degree to which the CONTENT is transparent or opaque. We can use the PROPERTY named opacity which takes the values ranging from 0 to 1. 0 specifies that the element is completely transparent where 1 means that the element is completely opaque. We can use the opacity property as follows:

In the above example, an opacity of 60% is applied to the div SECTION. The opacity property is not supported by the internet explorer browser. To make it work there, we need to use filter property as polyfill as shown in the example below.

content-box is the DEFAULT value box-sizing property. The height and the width properties consist only of the content by excluding the border and padding. Consider an example as shown:

Here, the box-sizing for the div element is GIVEN as content-box. That means, the height and width considered for the div content exclude the padding and border. We will get full height and width parameters specified for the content as shown in the below image.

The border-box property includes the content, padding and border in the height and width properties. Consider an example as shown:

Here, the box-sizing for the div element is given as border-box. That means the height and width considered for the div content will ALSO include the padding and border. This means that the actual height of the div content will be:

and the actual width of the div content would be:

This is represented in the image below:

<P>The order of matching selectors goes from right to left of the SELECTOR expression. The elements in the DOM are filtered by browsers based on the KEY selectors and are then traversed up to the parent elements for determining the matches. The speed of determining the elements depends on the length of the CHAIN of selectors. CONSIDER an example:

Here, the browser first finds all span elements in the DOM and then it traverses to each of its parent elements to check if they are the paragraph p elements.

Once the browser finds all matching span tags having paragraph elements as parent and applies the color of black to the content, the matching process is stopped.

<P>We can use the font-family property for achieving this. The font-family property is used for specifying what font needs to be applied on the targetted DOM element. It can hold SEVERAL font names as part of “fallback” mechanism in case the browser does not support the fonts. For example, we can use:

In the above piece of CODE, we are applying font-family property to the paragraph element.

• It tells the browser to look for “Times New Roman” font and apply it.
• If the “Times New Roman” font is not installed or supported, then it asks the browser to use Times font.
• If both “Times New Roman” and Times are not supported, then it asks the browser to use any supported generic font belonging to serif.

If you do not want the font-face of the paragraph element to be Times New Roman/Times/serif font, and you want to use the Arial/Helvetica/sans-serif font, then we can just update the CSS property of paragraph element as:

No, it doesn’t affect the INLINE ELEMENTS. Inline elements FLOW with the contents of the page.

There are different ways to specify UNITS in CSS like PX, em, pt, percentage (%). px(PIXEL) gives fine-grained control and maintains alignment because 1 px or multiple of 1 px is guaranteed to look sharp. px is not cascade. em maintains RELATIVE SIZE. you can have responsive fonts. Em, will cascade 1em is equal to the current font-size of the element or the browser default. If u sent font-size to 16px then 1em = 16px. The common practice is to set default body font-size to 62.5% (equal to 10px).

pt(point) are traditionally used in print. 1pt = 1/72 inch and it is a fixed-size unit.

%(percentage) sets font-size relative to the font size of the body. Hence, you have to set the font-size of the body to a reasonable size.

Pseudo-elements allows US to create items that do not normally exist in the document tree, for example ::after.

• ::before
• ::after
• ::first-letter
• ::first-LINE
• ::selection

In the below example, the color will appear only on the first line of the paragraph.

Pseudo-classes SELECT regular elements but under certain conditions like when the user is hovering over the link.

• :link
• :VISITED
• :hover
• :active
• :focus

Example of the pseudo-class, In the below example, the color applies to the anchor tag when it’s HOVERED.

It’s most IMPORTANT to test a website in different browsers when you’re first designing it, or when making MAJOR changes. However, it’s ALSO important to repeat these tests periodically, since browsers go through a lot of UPDATES and changes.

<P>Block Element: The block elements always START on a new line. They will also TAKE space for an ENTIRE row or width. List of block elements are <div>, <p>.

Inline Elements: Inline elements don't start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are <a>, <span> , <strong>, and <img> tags. 

Inline Block Elements: Inline-block elements are similar to inline elements, except they can have padding and margins and set height and width values.

Reset CSS: CSS resets aim to remove all built-in browser styling. For example margins, paddings, font-sizes of all elements are reset to be the same. 

Normalize CSS: Normalize CSS aims to make built-in browser styling CONSISTENT across browsers. It also corrects BUGS for COMMON browser dependencies.

It’s a CSS unit used to MEASURE the height and width in percentage with RESPECT to the viewport. It is used MAINLY in responsive design techniques. The measure VH is equal to 1/100 of the height of the viewport. If the height of the browser is 1000px, 1vh is equal to 10px. Similarly, if the width is 1000px, then 1 vw is equal to 10px.

A CSS Preprocessor is a tool used to extend the basic functionality of default VANILLA CSS through its own SCRIPTING LANGUAGE. It helps us to use complex logical syntax like – variables, functions, mixins, code nesting, and INHERITANCE to name a few, supercharging your vanilla CSS.

SASS: Sass is the acronym for “Syntactically Awesome Style Sheets”. SASS can be written in two different syntaxes using SASS or SCSS

SASS vs SCSS

• SASS is based on indentation and SCSS(Sassy CSS) is not.
• SASS uses .sass extension while SCSS uses .scss extension.
• SASS doesn’t use curly brackets or semicolons. SCSS uses it, just like the CSS.

SASS Syntax

SCSS Syntax

LESS: LESS is an acronym for “Leaner Stylesheets”. LESS is easy to add to any javascript projects by using NPM or less.js file. It uses the extension .less.

LESS syntax is the same as the SCSS with some exceptions. LESS uses @ to define the variables.

Stylus: Stylus offers a great deal of flexibility in writing syntax, supports native CSS as well as allows omission of brackets, colons, and semicolons. It doesn’t use @ or $ for defining variables.

A CSS selector is the part of a CSS ruleset that actually selects the content you want to style. Different types of selectors are listed below.

Universal Selector: The universal selector works like a wildcard character, selecting all ELEMENTS on a page. In the given example, the provided styles will get applied to all the elements on the page.

Element Type Selector: This selector matches one or more HTML elements of the same name. In the given example, the provided styles will get applied to all the ul elements on the page.

ID Selector: This selector matches any HTML element that has an ID attribute with the same value as that of the selector. In the given example, the provided styles will get applied to all the elements having ID as a container on the page.

Class Selector: The class selector also matches all elements on the page that have their class attribute set to the same value as the class.  In the given example, the provided styles will get applied to all the elements having ID as the box on the page.

Descendant Combinator: The descendant selector or, more accurately, the descendant combinator lets you combine two or more selectors so you can be more specific in your selection method.

This declaration block will apply to all elements that have a class of box that is inside an element with an ID of the container. It’s worth noting that the .box element doesn’t have to be an immediate child: there could be another element wrapping .box, and the styles would still apply.

Child Combinator: A selector that uses the child combinator is similar to a selector that uses a descendant combinator, except it only targets immediate child elements.

The selector will match all elements that have a class of box and that are immediate children of the #container element. That means, unlike the descendant combinator, there can’t be another element wrapping .box it has to be a direct child element.

General Sibling Combinator: A selector that uses a general sibling combinator to match elements based on sibling relationships. The SELECTED elements are beside each other in the HTML.

In this example, all paragraph elements (<p>) will be styled with the specified rules, but only if they are siblings of <h2> elements. There could be other elements in between the <h2> and <p>, and the styles would still apply.

Adjacent Sibling Combinator: A selector that uses the adjacent sibling combinator uses the plus symbol (+), and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling.

The above example will apply the specified styles only to paragraph elements that immediately follow other paragraph elements. This means the first paragraph element on a page would not receive these styles. Also, if another element APPEARED between two paragraphs, the second paragraph of the two wouldn’t have the styles applied.

Attribute Selector: The attribute selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets.

There are different ways to include a CSS in a webpage, 

1 - External Style Sheet: An external file linked to your HTML document: Using link tag, we can link the style sheet to the HTML page.

2 - Embed CSS with a style tag: A set of CSS styles included within your HTML page.

Add your CSS rules between the opening and closing style tags and write your CSS exactly the same way as you do in stand-alone stylesheet files.

3 - Add inline styles to HTML elements(CSS rules applied DIRECTLY within an HTML tag.): Style can be added directly to the HTML element using a style tag.

4 - Import a stylesheet file (An external file imported into another CSS file): Another way to add CSS is by using the @import rule. This is to add a new CSS file within CSS itself.

Disadvantages of CSS are given below:

• Browser COMPATIBILITY: Some style selectors are SUPPORTED and some are not. We have to DETERMINE which style is supported or not using the @support selector).
• CROSS Browser issue: Some selectors behave differently in a different browser).
• There is no PARENT selector: Currently, Using CSS, you can’t select a parent tag.

The main advantages of CSS are given below:

• SEPARATION of content from presentation - CSS provides a way to PRESENT the same content in multiple presentation formats in mobile or DESKTOP or laptop.
• Easy to maintain - CSS, built effectively can be used to change the look and feel COMPLETE by making small changes. To make a global change, simply change the STYLE, and all elements in all the web pages will be updated automatically.
• Bandwidth - Used effectively, the style sheets will be stored in the browser cache and they can be used on multiple pages, without having to download again.

A rectangle box is wrapped AROUND every HTML element. The box model is used to determine the height and width of the RECTANGULAR box. The CSS Box CONSISTS of Width and height (or in the absence of that, default values and the content inside), padding, borders, margin.

• Content:  Actual Content of the box where the text or image is placed.
• Padding: Area SURROUNDING the content (Space between the border and content).
• Border: Area surrounding the padding.
• Margin: Area surrounding the border.