CSS Interview Questions
This page consists of CSS interview questions and answers.
A CSS style consists of 3 parts.
Selector: This is the HTML tag or attributes like id and class that is used to select the element and apply the style.
id
class
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.
p
font-size
20px
Click here for more info on CSS Font styling.
In inline styling method we style elements by applying style directly to the element using the style attribute.
style
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>
In embedded styling method we create a style tag in the head element of the page and then set the style.
head
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>
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.
style.css
index.html
We are changing the color of all the paragraphs in the index.html file to red using the style.css file.
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>
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.
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
h1 { font-size: 32px; }
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
#awesome { padding: 10px; }
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
.super-awesome { margin: 10px; }
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
div.awesome { padding: 10px; }
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; }