Top 10+ CSS3 Interview Questions & Answers for Freshers with Example
Ans. CSS or Cascading Style Sheets is a way to style HTML.CSS is a standard style sheet language used for describing the layout and formatting of web pages. It is a technology developed by the World Wide Web Consortium or W3C. The latest version of the CSS is CSS3.
2) What are the features of CSS?
Ans. Features of CSS are-
1.) Flexibility
2.) CSS Save Lots of Time
3.) Pages Load Faster
4.) Easy Maintenance
5.) Codes Rendering
6.) Global Change
7.) Inline Style
8.) Multiple Device Compatibility
9.) Superior Styles to HTML.
3) Write the basic syntax
of CSS?
Ans. CSS syntax made up of three part-
selector{property:value}
1.) The selector is normally the HTML element or tag. Example h1,p
tag.
2.) The property is the attribute you wish to change. Example colour,
border.
3.) Values are assigned to CSS properties. Example red(color),2px
solid black(border).
4) Explain the CSS Selector and also Write the types of Selector?
Ans. A CSS selector is a template to test the elements on a web page. The CSS selector rules link with that selector will be utilized to the elements that suit the selector pattern.
Types of Selector:
a) Universal Selector
b) Element Selector
c) Class Selector
d) Group Selector
e) Id Selector.
5) Define a CSS Class
Selector?
Ans.If we
want to apply the same property of style in a different element so class
selector is the best option. In other words, we can say that the same style can
apply multiple Html elements. class selector starts with dot(.) sign.
Example:
<!DOCTYPE html>
<head>
<title> class selector Example</title>
<style>
.ab { color: orange; }
</style>
</head>
<body> <h1 class="ab">This is main heading add ,ab property</h1>
<p class="ab">This is Simple paragraph add, ab property</p>
</body>
</html>
Output
This
is main heading add ,ab property
This
is Simple paragraph add, ab property
6) What is the use of Id
Selectors in CSS?
Example:
<!DOCTYPE html>
<html>
<head>
<title>Example of CSS id selector</title>
<style>
#mob {
color:blue;
}
</style>
</head>
<body>
<p id="mob">This paragraph includes the mob
id effect</p>
</body>
</html>
Output:
This paragraph includes
the mob id effect.
7) Explain Box Model in
CSS?
Ans. The CSS box model is to work like a package that contains
different properties like margin, border, padding. The box model property helps
we can design the pages, can set pages more readable.CSS box model represented by rectangular boxes.
There is mainly 4 property of the CSS Box Model:
a) border
b) margin
c) padding
d) content
8) Difference between
Margin and Padding?
Ans.
|
Margin |
Padding |
|
1.) If we want to create a space outside the border and around an element so use the margin property. |
If we want to create the space inside the border and around an element so use the padding property. |
|
2.) In element, style can
set margin auto. |
In element, style can’t set margin
auto. |
9) What is the use of the
Z-index property in CSS?
Ans. If we want to overlap the webpage element from one element to another element so use the Z-index property. In Z-index work like as z-axis.
The value of the Z-index can be positive, negative, or 0. If the static
position is there, the effect of the z-index property will not be visible. If
the position absolute, relative, or fixed, the effect of the z-index property
will be seen. In Z- index property higher z-index value is displayed in front
of those with a lower z-index value.
Syntax:
z-index:
auto|number|initial|inherit;
10) What is the use of
Flexbox and write the feature of Flexbox?
Ans. Flexbox is a new property of CSS3. Using the property of flexbox we can create Responsive Web Design.If we want to create a flexible Website. so we can use flexbox. Flexbox provides equal space around the element.
The features of FlexBox is:
a) flex
b) flex-wrap
c) flex-direction
d) flex-flow
e) flex-shrink
f) justify-content
g) align-items
h) align-content
i) align-self.
11) Define Pseudo-classes
in CSS3?
Ans. In CSS if we want to change the style of element more dynamically like hover, active, and focus effect so use pseudo-classes. pseudo-class can combine with a CSS selector. pseudo-class begins with colon(:).
12) Define Animation in
CSS3 ?
Ans. The animation is the continuous process where change the style
of one type to another style, the changes style include colour, background,
height, width, shape.
The Animation code must start with the @keyframes rule.
Some important Animation property is:
a) animation
b) animation-duration
c) animation-delay
d) animation-name
e) animation-direction
f) animation-timing-function.
Special Interview Success Tips
0 Comments