CSS Interview Questions - Set 3 - CSS Interview Questions - dyclassroom

This page consists of CSS interview questions and answers.

Q1: What is an attribute selector?

When we select elements based on the attribute then we are using attribute selector.

In the following example we are selecting all the input fields of type submit and setting their padding to 10px and font size to 20px.

input[type="submit"] {
  padding: 10px;
  font-size: 20px;
}

Q2: How to select all the paragraphs having attribute dir?

For this we have to write p[dir].

<p dir="ltr">Hello World</p>

Q3: How to select all the paragraphs having attribute dir set to exact value 'ltr'?

For this we will write p[dir="ltr"].

<p dir="ltr">Hello World</p>
<p dir="ltr">Happy</p>
<p dir="ltr">Super</p>

Q4: How to select all the paragraphs having attribute class that contains the word 'action' and set the color to red?

For this we will write the following.

p[class~="action"] {
  color: red;
}

Q5: How to select all the paragraphs having attribute class containing exact word 'super' or starts with 'super-' and set the font size to 16px?

For this we will write the following.

p[class|="super"] {
  font-size: 16px;
}

Q6: What are browser safe colors?

These are a list of 216 colors varying from hex value #000000 to #FFFFFF.

Browser safe colors ensures that all computers running 256 color palette would correctly display the color.

Q7: Briefly explain CSS style overriding

We can style a web page using the following methods.

Inline method
Embedded method
External method

The inline method takes the highest priority then comes the embedded method and finally the external method.

So, if an external style sheet sets the color of all the paragraphs to red. Then all web pages including the given style sheet will have their paragraphs colored red.

Following style rule is inside an external .css file which is included inside any HTML file that we want to style.

p {
  color: red;
}

But if we have an embedded style in the html page and if we set the color of the paragraphs to green. Then all the paragraphs in the page will be colored green overriding the red color set in the external file.

<!DOCTYPE html>
<html>
<head>
  <title>Index Page</title>
  <style>
    p {
      color: green;
    }
  </style>
</head>
<body>
  <p>Para 1</p>
  <p>Para 2</p>
  <p>Para 3</p>
</body>
</html>

And if we have a paragraph in the page that is set to blue color using inline style then it will override the embedded style.

<p style="color: blue;">Hello World</p>

Q8: Write some of the ways we can specify color in CSS

We can specify color in the following formats.

Keyword: This is the name of the color like red, green, blue etc.

p {
  color: red;
}

Hex form: In this we use # followed by the hex code of the color like #FF0000 for red.

p {
  color: #FF0000;
}

RGB form: In this we set the value of the three components RED, GREEN and BLUE using integer value from 0 to 255. So, for red we will have 255,0,0.

p {
  color: rgb(255, 0, 0);
}

Click here to learn more about CSS Colors.

You can also use the Color Mixer app to mix colors and see results.

Q9: How to select all the paragraphs having class `super` inside a div having id `awesome` and set their color to red?

For this we have to select all the paragraphs using tag and class. To select the div by id we can use the id value.

In the following example we are selecting all the paragraphs having class super inside a div having id awesome.

#awesome p.super {
  color: red;
}

Q10: How to select all the direct paragraph descendent having class `red` inside a div having id `happy` and set their color to red?

To select the paragraphs having class red we have to use the tag and the class value.

We can select the div having id happy by simply using the id value.

To select the direct descendent we have to use the > sign.

So, we have to write the following to select the desired paragraphs.

#happy > p.red {
  color: red;
}

CSS Interview Questions - Set 3