CSS

What is CSS?

CSS (Cascading Style Sheets) is a language that describes the style of an HTML document.
CSS is a list of statements (or rules) that can assign various rendering properties to HTML elements. Style rules can be specified for a single element occurrence, multiple elements, and entire document, or even multiple documents at once.

What is the origin of CSS?

Standard Generalized Markup Language marked the beginning of style sheets in 1980s.

Who maintains the CSS specifications?

World Wide Web Consortium maintains the CSS specifications.

What are the advantages of CSS?

  • Bandwidth
  • Site-wide consistency
  • Page reformatting
  • Accessibility
  • Content separated from presentation

What are the limitations of CSS?

  • Ascending by selectors is not possible
  • Limitations of vertical control
  • No expressions
  • No column declaration
  • Pseudo-class not controlled by dynamic behavior
  • Rules, styles, targeting specific text not possible

What are the CSS frameworks?

CSS frameworks are the preplanned libraries which make easy and more standard compliant web page styling. The frequently used CSS frameworks are Bootstrap, Foundation, Semantic UI, Gumby, UIkit

In how many ways can a CSS be integrated as a web page?

CSS can be integrated in three ways:
  • Inline: Style attribute can be used to have CSS applied HTML elements.
  • Embedded: The Head element can have a Style element within which the code can be placed.
  • Linked / Imported: CSS can be placed in an external file and linked via link element.

Is CSS case sensitive?

No.

Differentiate Class selector from ID selector?

While an overall block is given to class selector, ID selector prefers only a single element differing from other elements. In other words, ID are uniques while classes are not. Its possible that an element has both class and ID.

What is class in CSS and why we use?

Class is basically used for grouping attributes for applying same CSS.

What is grouping?

Grouping is gathering into a comma separated list two or more selectors that share the same style

Enlist the various Media types

  • Aural – for sound synthesizers and speech
  • Print – gives a preview of the content when printed
  • Projection - projects the CSS on projectors.
  • Handheld - uses handheld devices.
  • Screen - computers and laptop screens.

What is CSS Box Model and what are its elements?

  • Margin: the top most layer, the overall structure is shown. It removes the area around the border. It is transparent.
  • Border: It represents the area around the padding. It can transparent. Background color affects the border.
  • Padding: it removes the area around the content. It is transparent.
  • Content: it represents the content like text, images, etc.

What is the float property of CSS?

The CSS float property is used to move an element to the right or left along with the texts to be wrapped around it. It doesn't change the property of the elements used before it.

What is the purpose of the z-index and how is it used?

The z-index helps to specify the stack order of positioned elements that may overlap one another. The z-index default value is zero and can take on either a positive or negative number.
An element with a higher z-index is always stacked above than a lower index.
Z-Index can take the following values:
  • Auto: Sets the stack order equal to its parents.
  • Number: Orders the stack order.
  • Initial: Sets this property to its default value (0).
  • Inherit: Inherits this property from its parent element.

Can you explain the difference between visibility: hidden and display: none?

visibility: hidden hides the element, but it occupies space and affects the layout of the document.

What is tweening?

It is the process of generating intermediate frames between two images.
It gives the impression that the first image has smoothly evolved into the second one.
It is an important method used in all types of animations.
In CSS3, Transforms (matrix, translate, rotate, scale) module can be used to achieve tweening.

What is the difference between CSS2 and CSS3?

The main difference between CSS2 and CSS3 is that CSS3 is divided into different sections which are also known as modules. Unlike CSS2, CSS3 modules are supported by many browsers.

Apart from that, CSS3 contains new General Sibling Combinators which is responsible for matching the sibling elements with the given elements.