HTML/CSS Memo: Difference between revisions

From XPUB & Lens-Based wiki
Line 72: Line 72:
! Human Language !! CSS Property
! Human Language !! CSS Property
|-
|-
| Outer Margin || <nowiki>margin: ; ○ <br>
| Outer Margin || <code>margin: ; ○  
                  margin-top: ; <br>
margin-top: ;  
                  margin-left: ; <br>
margin-left: ;  
                  margin-right: ; <br>
margin-right: ;  
                  margin-bottom: ;</nowiki>
margin-bottom: ;</code>
|-
|-
| Inner Margin || <nowiki>padding: ; ○ <br>
| Inner Margin || <code>padding: ; ○  
                   padding-top: ; <br>
                   padding-top: ;  
                   padding-left: ; <br>
                   padding-left: ;  
                   padding-right: ; <br>
                   padding-right: ;  
                   padding-bottom: ;</nowiki>
                   padding-bottom: ;</code>
|-
|-
| Width || width: ; ○
| Width || width: ; ○

Revision as of 16:29, 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