HTML/CSS Memo: Difference between revisions

Revision as of 16:34, 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 72: / Line 72: @@
 ! Human Language !! CSS Property
 |-
-| Outer Margin || <code>margin: ; ○
+| Outer Margin || <source lang=CSS>margin: ; ○
 margin-top: ;
 margin-left: ;
 margin-right: ;
-margin-bottom: ;</code>
+margin-bottom: ;</source>
 |-
-| Inner Margin || <code>padding: ; ○
+| Inner Margin || <source lang=CSS>padding: ; ○
 padding-top: ;
 padding-left: ;
 padding-right: ;
-padding-bottom: ;</code>
+padding-bottom: ;</source>
 |-
-| Width || width: ; ○
+| Width || <source lang=CSS>width: ; ○</source>
 |-
-| Height || height: ; ○
+| Height || <source lang=CSS>height: ; ○</source>
 |-
-| Text Color || color: ; ○ ●
+| Text Color || <source lang=CSS>color: ; ○ ●</source>
 |-
-| Background Color || background-color: ; ○ ●
+| Background Color || <source lang=CSS>background-color: ; ○ ●</source>
 |-
-| Font Size || font-size: ; ○ ●
+| Font Size || <source lang=CSS>font-size: ; ○ ●</source>
 |-
-| Embed Font || <code>@font-face {
+| Embed Font || <source lang=CSS>@font-face {
 font-family: '[name your font]' ; ●
 src: url('[font file path]'); ●
-}</code>
+}</source>
 |-
-| The Font you want to use on a specific element || font-family:' '; ●
+| The Font you want to use on a specific element || <source lang=CSS>font-family:' '; ●</source>
 |-
-| Font Weight || font-weight: ; ○ ●
+| Font Weight || <source lang=CSS>font-weight: ; ○ ●</source>
 |-
-| Font Style (Italic, normal) || font-style: ; ●
+| Font Style (Italic, normal) || <source lang=CSS>font-style: ; ●</source>
 |-
-| Text Underline, Overline, Linethrough || text-decoration: ; ●
+| Text Underline, Overline, Linethrough || <source lang=CSS>text-decoration: ; ●</source>
 |-
-| Text Shadow || text-shadow: ; ○
+| Text Shadow || <source lang=CSS>text-shadow: ; ○</source>
 |-
-| Text Justification || text-align: ; ●
+| Text Justification || <source lang=CSS>text-align: ; ●</source>
 |-
-| Border || border: [border thickness] [border style] [border color]; ● ○
+| Border || <source lang=CSS>border: [border thickness] [border style] [border color]; ● ○</source>
 |-
-| Round Edges || border-radius: ; ○
+| Round Edges || <source lang=CSS>border-radius: ; ○</source>
 |-
-| Outline (not taking up element space) || outline: [border thickness] [border style] [border color]; ● ○
+| Outline (not taking up element space) || <source lang=CSS>outline: [border thickness] [border style] [border color]; ● ○</source>
 |-
-| Filter || filter: [filter name]([value %]); ● ○
+| Filter || <source lang=CSS>filter: [filter name]([value %]); ● ○</source>
 |-
-| How layers blend || mix-blend-mode: ; ●
+| How layers blend || <source lang=CSS>mix-blend-mode: ; ●</source>
 |-
-| Opacity || opacity: ; ○
+| Opacity || <source lang=CSS>opacity: ; ○</source>
 |-
-| Transform (rotate, skew, scale, translate) || transform: [transform property]([value + unit]); ● ○
+| Transform (rotate, skew, scale, translate) || <source lang=CSS>transform: [transform property]([value + unit]); ● ○</source>
 |-
 |}
@@ Line 129: / Line 129: @@
 ===Pseudo Classes in CSS===
 ; Hover describes whats happening when your cursor is moving over an element on the page
-: element:hover { [CSS properties here] }
+: <source lang=CSS>element:hover { [CSS properties here] }</source>
 ; A Link that has been clicked
-: element:active { [CSS properties here] }
+: <source lang=CSS>element:active { [CSS properties here] }</source>
 ; Target an element only if it has [selector] inside
-: element:has([selector]) { [CSS properties here] }
+: <source lang=CSS>element:has([selector]) { [CSS properties here] }</source>
 ; Target an element only if it does not have [selector] inside
-: element:not([selector]) { [CSS properties here] }
+: <source lang=CSS>element:not([selector]) { [CSS properties here] }</source>
 ==Wiki Ring==