CSS3 Interview Questions with answers

By using dot(.)className style can be applied to a class

<div class="text-black">This is a text.</div>
<style>
.text-black {
    color:#000;
}
</style>

By using #idName style can be applied to ID

<div id="item1" class="text-black">This is a text.</div>
<style>
#item1 {
    background-color:#f00;
}
</style>

Id has more preference.

Classes can be nested. For example

 body .h1  {
font-size:36px;
}

• It should be unique on entire web page.
• there must not be special symbol in the id name except hyphen or underscore
• First character of id name can’t be number.

• First character can’t be number
• Hyphen & space allowed only from special character

Inline : via style attribute on tag

<h1 style="color:black">Black</h1>

Internal/embedded : via style tag

<style>
h1{
color:black;
}
</style>

External : write all the style in style.css file and embed it onto the web page via link tag.

<link href="css/style.css" rel=stylesheet>

pseudo class is special keyword that is attached to selector to define its special state.

selector:pseudo-class {
  property:value;
} 

commonly used pseudo classes are

:hover
:active
:focus
:not
:first-child
:last-child
:before
:after
:first-of-typpe
:last-of-type
:link
:nth-child
:disabled
:visited

It is pseudo class and is used to select nth-element. For example

 ul li:nth-child(odd) or  ul li:nth-child(2n+1) 

 :nth-child(3n+4) 

CSS framework provides basic structure of grid, form elements, icons, button, tab, drop-down etc.
For example: Bootstrap framework is widely used as CSS framework.

Pros : No external download is required.

Cons : It is not possible to manage the style for different documents using one file.

Priority of styles:
Inline
Internal
External

CSS selectors are used to find the element that needs to be applied style on it.
CSS has following type of selectors:

Element Based

a{
color:#000;
}

class based

.color-black{
color:#000;
}

id based

#black{
color:#000
}

pseudo class

a:hover{
text-decoration:none;
}

attribute selector

a[target="_blank"]{
color:#ccc;
}

combination selector
div > p : to select all the child p tag of div
div+p : to select immediate sibling of div tag
div ~p : to select all the siblings of div tag

background-attachment : fixed

star(*) is universal selector

selector{
property: value;
}

Following features has been added into CSS3

Models : for example media queries , grid template, fonts etc.

CSS properties : eg. box-shadow, text-shadow, animation, transition, transform, gradient, background properties etc.

 /* @keyframes duration | timing-function | delay |  iteration-count | direction | fill-mode | play-state | name */ 
animation: 3s ease-in 1s 2 reverse both paused slidein; 

animation properties

• animation-name: none
• animation-duration: 0s
• animation-timing-function: ease
• animation-delay: 0s
• animation-iteration-count: 1
• animation-direction: normal
• animation-fill-mode: none
• animation-play-state: running

Reference : For more go through this article here.

Visibility hidden means : element will be no longer appear on web page but take its space.

Display none means : element will be no longer appear on web page as well as it will not take its space.

The box model of CSS has
content box : area where content is displayed.
padding box : inner space of content box , basically space around content
border box: space for border .
margin box : outer space of content box

overflow-x: scroll // horizontal scroll  
overflow-y : scroll // vertical scroll  
overflow:hidden //hide scroll

It defines the stack order of element. Higher the z-index is higher its stack order. It works only with position property.

It is CSS query that returns true or false on the basis of all the expressions & media types used in it.

 @media not|only mediatype and (expressions) {
  CSS-Code;
} 

4 types of media types
screen : for computer screen, tablets etc.
print : for printer
all : for all types
speech : for screen readers

font-weight:
font-style:
font-family:

Both are color codes.

CSS is case in-sensitive. But HTML class or ID is case sensitive.

• Variables can not be used in CSS.
• No logical condition can be applied using CSS

 background: linear-gradient(direction, color-stop1,  color-stop2, ...); 

 .gradient {
  background: linear-gradient(to right, red 5%, yellow 95%);
} 

 #gradient {
  back: linear-gradient(45deg, red, black);
 } 

 #gradient {
  background: radial-gradient(red 5%, yellow 15%, green 60%);
} 

Using display: table to main div and display:table-cell ; vertical-align:middle to both the divs.

using @font-face rule

 @font-face {
font-family:   webfont ;
src: url('mywebfont.eot'); /* IE9 Compat Modes */   src: url('mywebfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */        
url('mywebfont.woff2') format('woff2'), /* Super Modern Browsers */ 
url('mymwebfont.woff') format('woff'), /* Pretty Modern Browsers */        url('mywebfont.ttf')  format('truetype'), /* Safari, Android, iOS */        url('mywebfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
 }
 
 body {
     font-family:  railway ;
 } 

px : fixed unit
em: relative to parent and 1em = 16px
rem : relative to root element and 1rem = 16px
% : relative to parent element
vw : relative to viewport’s width
vh : relative to viewport’s height

If and element property has !important keyword than it has more priority as compared to other styled.
for eg,
p {
font-size: 12px !important
}
p{
font-size: 13px;
}

then the font size will be 12px;

transform: rotate(90deg); 

transform: skewY(30deg); 

transform: scale(1.1); 

@keyframes slidein {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

can be used as

 animation: 3s ease-in 1s 2 reverse both paused slidein;  

Reference : For more go through this article here.

According to wikipedia
The World Wide Web Consortium is the main international standards organization for the World Wide Web. Founded in 1994 and currently led by Sir Tim Berners-Lee, the consortium is made up of member organizations which maintain full-time staff working together in the development of standards for the World Wide Web

calc()
rgb()
rgba()
liner-gradient()
radial-gradient()

 <link rel="stylesheet" media="mediatype and|not|only (expressions)"  href="css/responsive.css">  

Fixed
Relative
Absolute
Fixed