CSS3 - Interview Questions and Answers

CSS stands for Cascading Style Sheets. It is a technology developed by the World Wide Web Consortium or W3C. It was developed to streamline the styling of webpages into a separate technology.

Following are the different variations of CSS:

CSS1
CSS2
CSS2.1
CSS3
CSS4

Box Model in CSS is a layout that consists of a rectangular division consisting of HTML elements on a page. Different components that are included in the CSS box model are:

· Content: the text or image element

· Padding: space between the content and border

· Border: space surrounding the content and padding

· Margin: space surrounding the content and border

Advantages are:

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

CSS can be integrated in three ways:

Inline: term is used when the CSS code have attribute of HTML elements
```
<p style="colour:skyblue;"> hello world!</p>
```
External: separate CSS file is created in the workspace and later linking them in every web page that is created
```
<head>

  <link rel="text/css"

href="your_CSS_file_location"/>

</head>
```

Internal: the head element of the web page has internal CSS implemented in it

<head>

  <style>

    p{

       color:lime;

       background-color:black;

      }

   </style>

</head>

CSS was first developed in 1997 as a way for web developers to define the visual appearance of the web pages that they were creating. It was intended to allow developers to separate the content and structure of a website’s code from the visual design, something that had not been possible prior to this time.

The separation of structure and style allows HTML to perform more of the function that it was originally based on — the markup of content, without having to worry about the design and layout of the page itself, something commonly known as the “look and feel” of the page.

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

Class Selectors
ID Selectors
Element Selectors
Group Selectors

A string equivalent of HTML elements by which declarations or a set of it, is declared and is a link that can be referred for linking HTML and Style sheet is CSS selector.

The z-index helps 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.

Mixin in CSS is used for grouping the CSS declarations which could be reused in the code execution. Mixin in CSS is used by @include along with the Mixin name and a semicolon. For instance:

.row {

@include grid(true);

}

Below are the prominent CSS frameworks in the web development industry today

Bootstrap:- Bootstrap is the most popular CSS framework for developing responsive and mobile-first websites. Bootstrap 4 is the newest version of Bootstrap
Foundation:- Foundation is a responsive front-end framework. Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions.
Semantic UI:- Semantic UI is a modern front-end development framework, powered by LESS(CSS-preprocessor) and jQuery. It has a sleek, subtle, and flat design look that provides a lightweight user experience.
Ulkit:- UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

The CSS opacity property is used to specify the transparency of an element. In simple word, you can say that it specifies the clarity of the image. In technical terms, Opacity is defined as the degree to which light is allowed to travel through an object.

While physical tags are also referred to as presentational mark-up, logical tags are useless for appearances.
Physical tags are newer versions while logical tags are old and concentrate on content.

They are:

Font-style
Font-variant
Font-weight
Font-size/line-height
Font-family
Caption
Icon

Pseudo-elements are used to add special effects to some selectors. CSS in used to apply styles in HTML mark-up. In some cases when extra mark-up or styling is not possible for the document, then there is a feature available in CSS known as pseudo-elements. It will allow extra mark-up to the document without disturbing the actual document.

The p[lang] command is used for selecting all the elements of a paragraph.

RGB is a system of representing a certain colour in CSS. There are three streams in this nomenclature of representing a colour, namely the Red, Green and Blue stream. The intensity of the three colours is represented in numbers ranging from 0 to 256. This allows CSS to have a wide range of colours spreading across the entire spectrum of visible colours.

The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage.

You can set the following positions: