HTML/CSS Memo: Difference between revisions

Revision as of 17:30, 7 November 2024

Intro

This is for the beginners

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

@@ Line 79: / Line 79: @@
 |-
 | Inner Margin || <code>padding: ; ○
-                  padding-top: ;
+padding-top: ;
-                  padding-left: ;
+padding-left: ;
-                  padding-right: ;
+padding-right: ;
-                  padding-bottom: ;</code>
+padding-bottom: ;</code>
 |-
 | Width || width: ; ○
@@ Line 94: / Line 94: @@
 | Font Size || font-size: ; ○ ●
 |-
-| Embed Font || @font-face {
+| Embed Font || <code>@font-face {
-                font-family: '[name your font]' ; ●
+ font-family: '[name your font]' ; ●
-                src: url('[font file path]'); ●
+ src: url('[font file path]'); ●
-                }
+}</code>
 |-
 | The Font you want to use on a specific element || font-family:' '; ●