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.

Can you explain the term graceful degradation?

In CSS, if any component will get fail, graceful degradation helps the component to work properly as required. While designing the webpage, the latest browser application is used. If an image is not able to view then its text can be shown.

What are the defined dimension properties?

The defined dimension properties are Height, Min-height, Max-height, Width, Min-Width, and Max-Width.

What are the various media types?

The various media types used that are screen, projection, aural, print and handheld. CSS can be used for different screens like a computer or laptop screen. It can be used for a handheld device like a mobile. CSS is used to project on projectors. It is being used in sound synthesizer and speech. It also gives the preview of content while taking the print of the document.

Can you explain Flexbox and CSS grid?

Flexbox is a layout tool that is very useful in smaller areas of the site. The main feature of this is to align items in a horizontal or vertical axis. It is used to space the item out automatically, with other layout options and in a defined order to display the items.

CSS grid is almost a layout tool for the single page. It is used for layouts for both the horizontal and vertical axis unlike the flexbox tool, which is used only for one axis at a time.