CSS
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
- Inline CSS
- Internal CSS
- External CSS
Inline CSS: Inline CSS can style one element at a time. It is written in HTML tag as an attribute.
Example:
<p style=”color:red”>hello inline css</p>
Internal CSS: Internal CSS can style multiple-element at a time but on a single page. It is written under the head tag by using style tag, to use internal CSS we need a CSS selector to select the HTML element.
Example:
<style>
P
{
color: red;
}
</style>
External CSS: External CSS can style multiple elements on multiple pages. It is written in a 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 the CSS file to an HTML page.
Example:
<link rel=”stylesheet” href=”css/style.css”>
Q2. Which CSS Type should be used to design the Website?
Ans: External CSS should be used to design a website because by using external CSS we can style multiple elements on 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 a specific element. It is denoted by the (.) dot symbol.
- Element Selector: It selects an element by its 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 the (,) 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 the reset.css file?
Ans: reset.css is used to remove or reset the default property of the browser, the browser takes 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 increases 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 of 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 the CSS Box Model. It is used with all selector (*) in a website.
Q6. How to use the offline font in CSS?
Ans: To use offline font there are a 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: font-family name; // 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 elements horizontally and vertically also. Flex is applied to the parent element.
In a 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 Element in CSS?
Ans: Pseudo-elements are preceded by (::) symbol, which is used to add content before or after the element. It has the following properties:
- ::before: It is used to add content before the selected element.
- ::after: It is used to add content after the selected element.
- ::selection: It is used to change the color of selection.
- ::first-letter: It is used to select the first letter of the 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 the 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 the default property of an element.
- Fixed: It is used to fix the element at a 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 the 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 a background image to the element.
- background-attachment: It is used to fix the background image on the background.
- background-position: It is used to give the position to the background image, you can move the background image x-axis or y-axis.
- background-size: It is used to manage the size of the background image.
- background-repeat: By default background image is repeated if we use a small size image on the background, you can no-repat the value of the background image.
Q13. CSS Variable?
Ans: CSS variable is a very useful feature of CSS3, it is best suitable when you want to reuse your design. For example, you have created the first website that has a blue and red theme, the second time you want to create a website and you want to change only the 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 the color scheme, font family, font size of the 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 the same image on two different classes with background-position.
Note:
To create a sheet for image sprite all the icons have the same size and are on equal distance.
Q15. Animation in CSS?
Ans: Animation is used to give motion in a design to make an 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 a 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 a creative design like rotating an element, scale an element, or moving 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 rarely 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 that 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 the 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.
I hope these questions will help the fresher designers to crack the interview.
Feel Free To Contact Us
Interview Categories
Trending Courses
