CSS Interview Questions & Answers

  • Home
  • Interview_Question

Interview Questions & Answers

Select Series

What are the different variations of CSS?

Following are the different variations of CSS: CSS1, CSS2, CSS2.1, CSS3, CSS4

Name some CSS style components?

Some CSS Style components are: 1.Selector 2.Property 3.Value

Explain universal selector.

The universal selector matches the name of any of the element type instead of selecting elements of a specific type. For Example:- * { color: green; font-size: 20px; }

What is the difference between logical tags and physical tags?

Physical tags are referred to as presentational markup while logical tags are useless for appearances.
Physical tags are newer versions, on the other hand, logical tags are old and concentrate on content.

What is the CSS Box model and what are its elements?

The CSS box model is used to define the design and layout of elements of CSS. The elements are: Margin - It removes the area around the border. It is transparent. Border - It represents the area around the padding Padding - It removes the area around the content. It is transparent. Content - It represents the content like text, images, etc.

What is the usage of Class selector?

Selectors that are unique to a specific style, are called CLASS selectors. Declaration of style and association with HTML can be made through this. Syntax: Classname it can be A-Z, a-z or digits. .top {font: 14em ;}, class selector this class is associated with element

How to overrule underlining Hyperlinks?

Control statements and external style sheets are used to overrule underlining Hyperlinks. E.g.: CSS B { text-decoration: none; } link text B { text-decoration: none; } link text

Can default property value be restored through CSS? If yes, how?

In CSS, you cannot revert back to old values due to lack of default values. The property can be re- declared to get the default property.

Compare Grouping and Nesting in CSS ?

Grouping: Selectors can be grouped having the same values of property and the code be reduced. E.g. : h1 { color: blue; } h2 { color: blue; } p { color: blue; } h1 { color: blue; } h2 { color: blue; } p { color: blue; } It can be seen from the code that every element shares the same property. Rewriting can be avoided by writing each selector separated by a comma. Nesting: Specifying a selector within a selector is called nesting. CSS P { color: red; text-align: left; } .marked { background-color: blue; } .marked p { color: green; } p { color: red; text-align: left; } .marked { background-color: blue; } .marked p { color: green; }

How does Z index function?

Overlapping may occur while using CSS for positioning HTML elements. Z index helps in specifying the overlapping element. It is a number which can be positive or negative, the default value being zero.

What is the difference between CSS2 and CSS3?

There are several differences between CSS2 and CSS3. CSS3 is divided into two various sections which are called as a module. Whereas in CSS2 everything accedes into a single document with all the information in it. CSS3 modules are supported almost on every browser and on the other hand modules of CSS and CSS2 are not supported in every browser. In CSS3 we will find that many graphics related characteristics have been introduced like “Border-radius or box-shadow, flexbox. In CSS3, a user can precise multiple background images on a webpage by using properties like background-image, background-position, and background-repeat styles.

What is RWD?

RWD stands for Responsive Web Design. This technique is used to display the designed page perfectly on every screen size and device, for example, mobile, tablet, desktop and laptop. You don't need to create a different page for each device.

How can the gap under the image be removed?

As images being inline elements are treated same as texts, so there is a gap left, which can be removed by: CSS img { display: block ; }

How comments can be added in CSS?

The comments in CSS can be added with /* and */.

Define Attribute Selector ?

It is defined by a set of elements, value and its parts.

What is at-rule?

Rule, which is applicable in the entire sheet and not partly, is known as at-rule. It is preceded by @ followed by A-Z, a-z or 0-9.

Name all the modules which are used in the current version of CSS.

There are several modules in CSS as stated below: Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface.

Write all the properties of flexbox ?

There are several properties of flexbox that are used in the HTML webpage. They are: flex-direction flex-wrap flex-flow justify-content align-items align-content

What is the difference between padding and margin ?

In CSS, the margin is the property by which we can create space around elements. We can even create space to the exterior defined borders. In CSS we have margin property as follows: margin-top margin-right margin-bottom Margin-left Margin property has some defined values as shown below. Auto – using this property browser calculates the margin. Length – It sets the margin values in px,pt,cm etc. % – It sets the width % of the element. Inherit – By this property we can inherit the margin property from the parent element. In CSS, padding is the property by which we can generate space around an element’s content as well as inside any known border. CSS padding also has properties like, Padding-top Padding-right Padding-bottom Padding-left Negative values are not allowed in padding. div { padding-top: 60px; padding-right: 40px; padding-bottom: 50px; padding-left: 70px; }

Write all the position states used in CSS ? 

In CSS, there are four position states as stated below: Static(default) Relative Fixed absolute