Skip to main content

Other CSS theory

Name some CSS frameworks.​

CSS frameworks are libraries that make web page styling easier. Some of them are Foundation, Bootstrap, Gumby, Ukit, Semantic UI, etc.

What do you understand by the universal sector?​

A universal selector is a selector that matches any element type's name instead of selecting elements of a particular type.

Example:

<style> * { color: blue; font-size: 10px; } </style>

Tell us about the use of the ruleset.​

The ruleset is used for the identification of selectors, which can be attached with other selectors. The two parts of a ruleset are:

Declaration block: contains one or more semicolon-separated declarations Sector: indicates the HTML element needed to be styled

Differentiate between CSS3 and CSS2.​

The main difference between CSS3 and CSS2 is that CSS divides different sections into modules and supports many browsers. It also contains new General Sibling Combinators responsible for matching similar elements.

How can CSS be integrated into an HTML page?​

There are three ways of integrating CSS into HTML: using style tags in the head section, using inline-styling, writing CSS in a separate file, and linking into the HTML page by the link tag.

Explain a few advantages of CSS.​

With CSS, different documents can be controlled using a single site, styles can be grouped in complex situations using selectors and grouping methods, and multiple HTML elements can have classes.

What is meant by RGB stream?​

RGB represents colors in CSS. The three streams are namely Red, Green, and Blue. The intensity of colors is represented using numbers 0 to 256. This allows CSS to have a spectrum of visible colors.

What was the purpose of developing CSS?​

CSS was developed to define the visual appearances of websites. It allows developers to separate the structure and content of a website that was not possible before.

What is the difference between a class and an ID?​

Class is a way of using HTML elements for styling. They are not unique and have multiple elements. Whereas ID is unique and it can be assigned to a single element.

Define z-index.​

This is one of the most frequently asked CSS interview questions. Z-index is used to specify the stack order of elements that overlap each other. Its default value is zero and can take both negative and positive values. A higher z-index value is stacked above the lower index element. It takes the following values- auto, number, initial, and inherit.

What are the benefits of CSS Sprites?​

With CSS sprites, loading multiple images is not an issue.

  • Blinking is not seen.
  • Advanced downloading of assets does not take place until needed.

How can you target h3 and h2 with the same styling?​

Multiple elements can be targeted by separating with a comma:

h2,
h3 {
  color: red;
}

Name media types allowed by CSS.​

  • speech
  • audio
  • visual
  • tactile media
  • continuous or paged media
  • grip media or bitmap
  • interactive media

How can you use CSS to control image repetition?​

The background-repeat property is used to control the image.

Example:

h3 {
  background-repeat: none;
}

Tell us about the property used for image scroll controlling.​

The background-attachment property is used to set whether the background image is fixed or it scrolls with the rest of the page.

Example for a fixed background-image:

body {
  background-image: url(‘url_of_image’);

  background-repeat: no-repeat;

  background-attachment: fixed;
}

The font-related attributes are Font- style, variant, weight, family, size, etc.

Define contextual selectors.​

In CSS, contextual selectors allow developers to specify styles of different parts of the document. Styles can be assigned directly to specific HTML tags or create independent classes and assign tags to them.

Tell us about the general CSS nomenclature.​

In CSS, the styling commands are written in value and property fashion. CSS includes a system terminator- semicolon. The entire style is wrapped in curly braces and attached to the selector. This creates a style sheet that can be applied to an HTML page.

When should you use translate() instead of absolute positioning?​

Translate is a CSS transform value. On changing opacity or transform, browser reflow or repaint is not triggered. Transform requires the browser to create a GPU layer for elements but using the CPU changes absolutes positioning properties. Translate () is more efficient and results in shorter paint times. On using translate (), element occupies original space, unlike in changing absolute positioning.

Name different ways to position some aspects in CSS.​

The positioning property specifies the positioning method type. The five different position values are fixed, static, absolute, sticky, and relative. The elements are positioned using top, left, right, and bottom properties. These properties need to be set first, and they work depending on position value.

What are mixins?​

A mixin is similar to a function block of code returning a single value—mixin output lines of Sass code that directly compiles into CSS styles. At the same time, the function returns a value that becomes the value for a CSS property or something that can be passed to another mixin.

How can you optimize the webpage for prints?​

Identify and control 'content areas' of the website. A website generally has a footer, header, sidebar, navbar, and main content area. Most of the work is done by controlling the content area. So, conquer print media without changing the website's integrity by using page breaks, creating a stylesheet for print, size your page for print, and avoid unnecessary HTML tables.

What is meant by CSS working under the hood?​

When a browser displays a document, it combines style information and document content. The document is processed in two stages:

  • Conversion of HTML and CSS into Document Object Model
  • DOM displays contents of browser

Differentiate between the use of ID selector and class selector.​

ID Selector:

<style>

{

text-align: right;

color: blue;

}

</style>

CSS class Selector:

<style>

.right {

text-align: right;

color: blue;

}

</style>

Differentiate between logical and physical tags.​

Logical tags mainly focus on content and are older as compared to physical ones. Logical ones do not find much usage in presentation and terms of aesthetics. At the same time, physical ones find application in presentation

How do media types in CSS work?​

The four types of media properties are print, speech, and screen.

Example of using print-media type:

@media print {
  h2 {
    background-color: blue;
  }
}