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

div { display: flex;
      justify-content: center;
      align-items: center; }

Centering Divs / Blocks

block

div.inner { margin: auto; }

block

div.outer { display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center; }

div.inner { margin: auto; }

Flexbox

div.outer { display: flex; }
div.inner { flex-grow: 1; }

div.inner { flex: «grow» «shrink» «basis»; }
div.inner { flex: 1 1 auto; }

div.outer { display: flex; 
            flex-direction: column; }
div.inner { flex-grow: 1; }

div.outer { display: flex; 
            flex-wrap: wrap; }
div.inner { flex-grow: 1; 
            min-width: 80px; }

Wrapping flex creates sizing problems if you have more than two layers. Ex. fit-contents or min-content.

Position

block

div.outer { position: relative; }
div.inner { position: absolute;
            bottom: 5px;
            right: 5px; }

inline

div.red { position: relative; 
          left: 10px; }

Float

pic 1

pic 2

Text wrapping around a photo in the news.

div.inner { float: right; }

Hiding Things

inline

div.red { visibility: hidden; }

inline

div.red { display: none; }

Padding, Border, Margin

margin: «top» «right» «bottom» «left»;
margin: «top-and-bottom» «right-and-left»;
margin: «all-sides»;

padding: «top» «right» «bottom» «left»;

border: «top» «right» «bottom» «left» «style» [«color»];

div { box-sizing: content-box; /* default */
      width: 2em;
      height: 2em;
      border: 0.5em solid red;
      margin: 0.5em; }

div { box-sizing: border-box;
      width: 2em;
      height: 2em;
      border: 0.5em solid red;
      margin: 0.5em; }

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: "Lucida Sans", sans; }

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; }

Form Elements

<input type="text" placeholder="placeholder"/>

<input type="checkbox" checked="checked"/>
$("input[type=checkbox]").attr("checked");

<input type="password" placeholder="password"/>

<input type="file"/>

<input type="range" min="1" max="100" value="50"/>

<input type="range" min="0" max="100" value="50" 
       list="tickmarks"/>
<datalist id="tickmarks">
    <option value="0"></option>
    <option value="10"></option> ...
</datalist>

<select>
    <option value="a">option a</option>
    <option value="b" selected>option b</option>
    <option value="c">option c</option>
</select>

<textarea>This is a freeform text area</textarea>

<button type="button">Button</button>

Forms

<form> can be used on its own to submit POST, GET, and mailto: emails.

<form action="/do_thing.html" method="post">
    <input type="hidden" name="key" value="value">
    <input type="submit" value="Submit">
</form>

Now form elements are more often used as javascript input, or submitted via AJAX.

$("button").on("click", ...)
$("input[type=text]").on("input", ...)
$("textarea").val();

CSS Animations

Not all properties can be animated, but many can.

fading transition

Transitions can change a property gradually.

a       { transition-duration: 0.8s;
          transition-property: opacity; }
a:hover { opacity: 10%; }

rainbow animation

Animations change properties in a defined and continuous way.

animation: «duration» «name» «iteration-count» «direction»;

a { animation: glow 5s ease-in-out infinite alternate; }
@keyframes glow {
    0%   { color: red; } ...
    100% { color: violet; }
}

wiggly animated transform

Transforms and animations can be combined.

a:hover {
  animation: shift-a-bit 0.5s ease-in-out infinite alternate;
}
@keyframes shift-a-bit {
  0%   { transform: rotate(0); }
  100% { transform: rotate(5deg); }
}

Columnar Layout

div { column-count: 3; }

Whereas recognition of the inherent dignity and of

Whereas disregard and contempt for human rights

Whereas it is essential, if man is not to be compelled

Whereas it is essential to promote the development of friendly relations between nations,

div.outer { column-count: 3; }
div.inner { break-inside: avoid-column; }

div.outer { columns: auto;
            column-gap: 1em;
            column-width: 6em; }
div.inner { break-inside: avoid-column; }

Tables and CSS

State	Abbreviation	Bird
Alabama	AL	Yellowhammer
Alaska	AK	Willow ptarmigan
Arizona	AZ	Cactus wren
Arkansas	AR	Northern mockingbird

table              { border-collapse: collapse; }
td, th             { border: 1px solid grey;
                     padding: 5px 10px; }
/* Browser typically bolds & centers th already */
th, td:first-child { font-weight: bold; 
                     text-align: center;
                     background-color: #eaecf0; }
tr:nth-child(odd)  { background-color: lightyellow; }

Readability: One Thin Column

div.main-column {
    font-size: 18px;
    line-height: 24px; /* 1.6x font height */
    max-width: 75em;
}

Grid layout

div.wrapper { display: grid; 
              grid-template-columns: repeat(3, 1fr);
              gap: 10px;
              grid-auto-rows: minmax(10px, auto); }
div.red     { grid-column: 1 / 3;
              grid-row: 1; }
div.blue    { grid-column: 2 / 4;
              grid-row: 1 / 3; }
div.yellow  { grid-column: 1 / 3;
              grid-row: 2; }

I don't really know grid layout yet.

Overflow and Scrolling

Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world, Whereas disregard and contempt for human rights have resulted in barbarous acts which have outraged the conscience of mankind, and the advent of a world in which human beings shall enjoy freedom of speech and belief and freedom from fear and want has been proclaimed as the highest aspiration of the common people,

div { overflow: hidden; }

div { overflow: scroll; }

CSS Selector Reference

*           All elements
#id         Element with the given id
div         All <div>s
.foo        Elements with class "foo"
.foo.bar    Elements with class "foo" and "bar"
div.foo     <div>s with class "foo"
[attr]      Elements with attribute "attr"
[attr=val]  Elements with attribute "attr" set to "val"

a b         b, a descendent of a
a < b       b, a child of a
a, b        a or b
a + b       b immediately after a
a ~ b       b immediately before a
:not(...)   inverts selector
:has(...)   cannot use yet

:hover. :visited
:first-child, :last-child, :only-child
:nth-child(n+3)   3rd, 4th, 5th child
:nth-child(even)  2nd, 4th, 6th child

::before, ::after

Adding CSS and JS Dynamically

<style>, <link>, or <script> tags can be inserted at runtime by javascript.

var script = document.createElement('script');
script.src = 'https://.../jquery.min.js';
document.appendChild(script);

Or, it's often easier to style elements directly. Jquery is especially good for this:

$("button").on("click", () => {
    $("div").toggleClass("animated");
    $("span.error").css("color", "red");
}

Additional Resources

caniuse.com - see if ??? works on browsers
jsfiddle.net - try HTML, CSS, JS immediately

Hover over a section to animate (or click to disable animation)

Including CSS

Including JS

Mobile browsing

Centering Text / Inline-Blocks

Centering Divs / Blocks

Flexbox

Position

Float

Hiding Things

Padding, Border, Margin

Formatting Text

Form Elements

Forms

CSS Animations

Columnar Layout

Tables and CSS

Readability: One Thin Column

Grid layout

Overflow and Scrolling

CSS Selector Reference

Adding CSS and JS Dynamically

Additional Resources