CSS Interview Questions And Answers

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.

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 the CSS file.
Platform Independence- CSS is platform-independent.

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.

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

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

What is the Descendant Selector?

A 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

What is the class selector?

The class selector is used to applying a 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

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

What is the ID selector?

An ID selector is the one when we apply the style, based on the 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

Can you make an id selector particular to an element type?

Yes, we can make an 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

What is a child selector?

A child selector is used to select the child element of the 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

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

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

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.

What is the purpose of the % 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

What is the purpose of the cm measurement unit?

To define the value in the centimeter, the 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

What are browser-safe colors?

There are listed all browser-safe colors-

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

To set the background color of an element, the 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

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

To set the background image of an element, the 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

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

To repeat an image in the 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

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

To set the position of the background image, the 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

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

To fix in the background, the 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

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

To change the font, the 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

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

To make a font italic or oblique, the 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

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

To create a small-caps effect, the 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

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

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

To control the flow and formatting of the text, the 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

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

Which property specifies the bottom padding of an element?

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-bottom: 2cm;
}
p.padding2 {
padding-bottom: 50%;
}
</style>
</head>
<body>
<p>c# corner</p>
<p class="padding">community of dvelopers</p>
<p class="padding2">c-sharpcorner.com</p>
</body>
</html>

Output

Which property specifies the top padding of an element?

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
padding-top: 2cm;
}
</style>
</head>
<body>
<p>c# corner</p>
<p class="padding">community of dvelopers</p>
<p class="padding2">c-sharpcorner.com</p>
</body>
</html>

You can enhance your knowledge more, by reading the following articles.

What is CSS?

What are the advantages of using CSS?

What are the components of a CSS Style?

What is a type selector?

What is a universal selector?

What is the Descendant Selector?

What is the class selector?

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

What is the ID selector?

Can you make an id selector particular to an element type?

What is a child selector?

What is an attribute selector?

How to select all paragraph elements with a lang attribute?

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

What is the purpose of the % measurement unit?

What is the purpose of the cm measurement unit?

What are browser-safe colors?

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

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

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

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

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

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

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

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

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

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

Which property specifies the left margin of an element?

Which property specifies the bottom padding of an element?

Which property specifies the top padding of an element?

More Interview Questions