CSS Practice Test (with solutions) – Problems, exercises, questions

CSS

1 Comment

CSS Practice Problems

CSS is used to style and make your web pages look a lot better. Below, you'll find problems, exercises, and questions to test your knowledge of CSS.

Guides and tools you may need to solve these problems:

What's the difference between margin and padding in CSS?

Answer

Margin adds space outside the border of an element. Padding adds space inside the border.

Open HTML Editor

What's the correct way to specify padding for all 4 sides at once?

Open HTML Editor

What CSS selector should you use to style all <input type="button"> elements with class="btn"?

Note: Make sure you don't select other things with the class "btn".

Answer

input[type="button"].btn

Open HTML Editor

In the code shown below, which of the following are valid CSS selectors for styling ONLY the links in the ul with id="menu"? (choose all that apply)

<div id="header">
    ...

    <a id="logo" href="/">
        <img src="https://www.delidded.com/logo.png" alt="Delidded.com Logo" height="36">
    </a>

	<ul id="menu">
		<li><a href="/html/">HTML</a></li>
		<li><a href="/css/">CSS</a></li>
		<li><a href="/javascript/">JavaScript</a></li>
	</ul>
</div>
  • This selects all links inside a container with id="menu".
  • Although this does select the links in the menu, it also could select links in other lists.
  • Selects all the links in the header, which isn't what we want.
  • Selects all links inside an li, which is also inside a ul with id="menu", which is also inside a container with id="header".
  • Selects all links that have a container with id="menu" as their immediate parent. However, the links in the menu have li as their immediate parent, so this won't select them.

Open HTML Editor

Assume multiple elements have class="btn red". What CSS selector should we use to style only elements that have both of these classes?

Answer

.btn.red

Open HTML Editor

By default, each bullet in an unordered list is displayed vertically (one on top of the other). Write the CSS necessary to make them display horizontally (side by side) instead.

Answer

ul li {
    display: inline-block;
}

Open HTML Editor

More advanced CSS problems are on the next page

One Response

  • thulasi September 11, 20183:12 am

    suprrrrr

    Reply

Leave a Comment