CSS Interview Questions
1 .
Write all the properties of the flexbox.
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
2 .
What is the use of the Box Model in CSS?
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.
3 .
How can we add icons to the web page?
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.
4 .
What are navigation bars in 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;
}
5 .
Define ‘important’ declarations used in CSS.
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.
6 .
Differentiate between inline and block element.
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.
7 .
What are the benefits of CSS sprites?
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.
8 .
Enlist the various Media types used?
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.
9 .
Compare RGB values with Hexadecimal color codes?
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.
10 .
Enlist the various fonts’ attributes?
They are :

* Font-style
* Font-variant
* Font-weight
* Font-size/line-height
* Font-family
* Caption
* Icon