CSS Interview Questions

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.

The following are the major versions of CSS

1. CSS 1
2. CSS 2
3. CSS 2.1
4. CSS 3
5. CSS 4

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

The CSS box model defines the layout and design of CSS elements. The elements are content (like text and images, padding (the area around content), border (the area around padding), and margin (the area around the border). 

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. 

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. 

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. 

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.

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. 

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. 

CSS plays a crucial role in the overall presentation of a web page. The advantages of CSS are as follows:

• Faster page speed
• Easy to maintain
• Saves time
• Device Compatibility
• Enhanced user experience
• Numerous formatting options
• Lightweight code
• Great accessibility

CSS Style is composed of the following elements:

• Selector: It is an HTML tag at which a style will be applied.
• Property: It is a type of attribute of HTML tag.
• Value: These are assigned to properties.

Grouping allows you to give the same properties to different selectors without repeating them. It reduces the code by grouping selectors that have the same properties or values. To group them, separate them with a comma, and the same properties will get applied to them all. Nesting allows you to have elements nested inside other elements.

How to integrate CSS on a web page?There are three ways to integrate CSS on a web page:

• Inline: To add CSS rules to an HTML element (tag)
• Embedded: To add a unique style to a single document.
• Linked/Imported/External: To make changes on multiple pages of the website.

An Embedded style sheet lets you define styles for the whole HTML document in one place. You can embed style sheet information into an HTML document using the <style> element. This is done by embedding the style sheet information within <style></style> tags in the head of the document.

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

The width property is used to set the width of a box.

Following is the rule to override any Style Sheet Rule −

• Any inline style sheet takes highest priority. So, it will override any rule defined in <style>...</style> tags or rules defined in any external style sheet file.
• Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file.
• Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable.

There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.

• Embedded CSS − The <style> Element: You can put your CSS rules into an HTML document using the <style> element.
• Inline CSS − The style Attribute: You can use style attribute of any HTML element to define style rules.
• External CSS − The <link> Element: The <link> element can be used to include an external stylesheet file in your HTML document.
• Imported CSS − @import Rule: @import is used to import an external stylesheet in a manner similar to the <link> element.

The advantages of CSS are listed below.

• Site-wide consistency
• Different document can be controlled
• To group style in a complex situation
• Page reformatting
• Accessibility
• Page reformatting

The limitations of CSS are listed below.

• Limitations of vertical control
• For rendering extra document CSS is needed
• No expression
• Pseudo-class not controlled by dynamic behavior
• For small style document, it is not practical
• No column declaration

CSS frameworks are the predefined libraries which make the styling of the web pages easy and systematic.

• Bootstrap
• Foundation
• Semantic UI
• Gumby
• Ulkit

 Embedded style sheet has the following advantages.

• Use selectors and group style in a complicated situation
• Extra download is unnecessary for importing information.
• Classes can be created for use with different HTML tags

A CSS selector provides the link between the HTML tags and CSS styles. It is a string that identifies the element to which the style declaration applies. Different CSS selectors are as follows.

• CSS Element Selector
• CSS Id Selector
• CSS Class Selector
• CSS Universal Selector
• CSS Group Selector

Logical tags are mainly used to indicate by the visually impaired and put emphasis on the text. They are useless for appearances. They are old and concentrate on the content.

Physical tags are mainly used to indicate how a particular character is to be formatted. They are also referred to as presentational markup. It is a newer version.

Font attributes are:

• font-weight
• font-size
• font-type
• font-variant
• font-style
• font-family
• caption
• item

W3C is the world wide web consortium. Its main work is to deliver the information to the worldwide web. It develops the guideline and rules for the web.

The ruleset is used to identify the selector that we can attach with another selector.

CSS selectors are used to selecting the content we want to style. It is the part of the CSS ruleset. It selects the elements according to its id, class, and attribute, etc.

The background-position property is responsible for controlling the position of the background image. We can set the following values.

• Center: set image at the center position
• Bottom: set image at the bottom position
• Top: set image at the top position
• Left: set image at the left position
• Right: set image at the right position

Example

<style>
div {
background-image:url(errorsea.jpeg);
background-repeat:no-repeat;
background-position:center;
}
</style>

The universal selector is used for selecting all the HTML elements, and it applies the style declaration to all the elements.

<style>
*{
font-size:15px;
text-align:justify;
Padding: 2px 0;
}
</style>

The p[lang] command is used to determine all paragraph components. You must know such tricky things while preparing for CSS interview questions and answers for freshers.

The background-position parameter specifies the position of the backdrop picture at the start. The background image is usually placed in the top-left corner of the webpage.

You can configure the following positions:

• center
• top
• bottom
• left
• right

The external style sheets in CSS provide the following benefits:

• You can construct classes to reuse them in several documents.
• It allows you to control the styles of several documents from a single file.
• It is great for applying styles in complex scenarios.

A web page containing many photos will take longer to load because each image sends out an HTTP request separately. CSS sprites minimize the loading time of a web page by combining multiple small pictures into a single image. The number of HTTP requests is reduced, as is the loading time.