CSS Technical Interview Questions

What is CSS?

CSS stands for Cascading Style Sheets. It is a type of style sheet language that is primarily used for describing the presentation of a document written in a markup language. It is primarily used in conduction with HTML. However, it is actually independent of HTML and can be used with any XML-based markup language.s

In simple terms, CSS is a language that describes the style of an HTML document. It describes how the elements in the HTML document should be displayed as well as the order in which they should be displayed. This includes the font, style, colors, and layout among others.

What are advantages of using CSS?

Cascading Style Sheets (CSS) are quite popular as they provide ease and functionality to web designers and website visitors. As its name suggests, the CSS is a style sheet. It is primarily used to detail how the web page's markup language will be displayed, primarily things such as colors, fonts, and layout. The usage of CSS provides a number of benefits, including:

  • Efficiency: As the same CSS can be used with multiple HTML sheets
  • Consistency: One change in the CSS will reflect on all the pages using that CSS
  • Improved Design: provides better and wider presentation capabilities
  • Bandwidth Reduction: separates the website's content from its design language, hence reducing the file transfer size
  • Browser Compatibility: increases the website's adaptability hence ensuring that the website will be viewed in the manner intended
  • Search Engines: is a clean coding technique that allows the search engines to read the website’s content
  • Viewing Options: automatically adapts the website for viewing on different devices

What are the limitations of CSS?

Cascading Style Sheets (CSS) provide a lot ease and functionality to web designers and website visitors. CSS is primarily used to detail how the web page's markup language will be displayed, primarily things such as colors, fonts, and layout. However, like everything else in life, CSS has certain drawbacks and limitations, including:

  • No ascending by selectors
  • Vertical control is limited
  • No expressions
  • No column declaration
  • Pseudo-class not controlled by dynamic behavior
  • No specific rules or styles for specific text
  • May work differently on different browsers
What are CSS frameworks?

CSS frameworks are pre-prepared software framework. They are preplanned libraries that are used to make the process of web styling easier. They allow for easier, more standards-compliant web design via the use of Cascading Style Sheets (CSS).

Most of the CSS frameworks contain at least a grid. However, the more functional frameworks come with more features and additional JavaScript based functions. The CSS frameworks are primarily design oriented and are meant to be unobtrusive.

The two most common and widely used CSS frameworks are Bootstrap and Foundation.

What are the components of a CSS Style?

Cascading Style Sheets (CSS) are primarily used to define the style, formatting and layout of a web page. CSS is primarily made up of different styles rules which indicate to the browser how the page should be displayed. Each style rule is made up of three different parts. In order they must be a selector, property, and a value.

  • Selector − an HTML tag to which the required style will be applied. This could be any tag such as <h1> or <table> etc.
  • Property − a type of attribute of an HTML tag. Basically, all HTML attributes are converted into CSS properties. They can be color, size, border, etc.
  • Value − assigned to properties. A color property can have a value, such as a specific color, size, border, etc. For example: red or #F1F1F1.

An example of a CSS Style would be:

<html>

  <head>

    <meta charset="utf-8">

    <style>

    #xyz { color: red; }

    </style>

  </head>

  <body>

    <p id="xyz" style="color: blue;"> To demonstrate specificity </p>

  </body>

</html>
What are different ways to integrate a CSS into a Web page?

In order for the CSS to be read and implemented, it must be integrated into the Web Page. This is usually done via the use of HTML or XHTML language.

The CSS can be integrated in three primary ways:

Inline: applies a unique style to a single HTML element, via the use of the style attribute of an HTML element.

Embedded: the code can be placed within the style element of the Head element

Linked/ Imported: the code can be placed in an external file and linked via the link element.

What is Embedded Style Sheet?

Embedded Style Sheet is a type of CSS style sheet. They allow the HTML page to be styled. It describes how the elements in the HTML document should be displayed as well as the order in which they should be displayed. This includes the font, style, colors, and layout among others. The style sheet will only affect the page it is embedded in.

The CSS syntax for embedded style sheets is exactly the same as other CSS code. An entire style sheet can be embedded in an HTML document using the STYLE element contained within the HEAD block.

The embedded style sheet is similar to the external style sheets, except that it is contained within the document itself.

What are the advantages of Embedded Style Sheets?

The advantage of an embedded style sheets is that they allow one to define styles for the whole HTML document in one place. Here the style sheet will only affect the page it is embedded in. It also loads immediately with the page, instead of requiring other external files to be loaded. This can benefit the download speed and performance of the webpage.

However, embedded style sheets are best suited for documents with unique design requirements. If the styles need to be applied across multiple documents, then it would be better to link to an external style sheet instead of using an embedded style sheet.

Embedded style sheets also tend to add a lot of markup language to the page, which may end up making the page harder to manage in the future.

What is type selector?

As the name suggests, type selectors are used to select certain types. They will select any HTML element on a page that matches the selector, regardless of their position in the document tree. This can make it easier to select certain HTML elements rather than manually searching for them throughout the document.

The Type selector is one of the possibilities of CSS Attribute Selectors. There are many different types of selectors that can be used such as universal selector, descendant selector, class selector, etc.

What is universal selector?

A universal selector is a type of CSS Attribute Selectors, which allows one to search for and select a single element of any type. The universal selector for CSS is an asterisk (*).

It can be implied if it isn’t the only component of the simple selector. Hence, if it is implied, it can be omitted, as both instance will yield the same results.

For example: *.warning and .warning are considered equal and will have the same effect.

It is possible to confuse the universal selector with a wildcard character, however, the universal selector doesn’t match “zero or more elements.” Hence, this confusion should be avoided.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.