Sep 01, 2023 Tutorials with Codes
Here is a table of HTML codes and their CSS equivalent, for every day use.
These codes are good for both posts and widgets.
Text Formatting
| Format | HTML Code | CSS Code |
|---|---|---|
| bold text | <b> <b> OR <strong> </strong> | font-weight: bold; |
| italic text | <i> <i> OR <em>< /em> | font-style: italic; |
| underlined text | <u> </u> | text-decoration: underline; |
| <del> </del> | text-decoration: line-through; | |
| linked text | <a href=”#”> </a> to open link in a new tab <a href=”#” target=”_blank”> </a> |
|
| <center> </center> | text-align: center; |
Word spacing
| Single Space | *nbsp; |
| Double Space | *emsp; |
The * represents & for formatting reasons I cannot use the & or it will not show
Line Break
| Next Line Break | <br> |
| Double Line Break | <br style=”clear:both;” /> |
Please Note: clear: both; denies the specific element to float right or left.
Images & Positioning
The generic code for images is the following:
<img src="#" alt="" />
This will link to your image as it is, static. However, you can also play with that generic HTML code to make images float left or right and adapt with the text wrapping around it.
| Left position | Right position |
|---|---|
| <img style=”float: left; margin-right: 5px;” src=”#” alt=”” /> | <img style=”float: right; margin-left: 5px;” src=”#” alt=”” /> |
