HTML/CSS Memo
Intro
This is for the beginners
HTML Tags
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
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] }
Wiki Ring
Other Pages on this Wiki about HTML and CSS:
HTML
HTML + CSS
User:Kiara/Code