Best CSS Questions Compilation for Viva Interview

Sample answer: CSS (Cascading Style Sheets) is the programming language that supplies style to a HTML page’s content. CSS describes how elements would be rendered, including colors, fonts, positioning, layout, or more, on-screen, print, speech, or other media.

Sample answer: You can include a reference sheet with the following code:

<link rel="stylesheet" href="mystyle.CSS">

Sample answer: The two methods for writing CSS code are the ruleset and inline styles. 

Ruleset:

p{
 color: red;
}

Inline: 

<p style=‘color: red;’>Hello World!</p>

Sample answer: CSS selectors are the pattern of CSS terms that indicates to the browser which HTML elements should be selected and applied to the CSS property values.

Common selectors include: 

• Type, class, and ID selectors
• Attribute selectors
• Pseudo-class selectors
• Combinators

Sample answer: Specificity is the order of how the browser decides which CSS styles will be displayed first. ID has the highest specificity, and then comes class and type. 

Sample answer: CSS frameworks are ready-use stylesheets used by web developers and designers. Here are some common frameworks:

• Bootstrap
• Materialize
• Tailwind CSS
• Foundation
• Bulma
• Skeleton
• Semantic UI

Sample answer: visibility: hidden will hide the element, but still occupies the space and will display the empty space where the element is intended to take up. 

display: none will remove the content completely.

Sample answer: The different properties of position include:

• position: static;  (default value)
• position: relative;
• position: absolute;
• position: fixed;
• position: sticky;

Sample answer: Class and ID are both selectors, while “id” is unique on a page and can apply to only one element. The “class” selector =, on the other hand, can apply to multiple elements. 

HTML:    class=”ABC” ⇒ CSS:    .ABC{ /* CSS property */ }

HTML:    ID: id=”ABC” ⇒ CSS:    #ABC{ /* CSS property */ }

Sample answer: z-index in CSS is used to specify stack order, or overlapping elements. Elements with higher z-index will be displayed on top of others with lower z-index.

Sample answer: You can add comments by using the opening and closing tag /* comment */

Sample answer: You can use commas to target separate elements.

h1, h3 {

font-weight: heavy;

}

Sample answer: Box model is a CSS term often used when we talk about layout and design. Box model elements are: margins, borders, padding, and the actual HTML content. 

Padding: the amount of space between the content area and inside the border

Border: the thickness and style of the border surrounding the padding and content element

Margin: the amount of space outside the border and the edge of the element.

Sample answer: Common relative units such as em, ex, charm, lh, vw, vh, vmi, and vma. The best scale is better between different rendering mediums.

The two length units are relative and absolute length units. Absolute length units are considered to be always the same size. Common absolute units include cm, mm, Q, in, in, pc, pt, and px.

Sample answer: An image sprite is a combination of multiple images. Image sprites allow the computer to process and get the image once, and only display parts of it when needed. It will help reduce the number of http requests, improve search engine optimization (SEO), reduce the overall image size, and the overall loading time.

Simple answer: There are multiple ways to enhance accessibility, including checking color contrast, adding image description, enabling focus style, optimizing for lower bandwidth, and more.

Simple answer: Pseudo-element is used in CSS to target specific parts in an element, for example, to style the first line or letter of an element or to insert content before, or after, the content.

Pseudo-class, on the other hand, is used to define a special state of an element. It is handy if we want to select regular elements under specific conditions, such as :hover, :link, and more.

Simple answer: Transform is a more efficient animating tool used for the animation to reposition elements' directions horizontally or vertically. 

Simple answer: The CSS property float will pace elements on the right or left side of its container, and float will allow inline elements or text to wrap around them.

Simple answer: The biggest difference between CSS2 and CSS3 is that CSS3’s specifications are split into modules, which makes CSS3 faster and multi-browser friendly.  CSS3 helps you build more responsive, adaptive websites with a flexible layout more intuitively.

Simple answer: Tweening is the action of inserting intermediate frames into two images. CSS3 Transforms modules (matrix, translate, rotate, scale etc.) are handy for tweening.

Simple answer: 

font-style: italic;
font-weight: bold;
font-size: 1rem;
line-height: 1.5;
font-family: Arial;
-> font: italic bold 1rem/1.5 Arial

margin-top: 2px
margin-right: 10px
margin-bottom:8px
margin-left: 10px
-> margin: 2px 10px 8px;

Simple answer: 

Precomposed display values include:

• display: block;
• display: inline;
• display: inline-block;
• display: flex;
• display: inline-flex;
• display: grid;
• display: inline-grid;
• display: flow-root;

Simple answer: Without using float or positioning, flexbox provides a way to make layout, aligning, and distributing space for items easier. Thus, it is much more friendly for RWD (Responsive Web Design).

Simple answer: 

• flex-direction defines flex items’ direction
• flex-wrap is used to determine whether to wrap the flex items
• flex-flow is shorthand for setting both the flex-direction and flex-wrap properties
• justify-content is used to align the flex items on the main axis
• align-items is used to align the flex items on the cross/secondary axis
• align-content defines flex item directions (for multi-line flex items)