Live CSS trainer v2.0
2023-07-03
validate your css codes LIVE without auto-completion
✔️ write css code manually!
✔️ copy & paste may not work!
✔️ hover or click HTML element on each question to see what CSS selector to use!
✔️ on typing a correct answer, the editor will be refreshed, and just move to the next question then!
Q1: Change the text color to black
Live CSS trainer v2.0
</div>
</header>
Q2: Set the following flex
elements in opposite direction
current order: 1. Heading Left
→ 2. Heading Middle
→ 3. HEADING
desired order: 3. HEADING
→ 2. Heading Middle
→ 1. Heading Left
1. Heading Left
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis delectus odio aliquam nesciunt,
<div id="main"><div class="column-left">
<h1>Heading Left</h1>
<p>....</p>
</div>
</div>
2. Heading Middle
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis delectus odio aliquam nesciunt,
<div id="main"><div class="column-mid">
<h1>Heading Middle</h1>
<p>....</p>
</div>
</div>
3. Heading
<div id="main"><div class="column-right">
<h2>Heading</h2>
<ul class="nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
</div>
Q3: Apply visual effects to <img>
elements
There are many different ways for image/picture styling by accessing attributes such as class, id, etc.
This time, let's set some visual effect to the following <img>
s only using custom attribute.
Each <img>
has a custom attribute as a css selector one through seven without value.
For example, the first <img>
is the original image with the custom attribute one.
You can test to select the element using CSS selector e.g., #img img[one] {}
or img[one] {}
Custom attribute in HTML is not new stuff and can be used to css-select HTML element in addition to tags, id
, class
, :nth-child
, or :nth-of-type()
.
● You are required to apply a visual effect to each <img>
using the CSS property filter
from the second <img>
to the last one whose attribute name go two
, three
, and so forth respectively in order.
● To check what css value to apply, refer to the caption at bottom-right corner on each image. They are NOT valid syntax, but are enough to get what to do!
● On writing a valid css code, you will see the change applied. Just move to next one then!
<div id="img">
<img one src="path_to_image">
</div>
<div id="img">
<img two src="path_to_image">
</div>
<div id="img">
<img three src="path_to_image">
</div>
<div id="img">
<img four src="path_to_image">
</div>
<div id="img">
<img five src="path_to_image">
</div>
<div id="img">
<img six src="path_to_image">
</div>
<div id="img">
<img seven src="path_to_image">
</div>
<img one src="path_to_image">
</div>
<img two src="path_to_image">
</div>
<img three src="path_to_image">
</div>
<img four src="path_to_image">
</div>
<img five src="path_to_image">
</div>
<img six src="path_to_image">
</div>
<img seven src="path_to_image">
</div>