Hello guys,
We'll build a balance sheet using pseudo selectors. We'll learn how to change the style of an element when you hover over it with your mouse, and trigger other events on your webpage.
Step 1
<!DOCTYPE html>
<html lang="en"></html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
Step 2
<body> <main> <section> </body>
Step 3
<section> <h1><span></h1> </section>
Step 4
<span class="flex"> <span>AcmeWidgetCorp</span> <span>Balance Sheet</span> </span>
Step 5
<div id="years" aria-hidden="true"></div>
Step 6
<div id="years" aria-hidden="true"> <span class="year">2019</span> <span class="year">2020</span> <span class="year">2021</span> </div>
Step 7
<div class="table-wrap">
<table></table>
<table></table>
<table></table>
</div>
Step 8
<table><caption>Assets</caption>
</table>
Step 9
<table>
<caption>Assets</caption>
<thead>
<tbody>
</tbody>
</thead>
</table>
Step 10
<thead>
<td>
<th></th>
<th></th>
<th></th>
</td>
</thead>
Step 11
<thead>
<td></td>
<th><span class="sr-only year">2019</th>
<th><span class="sr-only year">2020</th>
<th class="current"><span class="sr-only year">2021</th>
</tr> </thead>
Step 12
<tbody>
<tr class="data"></tr>
<tr class="data"></tr>
<tr class="data"></tr>
<tr class="total"></tr>
</tbody>
Step 13
<tr class="data"><th>Cash <span class="description">This is the cash we currently have on hand.</th>
<td>$25</td>
<td>$30</td>
<td class="current">$28</td>
</tr>
Step 14
<tr class="data">
<th>Checking <span class="description">Our primary transactional account.</th>
<td>$54</td>
<td>$56</td>
<td class="current">$53</td>
</tr>
Step 15
<tr class="data">
<th>Savings <span class="description">Funds set aside for emergencies.</span></th>
<td>$500</td>
<td>$650</td>
<td class="current">$728</td>
</tr>
Step 16
<tr class="total">
<th>Total <span class="sr-only">Assets</span></th>
<td>$579</td>
<td>$736</td>
<td class="current">$809</td>
</tr>
Step 17
<table>
<caption>Liabilities</caption>
<thead>
<tbody>
</thead>
</tbody>
</table>
Step 18
<table>
<caption>Liabilities</caption>
<thead>
<tr>
<td>
<th></th>
<th></th>
<th></th>
</tr>
</td>
</thead>
<tbody>
</tbody>
</table>
Step 19
<table>
<caption>Liabilities</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only">2019</th>
<th><span class="sr-only">2020</th>
<th><span class="sr-only">2021</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Step 20
<table>
<caption>Liabilities</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only">2019</span></th>
<th><span class="sr-only">2020</span></th>
<th><span class="sr-only">2021</span></th>
</tr>
</thead>
<tbody>
<tr class="data"></tr>
<tr class="data"></tr>
<tr class="data"></tr>
<tr class="total"></tr>
</tbody>
</table>
Step 21
<tr class="data"><th>Loans <span class="description">The outstanding balance on our startup loan.</th>
<td>$500</td>
<td>$250</td>
<td class="current">$0</td>
</tr>
<tr class="data">
</tr>
<tr class="data">
</tr>
<tr class="total">
</tr>
Step 22
<tr class="data">
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
<td>$500</td>
<td>$250</td>
<td class="current">$0</td>
</tr>
<tr class="data"><th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</th>
<td>$200</td>
<td>$300</td>
<td class="current">$400</td>
</tr>
<tr class="data">
</tr>
<tr class="total">
</tr>
Step 23
<tr class="data">
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
<td>$500</td>
<td>$250</td>
<td class="current">$0</td>
</tr>
<tr class="data">
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
<td>$150</td>
<td>$200</td>
<td class="current">$400</td>
</tr>
<tr class="data"><th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
<td>$50</td>
<td>$50</td>
<td class="current">$75</td>
</tr>
<tr class="total">
</tr>
Step 24
<tr class="data">
<th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
<td>$500</td>
<td>$250</td>
<td class="current">$0</td>
</tr>
<tr class="data">
<th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
<td>$200</td>
<td>$300</td>
<td class="current">$400</td>
</tr>
<tr class="data">
<th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
<td>$50</td>
<td>$50</td>
<td class="current">$75</td>
</tr>
<tr class="total"><th>Total <span class="sr-only">Liabilities</th>
<td>$750</td>
<td>$600</td>
<td class="current">$475</td>
</tr>
Step 25
<table>
<header></header>
<body></body>
<caption>Net Worth</caption>
<thead>
<tbody></tbody>
</thead>
</table>
Step 26
<table>
<caption>Net Worth</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only">2019</th>
<th><span class="sr-only">2020</th>
<th><span class="sr-only">2021</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Step 27
<table>
<caption>Net Worth</caption>
<thead>
<tr>
<td></td>
<th><span class="sr-only">2019</span></th>
<th><span class="sr-only">2020</span></th>
<th><span class="sr-only">2021</span></th>
</tr>
</thead>
<tbody>
<tr class="total">
<th>Total <span class="sr-only">Net Worth</th>
<td>$-171</td>
<td>$136</td>
<td class="current">$334</td>
</tbody>
</table>
Step 28
html {
box-sizing:border-box;
}
Step 29
body{
font-family:sans-serif;
color:#0a0a23;
}
Step 30
span[class~="sr-only"] {
border:0;
}
Step 31
span[class~="sr-only"] {
border: 0;
clip:rect(1px, 1px, 1px, 1px);
clip-path:inset(50%);
-webkit-clip-path:inset(50%);
}
Step 32
span[class~="sr-only"] {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
-webkit-clip-path: inset(50%);
width:1px;
height:1px;
}
Step 33
span[class~="sr-only"] {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
-webkit-clip-path: inset(50%);
height: 1px;
width: 1px;
overflow:hidden;
white-space:nowrap;
}
Step 34
span[class~="sr-only"] {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
-webkit-clip-path: inset(50%);
height: 1px;
width: 1px;
overflow:hidden;
white-space:nowrap;
}
Step 35
h1{
max-width:37.25rem;
margin:0 auto;
padding:1.5rem 1.25rem;
}
Step 36
h1 .flex {
display:flex;
flex-direction:column-reverse;
gap:1rem;
}
Step 37
h1 .flex span:first-of-type {
font-size:0.7em;
}
Step 38
h1 .flex span:last-of-type {
span:flex container;
font-size:1.2em;
}
Step 39
section{
max-width:40rem;
margin:0 auto;
border:2px solid #d0d0d5;
}
Step 40
#years {
display:flex;
justify-content:flex-end;
position:sticky;
top:0;
}
Step 41
#years {
display: flex;
justify-content: flex-end;
position: sticky;
top: 0;
background:#0a0a23;
color:#fff;
}
Step 42
#years {
display: flex;
justify-content: flex-end;
position: sticky;
top: 0;
background: #0a0a23;
color: #fff;
z-index:999;
margin:0 -2px;
padding:0.5rem calc(1.25rem + 2px) 0.5rem 0;
}
Step 43
#years span[class] {
width:4.5rem;
font-weight:bold;
text-align:right;
}
Step 44
.table-wrap {
padding:0 0.75rem 1.5rem 0.75rem;
}
Step 45
span:not(.sr-only) {
font-weight:normal;
}
Step 46
span[class~="sr-only"] {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important ;
clip-path: inset(50%) !important;
-webkit-clip-path: inset(50%) !important;
height: 1px !important;
width: 1px !important;
position: absolute !important;
overflow: hidden !important;
white-space: nowrap !important;
padding: 0 !important;
margin: -1px !important;
}
Step 47
span {
font-weight: normal;
}
Step 48
table{
border-collapse:collapse;
border:0;
}
Step 49
table {
border-collapse: collapse;
border: 0;
width:100%;
margin:3rem;
position:relative;
}
Step 50
table caption {
color:#356eaf;
font-size:1.3em;
font-weight:normal;
}
Step 51
table caption {
color: #356eaf;
font-size: 1.3em;
font-weight: normal;
top:-2.25rem;
position:absolute;
left:0.5rem;
}
Step 52
tbody td {
width:100vw;
min-width:4rem;
max-width:4rem;
}
Step 53
tbody th {
width:calc(100% - 12rem);
}
Step 54
tr[class="total"] {
border-bottom:4px double #0a0a23;
font-weight:bold;
}
Step 55
tr[class="total"] th {
text-align:left;
padding:0.5rem 0 0.25rem 0.5rem;
}
Step 56
tr.total td {
text-align:right;
padding:0 0.25rem;
}
Step 57
tr.total td:nth-of-type(3) {
padding-right:0.5rem;
}
Step 58
tr.total:hover {
background:#99c9ff;
}
Step 59
td.current {
font-style:italic;
}
Step 60
tr.data {
background:linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
}
Step 61
tr.data th {
text-align:left;
padding:0.3rem;
padding-left:0.5rem;
}
Step 62
tr.data th .description {
class:description;
display:block;
font-style:italic;
font-weight:normal;
padding:1rem 0 0.75rem;
margin-right:-13.5rem;
}
Step 63
{
font-weight: normal;
}
Step 64
tr.data td {
vertical-align:top;
text-align:right;
padding:0.3rem 0.25rem 0;
}
Step 65
tr.data td:last-of-type {
padding-right:0.5rem;
}