Top CSS Interview Questions And Answers

Ajay Malik
7y
29.5k
0
14

Article

Question 1: What is CSS?

CSS stands for Cascading Style Sheets. CSS is a designing language, used for creating HTML pages that are more attractive and presentable.

Question 2: What are the advantages of using CSS?

There are following advantages of CSS-

CSS saves time- We write a CSS once and use it again and again in our HTML projects.
Pages load faster- If we use CSS, it speeds up the Web page loading time, because we don't write HTML attributes for every HTML tag.
Easy maintenance- If we want to change the design of our Web page, it can be done by only changing it in CSS file.
Platform Independence- CSS is platform independent.

Question 3: What are the components of a CSS Style?

Components of CSS are listed below-

Selector- HTML tag at which style is to be applied.
Property- It is a style applied to the element.
Value- It assigns the value to the property.

Question 4: What is a type selector?

Type selector is a selection HTML tag for applying the style.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: lightblue;
text-align: left;
}
p {
font-family: verdana;
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>community for developer</p>
</body>
</html>

Output

Question 5: What is a universal selector?

A universal selector is used to select all HTML elements for styling.

Example

<!DOCTYPE html>
<html>
<head>
<style>
*{
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p>community for developer</p>
</body>
</html>

Output

Question 6: What is Descendant Selector?

Descendant selector is used, when we apply a style in an element, which lies between a particular element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1{
color:red;
}
h1 em{
color: blue;
}
</style>
</head>
<body>
<h1>c# <em>Corner</em></h1>
<p>community for developer</p>
</body>
</html>

Output

Question 7: What is class selector?

Class selector is used, when applying style to the element, using a class attribute.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.heading{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h1 class="heading">c#corner</h1>
<p class="heading">community for developer</p>
</body>
</html>

Output

Question 8: Can you make a class selector particular to an element type?

Yes, we can make a class selector for the particular element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1.heading{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h1 class="heading">c#corner</h1>
<p class="heading">community for developer</p>
</body>
</html>

Output

Question 9: What is ID selector?

ID selector is the one, when we apply style, based on ID attribute.

Example

<!DOCTYPE html>
<html>
<head>
<style>
#heading{
color:red;
text-align:center;
}
#para{
color:blue;}
</style>
</head>
<body>
<h1 id="heading">c#corner</h1>
<p id="para">community for developer</p>
</body>
</html>

Output

Question 10: Can you make a id selector particular to an element type?

Yes, we can make a ID selector for a particular element type.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1#heading{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h1 id="heading">c#corner</h1>
<p id="heading">community for developer</p>
</body>
</html>

Output

Question 11: What is a child selector?

A child selector is used to select the child element of HTML tag.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body>p{
color:red;
font-size:30px;
}
</style>
</head>
<body>
<h1 id="heading">c#corner</h1>
<p id="heading">community for developer</p>
<p>www.c-sharpcorner.com</p>
</body>
</html>

Output

Question 12: What is an attribute selector?

We can apply the style to a particular attribute.

Example

<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"]
{
color:red;
background-color:powderblue;
font-size:20px;
}
</style>
</head>
<body>
<h1 id="heading">c#corner</h1>
<p id="heading">community for developer</p>
enter your name<input type="text"/>
</body>
</html>

Output

Question 13: How to select all paragraph elements with a lang attribute?

To select all paragraph elements with a lang attribute, p[lang] is used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p:lang(it) {
background: yellow;
}
</style>
</head>
<body>
<h1 id="heading">c#corner</h1>
<p id="heading">community for developer</p>
<p lang=it>c-sharpcorner.com</p>
</body>
</html>

Output

Question 14: What are the various ways of using CSS in an HTML page?

There are four ways to use CSS in HTML page-

Embedded CSS − <style> Element: You can write your CSS rules into HTML document, using the <style> element.
Inline CSS − style Attribute: You can use style attribute of any HTML element to define the style rules.
External CSS − <link> Element: <link> element can be used to include an external stylesheet file in your HTML document.
Imported CSS − @import Rule: @import is used to import an external stylesheet in a manner, similar to the <link> element.

Question 15: What is the purpose of % measurement unit?

% measurement unit is used to define the value in a percentage.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div{
width:20%;
background-color:lightblue;}
p:lang(it) {
background: yellow;
}
</style>
</head>
<body>
<div>
<h1 id="heading">c#corner</h1>
</div>
<p id="heading">community for developer</p>
<p lang=it>c-sharpcorner.com</p>
</body>
</html>

Output

Question 16: What is the purpose of cm measurement unit?

To define the value in centimeter, cm measurement unit is used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div{
width:20%;
background-color:lightblue;
border-style: dotted;
border-width: 0.1cm;}
p:lang(it) {
background: yellow;
}
</style>
</head>
<body>
<div>
<h1 id="heading">c#corner</h1>
</div>
<p id="heading">community for developer</p>
<p lang=it>c-sharpcorner.com</p>
</body>
</html>

Output

Question 17: What are browser safe colors?

There are listed all browser safe colors-

Question 18: Which property is used to set the background color of an element?

To set the background color of an element, background-color property is used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div{
width:20%;
background-color:lightblue;
}
</style>
</head>
<body>
<div>
<h1 id="heading">c#corner</h1>
</div>
<p id="heading">community for developer</p>
</body>
</html>

Output

Question 19: Which property is used to set the background image of an element?

To set the background image of an element, background-image property is used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<br>
<h1>c# corner</h1>
</body>
</html>

Output

Question 20: Which property is used to control the repetition of an image in the background?

To repeat an image in background, background-repeat is used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<br>
<h1>c# corner</h1>
</body>
</html>

Output

Question 21: Which property is used to control the position of an image in the background?

To set the position of the background image, background-position property is used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<br>
<h1>c# corner</h1>
</body>
</html>

Output

Question 22: Which property is used to control the scrolling of an image in the background?

To fix in the background, background-attachment property is used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/olympics_logo.png");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
<br>
<h1>c# corner</h1>
</body>
</html>

Output

Question 23: Which property is used to change the face of a font?

To change the font, font-family property is used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>c# corner</h1>
<p class="serif">community for developers</p>
<p class="sansserif">c-sharpcorner.com</p>
</body>
</html>

Output

Question 24: Which property is used to make a font italic or oblique?

To make a font italic or oblique, font-style property is used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.italic {
font-style: italic;
color:red;
}
.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h1 class="italic">c# corner</h1>
<p class="oblique">c-sharpcorner.com</p>
</body>
</html>

Output

Question 25: Which property is used to create a small-caps effect?

To create a small-caps effect, font-variant property is used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.italic {
font-style: italic;
color:red;
}
.oblique {
font-style: oblique;
font-variant: small-caps;
}
</style>
</head>
<body>
<h1 class="italic">c# corner</h1>
<p class="oblique">c-sharpcorner.com</p>
</body>
</html>

Output

Question 26: Which property is used to increase or decrease how bold or light a font appears?

To increase or decrease how bold or light a font appears, font-weight is used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.italic {
font-style: italic;
color:red;
font-weight: bold;
}
.oblique {
font-style: oblique;
font-weight: 900;
}
</style>
</head>
<body>
<h1 class="italic">c# corner</h1>
<p class="oblique">c-sharpcorner.com</p>
</body>
</html>

Output

Question 27: Which property is used to control the flow and formatting of text?

To control the flow and formatting of the text, white-space property is used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<p>
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
c# corner
</p>
</body>
</html>

Output

Question 28: Which property specifies the left margin of an element?

To specify the left margin of an element, margin-left is used.

Example

<!DOCTYPE html>
<html>
<head>
<style>
.lm{
margin-left: 5cm;
}
</style>
</head>
<body>
<p>c# corner</p>
<p class="lm">www.c-sharpcorner.com</p>
</body>
</html>

Output

Question 29: Which property specifies the bottom padding of an element?

To specify the bottom padding of an element, padding-bottom property is used.

Example