HTML/CSS Cheatsheet
This is still a WIP. Still trying to figure out the formatting and technical aspects of implementation.
Resources
References:
- MDN Web Docs - HTML
(developer.mozilla.org) - MDN Web Docs - CSS
(developer.mozilla.org)
Text
{
font-size: 2.5em;
font-weight: bold;
font-weight: normal;
font-weight: lighter;
font-weight: 400; /* numeric values are in [1,1000] */
text-decoration: underline;
font-family: "Courier New", monospace; /* left is highest priority */
}Tables
<table class="a">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">cell1</td>
<td>cell2</td>
</tr>
<tr>
<td>cell3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">foot</td>
</tr>
</tfoot>
</table>| head1 | head2 |
|---|---|
| cell1 | cell2 |
| cell3 | |
| foot | |
table.a th {
background-color: #bbb;
}
table.a td,
table.a th {
border: 1px solid;
padding: 0.3em 0.6em 0.3em 0.6em;
}Flexbox
Base Example
<div class="a">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>/* This is all purely styling unrelated to flexbox. */
/* I'm just establishing a baseline with this. */
div.a {
border: 0.2em solid red;
background: white;
width: 20em;
}
div.a > * {
border: 0.2em solid blue;
background: #faa;
width: 2em;
height: 2em;
text-align: center;
}1
2
3
4
5
div.a {
display: flex;
gap: 0.5em;
}Some Alternative Attributes
{
column-gap: 0.5em;
row-gap: 0.5em;
}Inputs
<button type="button">
Click Me
</button><textarea rows="3" readonly>
This is a read-only textbox.
</textarea>Iframes
<iframe src="https://www.simshadows.com/" />