Google News
CSS Interview Questions
CSS is the acronym for "Cascading Style Sheet". CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. Css are three types Class base css, Tag base css, ID base css.
Following are the different variations of CSS  :
Below are some of the advantages of CSS :

1. Accessibility
2. Multiple Device Compatibility
3. Page will load fast
4. Maintenance is Easy
5. Offline Browsing
In CSS selectors are patterns used to select the element's you want to style. Use our CSS Selector Tester to demonstrate the different selectors. 

There are several different types of selectors in CSS.
1. CSS Class Selector
2. CSS Id Selector
3. CSS Universal Selector
4. CSS Element Selector
5. CSS Group Selectors   and more selectors etc...
There are three methods to integrate CSS on web pages.

1. Inline method (or) CSS
2. Internal method (or) CSS
3. External method (or) CSS

Inline css : The css which is written in the tags in the body of html documents is called Inline css.

Internal css : The css which is written internally within the html document in the head tag is called Internal css.

External css : The css which is written externally and it is linked within head tag is called External css.

Class Base : The css used to redefine the elements of html is called as  class base css.It is denoted by dot(.) before the name. The class based css file is using to multiple times of single document.
 ex: (  .sample{color:#000;}  )

Tag Base : The css used to apply for tag of html is called as tag base css. Tag base css is denoted with tags(body,img, ul, li,p,table,h1 to h6..etc)

ID Base : The css used to create block elements is called as ID base css. Alternative for creating table(cell) without html.It is denoted by  (#)before the name. The ID based css file is using to single time of single document.
ex: #header,#banner etc.
Padding : Padding is used to define the space between the content and the border. (Inside Border)

Margin  :  Margin is the space outside the border. (Outside Border)

You can easily specify the different paddings and margins for the different sides of an element such as top, right, bottom or left side using the CSS individual padding and margin properties.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

Child selectors can be used for applying the style for parent element and this will descend to the child elements. Below is the example -

body > input{
color: #FFFFF1;
Multiple style sheets can be combined by using the <link> tag and the with the title attribute. The title value allows one or more <link> tags to link with each other. After combination that theme will be applied as combined and will be shown to the user.

The syntax of it will be as follows :
<link rel= “text/css” href="bootstrap.css" title="combined">
<link rel= “text/css” href="style.css" title="combined">
<link rel= “text/css” href="slider.css" title="combined">

Another way to combine the style sheets is the use of import which can be used in the <style> tag and the syntax can be given as follows:

@import url(site_url);
Pseudo elements allow the use of the part of element and not the element itself. They are applied to block level element, which is used for the complete block for which the CSS is being written. This allow the subpart of an element to be styled like paragraphs and headings.

For example:
selector:pseudo-element {property:value;}
p: first-line {text-transform: lowercase;}
The main difference between CSS2 and CSS3 is that CSS3 is divided into different sections which is also known as modules.

Unlike CSS2, CSS3 modules are supported by many browsers.

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.

Dimension properties can be defined by:
  • Height
  • Max-height
  • Max-width
  • Min-height
  • Min-width
  • Width

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.

The comments in CSS can be added with  /* and */ .
Quotes are optional in URL’s, and it can be single( '  ' ) or double.( "  " ).
Tweening is the process in which we create intermediate frames between two images to get the appearance of the first image which develops into the second image.
It is mainly used for creating animation.
CSS counters are variables that can be incremented by rules of CSS that inspector track how many times the variable has been used.
It is a property of CSS which allows you to display a smooth transformation between two or more than two specified colors.
There are two types of gradients that are present in CSS. They are:
* Linear Gradient
* Radial Gradient
There are several properties of the flexbox that are used in the HTML webpage.
They are :
* flex-direction
* flex-wrap
* flex-flow
* justify-content
* align-items
* align-content
In CSS, the box model is a box that binds all the HTML elements and it includes features like margins, border, padding, and the actual content.
By using a box model we will get the authority to add the borders all around the elements and we can also define the space between the elements.
We can add icons to the HTML webpage by using an icon library like font-awesome.
We have to add the name of the given icon class to any inline HTML element. (<i> or <span>) . Icons in the icon libraries are scalable vectors that can be customized with CSS.
By using navigation bars we can make an ordinary HTML page into a user-specific and more dynamic web page. Basically, it is a list of links, hence use of <ul> and <li> elements makes the perfect sense.
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
Important declarations are defined as that declaration which is having more importance than the normal declaration.
While executing, these declarations override the declaration which is having less importance.
For example, if there are two users having an important declaration then one of the declarations will override the declaration of another user.
For Example :

Body {background: #FF00FF !important; color: blue}
In this body, background has more weight than the color.
Inline element does not have an element to set width and height and also it does not have the line break.
Example : em, strong, etc.
Block element specification:
They do have the line break.

They define the width by setting a container and also allow setting height.
It can also contain an element that occurs in the inline element.

Example :
width and height
max-width and max-height
min-width and min-height
hi (i=1-6)- heading element
p- Paragraph element.
Benefits of using CSS sprites are : It is a technique where one has a large image containing a set of small images. Those images can be broken down with the help of CSS to disintegrate into multiple images.

It helps large images or pages to load faster hence, saving a lot of time. It cuts back HTTP requests. It is also flexible over website’s layout and design.

The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of http requests and hence the loading time.
Different media has different properties as they are case insensitive.

They are :

Aural – for sound synthesizers and speech
Print – gives a preview of the content when printed
Projection - projects the CSS on projectors.
Handheld - uses handheld devices.
Screen - computers and laptop screens.
A color can be specified in two ways :

* A color is represented by 6 characters i.e. hexadecimal color coding. It is a combination of numbers and letters and is preceded by #.
Ex : g {color: #00cjfi}

* A mixture of red, green and blue represents a color. The value of a color can also be specified.

Example : rgb(r,g,b):
In this type the values can be in between the integers 0 and 255. rgb(r%,g%,b%): red, green and blue percentage is shown.
They are :

* Font-style
* Font-variant
* Font-weight
* Font-size/line-height
* Font-family
* Caption
* Icon
Basically it is not case sensitive but the class names are considered as case sensitive in HTML 4.01 nevertheless font families, URL’s of images, etc is. Only when XML declarations along with XHTML DOCTYPE are being used on the page, CSS is case -sensitive.
It is an instruction that tells browser on how to render a specific element on the HTML page. It consists of a selector with a declaration block that follows.

Rule set : Rule set Selectors can be attached to other selectors to be identified by rule set.
The disadvantages of using CSS are :
There are no expressions.
Vertical control is limited.
The column declaration is not there.
Target specific texts, styling, and rules are not allowed.
There is no dynamic behavior to control pseudo-class.
It is not possible to ascend by selectors.
CSS frameworks are pre-planned libraries, allowing a more convenient web page styling which is also compliant to standards.
In order to center the block-level elements, we need to set the margin-right and margin-left properties to explicit values.
There are three methods to integrate CSS in the form of the web page:
Embedded : There can be a style element inside the head element inside which we can place the code.

Inline : CSS applied HTML elements can be found using style attributes.

Imported or Linked : In case of linked or imported CSS, the CSS is placed in an external file and link element is used to link it.
It is basically a catalog of directions comprising the property, followed by a colon, and finally the value enclosed within braces.
38 .
RWD is the abbreviated form of Responsive Web Design. It is used to display the designed page suitably on any kind of screen size depending on the device under consideration.
Below are the list of properties of cursor :
* Pointer
* Help
* Wait
* Hand
* Crosshair
Display:none : This will just hide the element and does not take any space of the element.

Visibility:hidden : This also hides the element and will take space for the element and this will affect the entire layout of the document.
Graceful degradation is about creating a website design that will be compatible with the latest browsers and, at the same time, will remain functional to an extent on smaller screens and older browsers. I use the principle of graceful degradation in my web development work, as many of our viewers still use older browsers and it is important that they should be able to access and view our website.
File splitting is about splitting the CSS code into many separate files and organizing them according to the component type or site section to facilitate better management of CSS. You can create and assign a separate style sheet for each of these files for further convenience. So, when someone visits a section of the website, only the style sheets for that section will load. The style sheets for the other website sections will not load until specifically needed. I've found that this reduces the time taken for the page to load on the browser. That then leads to quicker access to websites and enhances user experience.
The opacity is mainly used in defining the transparency of the element. In other words, it specifies the clarity of an image by allowing some fixed size of light to pass through it.
Example : 
The background-repeat property is responsible for controlling the image repetition. Using this property, we can repeat an image horizontally, vertically, or both. It has the following different values:
repeat: it repeats the image horizontally and vertically
repeat-x: it repeats the image horizontally
repeat-y: it repeats the image vertically
no-repeat: it does not repeat the image.
Example :
   div {
With the help of !important we can override CSS properties.
Example : 

    width:40% !important;
* Bootstrap
* Semantic
* Materialize
* Bulma
* Foundation
* Pure CSS etc
The float property in CSS places an element on the right or left side of its container, allowing text and inline elements to wrap around it.
Example :
      float: right;
The CSS overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area.
Property of overflow is given below :
* visible
* hidden
* auto
The unicode-bidi property is used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document.
CSS unicode-bidi property example :
div {
  direction: rtl;
  unicode-bidi: bidi-override;
The text-indent property specifies the indentation of the first line in a text-block.
Example :
p {
   text-indent: 50px;
The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element.
Example :
div {
      transform: rotate(45deg);
      transform-origin: 20% 40%;
The hanging-punctuation property specifies whether a punctuation mark may be placed outside the line box at the start or at the end of a full line of text.
Example :
p {
   hanging-punctuation: first;
The counter-increment property increases or decreases the value of one or more CSS counters. The counter-increment property is usually used together with the counter-reset property and the content property.
Example :
body {
  /* Set “my-sec-counter” to 0 */
   counter-reset: my-sec-counter;

h2:before {
   /* Increment “my-sec-counter” by 1 */
   counter-increment: my-sec-counter;
   content: “Section ” counter(my-sec-counter) “. “;
The backface-visibility property defines whether or not the back face of an element should be visible when facing the user. The back face of an element is a mirror image of the front face being displayed. This property is useful when an element is rotated.
Example :
#div1 {
   backface-visibility: hidden;
#div2 {
   backface-visibility: visible;
The calc() function performs a calculation to be used as the property value.
#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% – 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
  text-align: center;
The cubic-bezier() function defines a Cubic Bezier curve.
Example :
div {
  width: 150px;
  height: 150px;
  background: blue;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);