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] }
Wiki Ring
Other Pages on this Wiki about HTML and CSS:
HTML
HTML + CSS
User:Kiara/Code