My personal cheatsheet HTML & CSS

Learn HTML

Tables

Code Name Description Example
<table> Table It has content that is used to represent a two-dimensional table made of rows and columns. 
<table>
<!-- rows and columns -->
</table>
<tr> Table Row It is used to add rows to a table before adding table data and table headings. 
<table>
<tr>
...
</tr>
</table>
<td> Table Data It can be nested inside a table row element, <tr> , to add a cell of data to a table. 
<table>
<tr>
<td>cell one data</td>
<td>cell two data</td>
</tr>
</table>
<thead> Table Head It defines the headings of table columns encapsulated in table rows. 
<table>
<thead>
    <tr>
        <th>heading 1</th>
        <th>heading 2</th>
    </tr>
</thead>
</table>
<tbody> Table Body It is a semantic element that will contain all table data other than table heading and table footer content. 
<table>
<tbody>
    <tr>
        <td>row 1</td>
        <td>row 2</td>
    </tr>
</tbody>
</table>
<th> Table Heading It is used to add titles to rows and columns of a table and must be enclosed in a table row element, <tr>. 
<table>
    <tr>
        <th>column one</th>
        <th>column two</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

Learn CSS

Visual Rules

Code Name Description Example
!important !important rule

It is used on declarations to override any other declarations for a property and ignore selector specificity.

It will ensure that a specific declaration always applies to the matched elements. However, generally it is good to avoid using !important as bad practice. 

#column-one {
width: 200px !important;
}
opacity Opacity It can be used to control the transparency of an element. The value of this property ranges from 0 (transparent) to 1 (opaque). 
opacity: 0.5;
font-weight Font Weight The font-weight CSS property can be used to set the weight (boldness) of text. The provided value can be a keyword such as bold or normal. 
font-weight: bold;
url() Resource URLs It is used to wrap resource URLs. These can be applied to several properties such as the background-image. 
background-image:
url("../resources/image.png");