CSS Interview Questions

                  CSS Interview Questions

CSS Interview Questions:- Hi readers,We have prepared some good interview questions with answers on CSS,This questions will not only clear the topic but also prepare fresher candidate for grabing Jobs.Here I start session on CSS Interview Questions with answers.

Top 25 CSS Interview Questions

 

  1. What do you understand by the word “Cascading” in CSS (Cascading Style sheets)?

Cascading” in the context of Cascading Style Sheets simply means “fighting style sheets”. In CSS, a particular HTML element can be styled by more than one style sheet rule but only one style sheet rule applied to an HTML element which is more specific one.

The determination of specific rule is done by cascading down from the more general rules to the specific rule required.

If two rules have the same priority (like 2 classes with different style sheets on one element) then the last one specified in CSS file takes precedence.

  1. List the different ways of Cascading Style Sheet?

Internal:

The internal style sheet is given in the head section of the HTML document under <style> tag.  The internal style sheet makes it easy to apply styles using classes or ids in order to reuse the code.

External:

As the name suggest external style sheet, the style is given externally by creating a file with a .css extension outside the HTML document. The file is included in the HTML document by using a <link>tag in the head section of HTML.

Inline:

An inline CSS is applied only to single HTML element using <style> tag. The inline style is specific to the tag itself.

The inline style is advantageous only for the individual CSS change that you don’t use repeatedly through the site.As because any change in the style we need then one has to make the changes in every tag that has an inline style applied to it.

  1. How to add comments in CSS?

 

/*comments CSS Interview Questions CSS Interview Questions */

  1. Which property is used to align the text in CSS?

Text-align property is used for aligning text in CSS.

  1. Name the language through which CSS originated?

The origin of CSS is SGML (Standard Generalized Markup Language).

 

 

  1. Explain the box model of CSS?

Border
Margin
padding
Main content

Box model in CSS simply means design and layout. It is essentially a box that wraps around every HTML element. The CSS box model includes Border, margin, padding, and the actual content.

CSS Interview Questions

  1. List some of the new features included in CSS3?

  • Box model
  • Rounded corners
  • Border images
  • New web fonts
  • Box shadows, text shadows
  • Transform property
  • New pseudo- classes
  • Multi-column layout
  • New gradients
  • New color schemes(RGBA)

 

 

  1. A difference between id and class selector in CSS?

  • An id selector must be unique and used to identify only one element whereas class identifies more than one element or a block element.
  • An id selector is a name preceded by (#) character whereas a class is a name preceded by a (.) character

 

 

 

  1. What do you understand by grouping in CSS?

If you have more than one selector with the same style then instead of repeating the style you can group into one thus it minimizes code also. This is called grouping.

Example:         h1{background-color:red;}

                         .red{ background-color:red;}

                          .bg{background-color:red;}

These three selector can be group into one by using comma (,) operator.

.red,h1,.bg { background-color:red;}

 

  1. How can we define Inheritance in CSS?

Inheritance means child elements inherit the properties of the parent element. It simply defines the hierarchy of elements from the top level to bottom level.

In CSS inheritance can be understood simply by the following example:

Body{background-color:blue;

            Color:red;

          }

H1{color:white;}

In the above example body is a parent element and h1 is child element which inherits the property of background-color: blue and color: red;

But h1 also specify the color property so it overrides it and the text of h1 will be a white color. Except for h1 all another element under body element will not be overridden and the text color is red.

  1. Define the CSS dimension property?

Some of the dimension property of CSS to style an element:

  1. Height: this property is used to set the height of the specified element.
  2. Max-height: this property is used to set the maximum height of an element.
  3. Min-height: this property is used to set the minimum height of an element.
  4. Min-width: this property is used to set the minimum width of an element.
  5. Max-width: this property is used to set the maximum width of an element.
  6. Width: this property is used to set the width of the specified element.

 

 

 

  1. How can we differentiate between inline and block elements?

  • A block element is an element which takes the full width available and by default has one line break before and after the element.

Eg: <h1>,<div>,<p> ,etc.

  • An inline element takes up space as much as it required and does not force a line break before and after the element.

Eg:  <span> and <a>

  1. How is CSS executed in case of more than one conflicting rule?

If there are two or more rules –

P{color:red;}

P{color:blue;}

In the above example, all the p contents would appear blue as this rule was specified in last.

  1. Is it possible to give a line break using span in CSS?

Yes, it is possible to give a line break using span.

By setting the display property to block we can give a line break.

i.e.<span style=”display: block;”>

  1. How does float works in CSS?

A float is used to push the element either left or right. Elements are floated horizontally that means the element cannot be floated up or down. After floating all others elements will flow around it.

 It is mainly used for wrapping text around images and also we can create entire web layouts.

Float: left; elements is floated to the left side.

Float: right; elements should be floated to the right side.

Float: none; elements does not float either left or right side.

  1. Explain the display property in CSS?

Display property specifies if/how an element is displayed. It is one of the most important property which defines the layout of an element.

By default, every HTML element has a display value either block or inline.

 

display:block ;

It is used to make the element block-level.  A block level element starts on a new line and takes up full width available. Eg. Div , p, form and new HTML5 element are header, footer, section,etc.

display: inline;

It is used to make the element an inline. An inline element takes up as much space as it is needed and doesn’t force a line break before and after it. Span and an element are a most common inline element.

Display: none;

Hides an element and also does not takes up space and the page will look like as if there is no element.

  1. Explain the difference between visibility: hidden and display: none?

Visibility: hidden; simply hides an element but it will take up space in the web page and affects the page layout.

Display: none;  It will also hide an element but it will not take up any space. The web page will be displayed as if there is no element.

  1. What do you understand by Z-index in CSS?

Z-index in CSS is used to specify the positioning of an element in stack order. The element with higher z-index is stacked above than the lower z-index. By default, the value of z-index is zero whereas z-index can take a positive or negative number.

Some of the values of z-index are as follows:

Auto :-             sets the stack order equal to its parents.

Number :       specify the no. to orders the stack order.

Initial:             sets the default value (0).

Inherit:           inherit this property from its parent element.

  1. How to restore the default property value in CSS?

There is no hard and fast way to restore the default value in CSS. But it is not impossible. We can restore the default property value by setting the initial property of an element.

  1. Is it possible to use two or more than two classes in a single element?

Yes, it is possible to use two or more than two classes in CSS.

Eg.

          .black{background-color: black;}

          .font{font-size:14pt;}

<a class=”black font”>here </a>

 

 

 

 

  1. How can we control the repetition of an image in the background?

By using the background-repeat property in CSS we can control the repetition of the background image.

 By default background-repeat property have a repeat value. This means that if the image is small then the image is repeated multiple times to cover the background else the image will display only once. So to control the image we can use the no-repeat value for the background-repeat property of an element or the whole body of HTML document.

  1. What do you understand by shorthand property in CSS?

Shorthand property specifies more than one style sheets in one single property. By using the shorthand property we can set more than one property simultaneously. The CSS shorthand property helps to achieve more concise and often more readable style sheets for a web developer.

Eg

Font-size

Font-style

Font-family                                                                            CSS Interview Questions        Font                         

Font-variant

Font-weight

 

 

 

  1. How can we provide the spacing between each letter in CSS?

By using the letter-spacing property we can set the specified space between each character.

Eg: <p style=”letter-spacing:5px;”>

       This is the way to provide space between each letter.

</p>

 

  1. Explain the position property in CSS?

Position property in CSS is used to position an HTML element relative to other element or absolutely positioned according to the parent element.

Here is a list of values that a position property accepts:

Static: By default, all the HTML element has static positioning.

 

Relative: An element is positioned relative to its normal position.

 

fixed: An element is positioned relative to the browser window and it will not move even if the page is scrolled.

absolute: An element is positioned relative to the nearest parent element (whose position is anything except static). If there is no such parent element then it will be positioned relative to the HTML body element. An absolute positioned element moves with the page when it is scrolled.

  1. How can we change the cursor by using CSS?

We can change the cursor by setting the cursor property.

List of values accepted by cursor:

auto

crosshair

default

e-resize

help

move

n-resize

ne-resize

nw-resize

pointer

progress

text

wait

w-resize

s-resize

se-resize

sw-resize

  1. <div style=”cursor:help;”>help</div>

 

 

 

I Hope you would like this post about CSS Interview Questions with answers

Leave a Comment