Task 46-51. Unable to figure out the correct way to code for the highly specific styling requirements. Please guide for the same. Thanks
<!-- file: index.html -->
/* file: styles.css */
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0
Build a Book Inventory App - Build a Book Inventory App
index.html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Inventory</title>
<link rel="stylesheet" href="styles.css">
<main>
<h1>Book Inventory</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
<tr class="read">
<td>The Hobbit</td>
<td>J.R.R. Tolkien</td>
<td>Fantasy</td>
<td> <span class="status">Read</span>
</td>
<td>
<span class="rate three">
<span></span><span></span><span></span>
</span>
</td>
</tr>
<tr class="to-read">
<td>1984</td>
<td>George Orwell</td>
<td>Dystopian</td>
<td>
<span class="status">To Read</span>
</td>
<td>
<span class="rate">
<span></span><span></span><span></span>
</span>
</td>
</tr>
<tr class="in-progress">
<td>Dune</td>
<td>Frank Herbert</td>
<td>Sci-Fi</td>
<td>
<span class="status">In Progress</span>
</td>
<td>
<span class="rate">
<span></span><span></span><span></span>
</span>
</td>
</tr>
<tr class="read">
<td>A Brief History of Time</td>
<td>Stephen Hawking</td>
<td>Non-Fiction</td>
<td>
<span class="status">Read</span>
</td>
<td> <span class="rate one">
<span></span><span></span><span></span>
</span>
</td>
</tr>
<tr class="read">
<td>Pride and Prejudice</td>
<td>Jane Austen</td>
<td>Classic</td>
<td>
<span class="status">Read</span>
</td>
<td> <span class="rate two">
<span></span><span></span><span></span>
</span>
</td>
</tr>
</tbody>
</table>
</main>
styles.css:
:root {
--bg-color: #f4f7f6;
--card-bg: #ffffff;
--text-color: #1a1a1a;
--header-bg: #e0e6e3;
--border-color: #cdd6d3;
--rate-dot-bg: #d1d1d1;
--rate-dot-border: #aaaaaa;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
display: grid;
place-items: center;
min-height: 90vh;
padding: 2rem;
box-sizing: border-box;
}
main {
width: 100%;
max-width: 900px;
margin: 0 auto;
background-color: var(--card-bg);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
h1 {
text-align: center;
color: var(--text-color);
padding: 1.5rem 0;
margin: 0;
border-bottom: 2px solid var(--border-color);
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 1rem 1.25rem;
text-align: left;
border-bottom: 1px solid var(--border-color);
vertical-align: middle;
}
thead th {
background-color: var(--header-bg);
font-weight: 700;
letter-spacing: 0.5px;
}
tbody tr:last-child td {
border-bottom: none;
}
span {
display: inline-block;
}
tr\[class="read"\] {
background-image: linear-gradient(to right, #e8f5e9 0%, #ffffff 100%);
}
tr\[class="to-read"\] {
background-image: linear-gradient(to right, #fff3e0 0%, #ffffff 100%);
}
tr\[class="in-progress"\] {
background-image: linear-gradient(to right, #e3f2fd 0%, #ffffff 100%);
}
span\[class="status"\],
span\[class^="rate"\] {
height: auto;
width: auto;
padding: 4px 0;
vertical-align: middle;
}
span\[class="status"\] {
padding: 6px 14px;
border-radius: 16px;
font-weight: 600;
font-size: 0.875rem;
color: white;
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
tr\[class="to-read"\] span\[class="status"\] {
border: 1px solid #e68a00;
background-image: linear-gradient(135deg, #ffa726, #f57c00); /\* Test 28 \*/
}
tr\[class="read"\] span\[class="status"\] {
border: 1px solid #2e7d32;
background-image: linear-gradient(135deg, #66bb6a, #388e3c); /\* Test 31 \*/
}
tr\[class="in-progress"\] span\[class="status"\] {
border: 1px solid #1976d2;
background-image: linear-gradient(135deg, #42a5f5, #1e88e5); /\* Test 34 \*/
}
span\[class^="rate"\] > span {
border: 2px solid var(--rate-dot-border);
border-radius: 50%;
margin: 0 2px;
height: 14px;
width: 14px;
background-color: var(--rate-dot-bg);
vertical-align: middle;
}
span\[class\*="one"\] span:first-child {
background-image: linear-gradient(135deg, #fdd835, #f57f17); /\* Test 47 \*/
border-color: #f57f17;
}
span\[class\*="two"\] span:nth-child(-n+2) {
background-image: linear-gradient(135deg, #fdd835, #f57f17); /\* Test 49 \*/
border-color: #f57f17;
}
span\[class\*="three"\] span {
background-image: linear-gradient(135deg, #fdd835, #f57f17); /\* Test 51 \*/
border-color: #f57f17;
}
sorry.. but unable to understand !
Please review this reference to help you with your CSS: