Q1. What is CSS and Types of CSS?

Ans: CSS (Cascading Style Sheet) is used to style html elements , we can
arrange our html element by using css.

CSS Types
1. Inline css
2. Internal css
3. External css

Inline CSS: Inline CSS can style one element at a time. It is written in html tag
as a attribute.
Example:
<p style=”color:red”>hello inline css</p>
Internal CSS: Internal CSS can style multiple element at a time but in a single page. It is
written under the head tag by using style tag, to use internal css we need css selector to
select the html element.

Example:
<style>
P
{
color:red;
}
</style>

External CSS: External CSS can style multiple elements in a multiple pages. It is written in
separate css file, mostly web designer uses this css to design websites because it saves
our time and line of code. To use this css we have to link css file in a html page.

Example:
<link rel=”stylesheet” href=”css/style.css”>
 Q2. Which CSS Type should be used
to design Website?
Ans: External CSS should be used to design a website because by using external css
we can style multiple elements in a multiple pages so it saves our time and line
of code.
 Q3. Define any 5 Mostly used CSS Selector?
Ans: The most common CSS Selectors are following:

Class selector: It is used to select specific element. It is denoted by (.) dot

symbol.

Element Selector: It select element by their name. like p,h1,li etc tag.

Group Selector: It is used to select more than one element at a time. It is

denoted by (,) comma symbol.

All Selector: It selects all the HTML elements. It is denoted by (*) asterisk
symbol.

Descendant Selector: It selects the child elements of the selected parent.

 Q4. What is reset.css file?

Ans: reset.css is used to remove or reset default property of browser, browser

take some default properties like margin, padding, line-height etc.
 Q5. CSS Box Model vs Box sizing?

Ans: CSS BOX Model Concept tells that you should (-) minus padding or
border value from width and height. If we don’t minus then it increase our
box size. CSS Box Model introduced in CSS2.

To minus padding and border again and again in different elements is very
boring work. So to get rid from this CSS3 introduced box-sizing:border-box
property.

box-sizing: It is introduced in CSS3, if we use box-sizing:border-box property

then there is no need to minus padding or border values from width and
height. It is an updated version of CSS Box Model. It is used with all
selector(*) in a website.
 Q6. How to use offline font in CSS?
Ans: To use offline font there are few steps below:

• Download font from any website like google fonts, the fonts etc.
• Save the font in your fonts directory of the project.
• Write down the following code in your css file:

@font-face {
font-family: fontfamily; // you can write the name whatever you want
src: url(foldername/font-name.ttf); // here write the font path and font name with its
extension
}

body
{
font-family: fontfamilyname; // font family which you have created in your @font-face
property.
}
 Q7. Define CSS3 features?
Ans: CSS3 has many features some of them are following:

Box-sizing:border-box;
Css variable
Flex
Border radius
Object-fit
Grid
Masking
Animations
Transitions
CALC
Counters
Gradients
 Q8. Flex in CSS?
Ans: Flex is an advanced version of float we can align element horizontally
and vertically also. Flex is applied on parent element.
In flex there are two main properties:

Justify-content: It is used for horizontal alignment. It has the following

properties:
Flex-start
Flex-end
Center
Space-between
Space-around

Example:
.main
{
display:flex;
Justify-content:center;
}
Align-items: It is used for vertical alignment. It has the same properties as justify-
content have.

Example:
.main
{
Display:flex;
Align-items:center;
}
 Q9. Pseudo Elements in CSS?

Ans: Pseudo elements are preceded by (::) symbol , it is used to

add content before or after the element. It has the following
properties:

1. ::before: It is used to add content before the selected

element.
2. ::after: It is used to add content after the selected element.
3. ::selection: It is used to change the color of selection.
4. ::first-letter: It is used to select the first letter of word.
 Q10. Difference Between the
opacity() and rgba() property?
Ans:
opacity(): is used to transparent element. It applies to the
selected element and their child element also.

Example:
.abc
{
opacity:0.6;
}
rgba(): is used to transparent element. It applies to the selected
element only it does not apply to the child element.

Example:
.abc
{
background:rgba(0,0,0,0.6);
}

Conclusion: If you want to transparent element that does not

have content then you should use opacity otherwise rgba() is
best.
 Q11. Positions in CSS?
Ans: In CSS there are main positions following:

• Static: It is default property of an element.

• Fixed: It is used to fix the element at particular position.

• Absolute: It free the element means you can move the absolute element
wherever you want to move on the web layout. Some examples of
absolute : dropdown menu, a box which is half on the other div.

• Relative: It works as parent element of absolute. It tells the absolute

element where to move.
 Q12. Background Properties in CSS?
Ans: In a CSS the background properties has the following:

• background-color: It is used to give background color to the element.

• background-image: It is used to give background image to the element.

• background-attachment: It is used to fixed background image on the background.

• background-position: It is used to give position to the background image, you can

move background image x-axis or y-axis.

• background-size: It is used to manage size of background image.

• background-repeat: By default background image is repeated if we use small size

image on background, you can no-repat the value of background image.
 Q13. CSS Variable?
Ans: CSS variable is very useful feature of CSS3, it is best suitable when you want to reuse your
design. For example you have created first website that has blue and red theme, second time
you want to create a website and you want to change only color scheme then there is no
need to change the color over and over in all the places.

CSS Variable is useful to hold the css property which is globally used in a website like color
scheme, font family, font size of content.
Example:
:root
{
--red-color:#f00;
--grey-color:#ddd;
}

.abc
{
background:var(--red-color);
width:300px;
height:300px;
}
.abc h2
{
color:var(--grey-color);
}

<div class=”abc”>
<h2> hello css variable</h2>
</div>
 Q14. Image sprites?
Ans: Image sprites is very useful when we want to use number of small icons or images on a
website. Actually when we use number of small image on a website it increases http request
or in simply way we can say that is slows down our website.

So the solution is image sprite, image sprite is a single big sheet in which all the small icons
arranged. This is done by graphic designer, after that we use this sheet as a background
image on a website.

We use this sheet on a background image with different positions.

Example:
.fb
{
Background-image:url(‘images/social.png’);
Width:100px;
Height:100px;
}

.tw
{
Background-image:url(‘images/social.png’);
Width:100px;
Height:100px;
Background-position:-100px 0;
}

Here in this example you can see we have used same image on two different classes with background position.
Note:
To create sheet for image sprite all the icons have same size and on equal distance.
 Q15. Animation in CSS?
Ans: Animation is used to give motion in a design to make attractive website to attract
users. Animation introduced in CSS3.
Example:
@keyframes colorchanger
{
from{background:#f00}
to{background:#000}
}

.box
{
width:300px;
height:300px;
background:#f00;
animation-name:colorchanger;
animation-duration:2s;
animation-iteration-count:infinite;
}

@keyframes is a reserved keyword, it is used to create animation, in this we can give from and to
or number of steps by using 0%,20%,100% etc.
To use animation we write the following:
animation-name : write the animation name which you have created.
animation-duration: write the duration of animation.
animation-iteration-count: write the number of counts how many times you want to run
animation.
 Q16. 2D Transform and 3D Transform?
Ans: 2d transform is used to give motion effect on a website on mouse over or to create
creative design like rotate an element, scale an element, or move an element x axis or y
axis. 2d Transform introduced in CSS3.

2D Transform has the following properties:

translate(x,y): translate is used to move an element x axis or y axis.

rotate(deg): rotate is used to rotate an element. we can give flip effect on element by using
rotate() or rotate()

scale(w,h): scale is used to zoom in or zoom out an element.

skew(deg): skew is used to move an element diagonally. It is rare used.

Example:
.box
{
transform: translate(0.-100px);
}
 Q17. Display Property in CSS?
Ans: CSS has the following display property:

none: It is used to hide an element. It is mostly used to create dropdown,

megamenu or many other hover effects.

block: It is used to show a hidden element which was hidden by none

property.

Inline-block: It works like float property with clearfix. In a float sometimes we

have to use clear property to clear float but in inline-block there is no
need to use clear.
 Q18. What is calc() in CSS?

Ans: calc() is used to calculate something. Sometimes we need a

calculation of width or height in a design then we use calc()
function of CSS.
 Q19. Difference between direct child
selector & descendant selector?
Ans: Descendant Selector: It is used to select all the child elements of the selected
element.
Example:
<div class=”main”>
<ul>
<li>home</li>
<li>about</li>
<li>course
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Graphic Design</li>
</ul>
</li>

<li>blog</li>
</ul>
</div>
.main ul li
{
float:left;
}

In this example It will select all the li of ul.

Direct Child Selector: It is used to select direct child element of the selected element.
Example:
<div class=”main”>
<ul>
<li>home</li>
<li>about</li>
<li>course
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Graphic Design</li>
</ul>
</li>

<li>blog</li>
</ul>
</div>

.main>ul>li
{
float:left;
}

In this example It will only select the first ul of li, it will not select the subchild li.
 Q20. What is Media Query, How to
Use it.
Ans: Media query is used to manage your design
on different size of device like mobile,ipad,
mobile horizontal view etc.

How to Use:
In media query there are some size which you
have to keep in mind , which are following:
Mobile Vertical Sizes:

1. 320px: This size is used for device which is

less than 5 inch mobile like iphone5, iphone
se.

2. 360px: This size is used for device which is

between 5 inch to 6 inch mobile, like galaxy
s5 etc.

3. 414px: This size is used for device which is

above 6 inch like iphone11,iphone13 etc.
Mobile Horizontal Sizes:

1.568px: This is the horizontal view of 320px

size.
2. 640px: This is the horizontal view of 360px
size.
3. 767px : This is the horizontal view of 414px
size.
Ipad Size:

1. 768px to 1024px

Ipad Pro Size:

820px to 1120px
Example:

@media(max-width:360px)
{
}

@media(max-width:767px)
{
}
 21. What is CSS Specificity?

Ans: If there are two or more CSS rules that

point to the same element, the selector with
the highest specificity value will "win", and its
style declaration will be applied to that HTML
element.
Example:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">Hello
World!</p>
</body>
</html>
 Q22. What is !important in CSS?
Ans: The !important rule in CSS is used to add more
importance to a property/value than normal.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#myid {
background-color: blue;
}

.myclass {
background-color: gray;
}

p{
background-color: red !important;
}
</style>
</head>
<body>

<p>This is some text in a paragraph.</p>

<p class="myclass">This is some text in a paragraph.</p>

<p id="myid">This is some text in a paragraph.</p>

</body>
</html>
 Q23. z-index in CSS?
Ans:
When elements are positioned, they can overlap
other elements.
The z-index property specifies the stack order of
an element (which element should be placed
in front of, or behind, the others).
An element can have a positive or negative stack
order: