HTML/CSS Memo: Difference between revisions
No edit summary |
No edit summary |
||
Line 48: | Line 48: | ||
|} | |} | ||
; | |||
: | {| class="wikitable" | ||
|+ 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 %]); | |||
|- | |||
| Example || Example | |||
|- | |||
| Example || Example | |||
|} |
Revision as of 15:30, 7 November 2024
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> |
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 %]); |
Example | Example |
Example | Example |