CSS Interview Questions - Set 2
CSS Interview Questions
This page consists of CSS interview questions and answers.
Q1: Write the components of CSS style?
A CSS style consists of 3 parts.
- Selector
- Property
- Value
Selector: This is the HTML tag or attributes like id and class that is used to select the element and apply the style.
Property: This represents the HTML attribute of the selected element that will be styled using CSS.
Value: This represents the value of the property.
In the following example we are changing the font size of all the paragraphs to 20 pixels.
p {
font-size: 20px;
}
Where, p is the selector. The property we are targetting is font-size and the value is 20px.
Click here for more info on CSS Font styling.
Q2: What is inline styling method?
In inline styling method we style elements by applying style directly to the element using the style attribute.
In the following example we are setting the color of the targeted paragraph to red using inline style.
<p style="color: red;">Hello World</p>
Q3: What is embedded styling method?
In embedded styling method we create a style tag in the head element of the page and then set the style.
In the following example we are changing the color of all the paragraphs in the web page to red using embedded style.
Note! We have the style inside the head.
<!DOCTYPE html>
<html>
<head>
<title>Index Page</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>Para 1</p>
<p>Para 2</p>
<p>Para 3</p>
</body>
</html>
Q4: What is external styling method?
In external styling method we have our style rules in a separate CSS files and we include them in the HTML file to apply the styles.
In the following example we have two files style.css and index.html.
We are changing the color of all the paragraphs in the
Content of style.css file.
p {
color: red;
}
Content of index.html file.
Note! We are including the style.css file in the head.
<!DOCTYPE html>
<html>
<head>
<title>Index Page</title>
<link rel="stylesheet" href="path/to/style.css">
</head>
<body>
<p>Para 1</p>
<p>Para 2</p>
<p>Para 3</p>
</body>
</html>
Q5: What is universal selector?
The * symbol selects everything in the page and is called the universal selector.
In the following example we are setting the margin of all the elements in the page to 10 pixels.
* {
margin: 10px;
}
Click here for more details on selectors.
Q6: What is type/tag selector?
Type or tag selector matches the tag of the element to perform selection.
In the following example we are selecting all the level 1 heading using tag h1 and setting the font size to 32px.
h1 {
font-size: 32px;
}
Q7: What is id selector?
Id selector uses the value of the id attribute to select the element.
In the following example we are selecting an element by id having value awesome and setting the padding to 10px.
#awesome {
padding: 10px;
}
Q8: What is class selector?
Class selector uses the value of the class attribute to select the element.
In the following example we are selecting all the elements in the page having class super-awesome and setting their margin to 10px;
.super-awesome {
margin: 10px;
}
Q9: How to select a particular HTML element having some particular class?
For this we write the element tag followed by a dot . sign and then the class.
In the following example we are selecting all the div elements having class awesome and setting the padding to 10px.
div.awesome {
padding: 10px;
}
Q10: How to select a particular HTML element having some particular id?
For this we write the element tag followed by the hash # sign and then the id.
In the following example we are selecting a div by id awesome.
div#awesome {
padding: 10px;
}