HTML/CSS Memo
From XPUB & Lens-Based wiki
HTML
| Human Language |
HTML Tag
|
| html document |
<htm></html>
|
| metadata (title, link to css and script etc) |
<head></head>
|
| Content of the page |
<body></body>
|
| Section |
<section></section>
|
| Container (it can contain text, images, sound) |
<div></div>
|
| Headline |
<h1></h1> (h2, h3, h4, h5, h6)
|
| Paragraph |
<p></p>
|
| Linebreak |
<br> or </br>
|
| Word wrapper |
<span></span>
|
| Link |
<a href="[url here]">[link title here]</a>
|
| Image |
<img src="[file path here]" alt="[alternative text]">
|
| Audio |
<audio src="[file path here]" controls></audio>
|
| Video |
<video src="[file path here]" controls loop></video>
|
| Unordered List |
<ul></ul>
|
| Ordered List |
<ol></ol>
|
| List Item |
<li></li>
|
| Button |
<button></button>
|
| Table |
<table></table>
|
| Table Row |
<tr></tr>
|
| Table Cell |
<td></td>
|
| Column Header |
<th></th>
|
CSS
| Human Language |
CSS Property
|
| Outer Margin |
margin: ; ○
margin-top: ;
margin-left: ;
margin-right: ;
margin-bottom: ;
|
| Inner Margin |
padding: ; ○
padding-top: ;
padding-left: ;
padding-right: ;
padding-bottom: ;
|
| Width |
width: ; ○
|
| Height |
height: ; ○
|
| Text Color |
color: ; ○ ●
|
| Background Color |
background-color: ; ○ ●
|
| Font Size |
font-size: ; ○ ●
|
| Embed Font |
@font-face {
font-family: '[name your font]' ; ●
src: url('[font file path]'); ●
}
|
| The Font you want to use on a specific element |
font-family:' '; ●
|
| Font Weight |
font-weight: ; ○ ●
|
| Font Style (Italic, normal) |
font-style: ; ●
|
| Text Underline, Overline, Linethrough |
text-decoration: ; ●
|
| Text Shadow |
text-shadow: ; ○
|
| Text Justification |
text-align: ; ●
|
| Border |
border: [border thickness] [border style] [border color]; ● ○
|
| Round Edges |
border-radius: ; ○
|
| Outline (not taking up element space) |
outline: [border thickness] [border style] [border color]; ● ○
|
| Filter |
filter: [filter name]([value %]); ● ○
|
| How layers blend |
mix-blend-mode: ; ●
|
| Opacity |
opacity: ; ○
|
| Transform (rotate, skew, scale, translate) |
transform: [transform property]([value + unit]); ● ○
|
