HTML Tags
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>
|
HTML Head
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title of this page</title>
</head>
<body>
</body>
</html>
CSS Properties
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]); ● ○
|
Pseudo Classes in CSS
- Hover describes whats happening when your cursor is moving over an element on the page
- element:hover { [CSS properties here] }
- A Link that has been clicked
- element:active { [CSS properties here] }
- Target an element only if it has [selector] inside
- element:has([selector]) { [CSS properties here] }
- Target an element only if it does not have [selector] inside
- element:not([selector]) { [CSS properties here] }
