From 57a0dd5f1c3bed39f4fbb2b814822d8a37fe5e16 Mon Sep 17 00:00:00 2001 From: Zachary Vance Date: Wed, 19 Jul 2023 13:13:01 -0400 Subject: [PATCH] Add WIP --- html-css-cheatsheet.html | 366 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 366 insertions(+) create mode 100644 html-css-cheatsheet.html diff --git a/html-css-cheatsheet.html b/html-css-cheatsheet.html new file mode 100644 index 0000000..7494141 --- /dev/null +++ b/html-css-cheatsheet.html @@ -0,0 +1,366 @@ + + + HTML and CSS cheatsheet + + + + +

(Work in progress) Za3k presents: An HTML and CSS cheatsheet!

+
+ +
+

Including CSS

+ + 
<link rel="stylesheet href="styles.css">
+<style>p { color: "red"; }</style>
+<p style="font-size: 200%;">Hello world</p>
+
+
+ +
+

Including JS

+ + 
<head>
+  <script src="jquery.min.js"></script>
+</head>
+<p>Hello World</p>
+<script>$("p").css("color", "yellow");</script>
+ + JS is executed immediately. If your JS is included at the top of a file, delay it until document load:
    +
  • window.addEventListener("load",(ev)=>{...}); +
  • window.onload((ev) => {...}); +
  • or $(document).ready((ev) => {...}); (jquery) +
+ +
+

Mobile browsing

+ 
<head>
+    <meta content="width=device-width, initial-scale=1"
+          name="viewport"/>
+</head>
+
+ +
+

Centering Text / Inline-Blocks

+
+
Centered Text
+
+ + 
div { text-align: center; }
+ +
+
Centered Text
+
+
+
+
inline
+
inline
+
+
+ 
div { display: flex;
+      justify-content: center;
+      align-items: center; }
+
+ +
+

Centering Divs / Blocks

+ +
+
+
block
+
+
+ + 
div.inner { margin: auto; }
+ +
+
+
block
+
block
+
+
+ + 
div.outer { display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center; }
+ + 
div.inner { margin: auto; }
+
+ + + +
+

TODO: Flexbox

+
  • Flexbox (and "don't use the wrapping version") +
    • + +
    +

    Position

    + +
    +
    +
    block
    +
    +
    + + 
    div.outer { position: relative; }
+div.inner { position: absolute;
+            bottom: 5px;
+            right: 5px; }
    + +
    +
    inline
    +
    inline
    +
    inline
    +
    +
    +
    inline
    +
    inline
    +
    inline
    +
    + 
    div.red { position: relative; 
+          left: 10px; }
    +
    +
    +

    TODO: Float

    +
    + +
    +

    Hiding Things

    +
    +
    inline
    +
    inline
    +
    inline
    +
    +
    +
    inline
    + +
    inline
    +
    + 
    div.red { visibility: hidden; }
    +
    +
    inline
    + +
    inline
    +
    + 
    div.red { display: none; }
    +
    + +
    +

    TODO: Padding, Border, Margin

    +
  • Known: The box model (padding, border, margin?) +
  • box-sizing +
    • + +
    +

    Formatting Text

    + Only tags can be selected by CSS selectors, not text.
    + +
    Text Size
    + 
    span { font-size: 18pt; }
+span { font-size: 24px; }
+span { font-size: larger; }
    + +
    Text Font
    + 
    span { font-family: sans; } TODO: name of font
    + +
    Bold Text
    + 
    span { font-weight: bold; }
    + +
    Italic Text
    + 
    span { font-style: italic; }
    + +
    Text Color
    + 
    span { color: blue; }
    + +
    Underline
    + 
    span { text-decoration: underline; }
    + +
    Small Caps
    + 
    span { font-variant: small-caps; }
    + +
    + +
    +

    TODO: Forms and Form Elements

    +
    + +
    +

    TODO: CSS Animations

    +
    + +
    +

    TODO: Columnar Layout

    +
    + +
    +

    TODO: Tables and CSS

    +
    + +
    +

    TODO: Thin Columns and Readability

    +
    + +
    +

    TODO: CSS Selector Reference

    +
    + +
    +

    TODO: Grid layout

    +
    + +
    +

    TODO: Overflow and Scrolling

    +
    + +
    +

    TODO: Adding JS+CSS Dynamically

    +
    + + -- 2.47.3