Cheat Sheet

  • HTML

<!– Comment –>   &nbsp;

HTML5: <nav> / <main> / <article> / <aside> / <figure> / <footer> / time

<header>: banner, logo, navigation, page title etc

<section>: grouping of related content

<article>: blog, news, story, comment, review

<img src=”…” alt=”…” width=”*” height=”*” class=”img-responsive” align=”top / bottom / middle / left / right”>

<a href=”…” target=”_blank”></a>

a: visited / hover / focus {..}

Unordered list <ul> – <li>

Ordered list <ol> – <li> type=”1 / A / a / I / i”

Description lists <dl> – <dt> – <dd>

Bookmark: <a id=”top”></a> … <a href=”#top”>Back to top</a>

Text formatting: <b><strong><i><em><u><small><sub><sup><ins><del><mark><kbd><pre><q><blockquote><abbr><address><cite><samp><code><var>

  • Table

<table border=”1 / 0″> { align: left / center / right; width: *%; border-collapse: collapse; }

<caption></caption>

<tr> – 1st row  {text-align: left / right / center / justify; vertical-align=top / baseline / middle / bottom}

<th></th> – 1st column

<th></th> – 2nd column

<tr>

<tr> – 2nd row

<td colspan=”*” ></td> – occupies 2 columns

<td rowspan =”*” ></td> – occupies 2 rows

<tr>

</table>

  • Form

<form action=”url” method=”POST / GET”>

Label: <label for=”sameWithInputID”></label>

Text Form: <input type= “text / email / url / tel / password / search / color id=”…” name=”…” placeholder=”clue” required>

Number Form: <input id=”…” type= “number / range” min=”…” max=”…” step=”…” value=”…” required>

Date Form: <input type=”date / month / week / time / datetime” id=”…”>

Radio Button Form: <input type=”radio” id=”…” name=”…” value=”…”>

Checkbox Form: <input type=”checkbox” id=”…” name=”…” value=”…”>

Textarea Form: <textarea name=”…” id=”…” rows=”*” cols=”*”></textarea>

Datalist: <input type=”text” list=”sameWithInputID”> <datalist id=”ID”> <option value=”…”> … </datalist>

Dropdown List Form: <select name=”…”><option value=”…”></option></select>

Dropdown Property: selectedIndex / length / multiple / selectedOptions

Dropdown Method: add(option, before) / remove(index)

Submit Button: <input type=”submit” value=”…”>

CSS: label, input {display: block;} / label {margin-bottom: *px;} / input {width: *px; margin-bottom: *px;} / input[type=submit] {width: *px; font-size: *px;} / input[type=text] {border: …; font-size: *px; padding: *px;} / input[type=checkbox], label[for=InputID] {display: inline;}

Data Attribute: data-

HTML5 Form Attribute: autofocus / placeholder / required / min / max / step / value / autocomplete / pattern / novalidate / list / multiple / formnovalidate / form / formaction / formenctype / formmethod / formtarget

Date Format: mm/dd/yy / yy-mm-dd / d m, y / mm d, yy / DD, d mm, yy

  • Form

Form Method: submit() / reset()

Form Event: submit / reset

Form Control Property: value / type / name / defaultValue / form / disabled / checked / defaultChecked / selected

Form Control Method: focus() / blur() / select() / click()

Form Control Event: blur / focus / click / change / input / keydown / keyup / keypress

  • CSS 
  • CSS Selector

Descendant Selector: ancestorSelector descendantTag { property: value; }

Sibling Selector: + (adjacent sibling) / ~ (general sibling)

Child Selector: parentSelector > childSelector / :first-child / :last-child / :only-child / :nth-child(num) /  :nth-child(even) / :nth-child(odd) / :nth-child(an) / :nth-child(an+b)

Child Type Selector: :first-of-type / :last-of-type / :nth-of-type

Starts with: [attr^=’…’]   Ends with: [attr$=’…’]             Contain: [attr*=’…’]

Pseudo-Classes for Links: a:link / a:visited / a:hover / a:active

Attribute Selectors: selector[attributeName] / selector[attributeName=”value”] / selector[attributeName^=”beginsWithValue”] / selector[attributeName$=”endsWithValue”] / selector[attributeName*=”commonWordinValue”]

Pseudo-Classes for Location: :before / :after

Pseudo-Classes for Form: :focus

Paragraph Parts Selector: :first-letter / :first-line

Other Pseudo-Classes: ::selection (::-moz-selection) / :target / :not()

  • Size

target size ÷ context size = result

Font: html { font-size: 16px; } + body { font-size: 62.5%; /*1em=10px*/ }

Layout: <div class=”site”> + .site { width: *%; margin: *px auto; }

  • Image

Content Image: inline                 Layout Image: background image

Responsive Image: img { max-width: 100%; display: block; height: auto; }

Landscape Image: img parent {overflow: hidden; height: *px; width: *px;} + img {height: auto; width: *px;}

Portrait Image: img parent {overflow: hidden; height: *px; width: *px;} + img {height: *px; width: auto;}

Image Replacement: add text on html + css {background: url(‘…’); text-indent: -9999px;}

Sprites for Hover: img {background: url(‘…’); height: *px; width: *px; } + img:hover, img:focus {background-position: 0 bottom-*px;}

Sprite Image on Right: img {background: url(‘…’); height: *px; width: *px; } + img.right {background-position: left-*px 0;} + img.right:hover, img.right:focus {background-position: left-*px bottom-*px;}

  • Text

line-height: 1.5 / *px / *%;

letter-spacing: *px;

white-space: nowrap / pre / normal / pre-line / pre-wrap;

word-spacing: *px / normal;

text-decoration: none / overline / line-through / underline / blink;

text-decoration-style: solid / double / dotted / dashed / wavy;

text-decoration-color: …;

text-shadow: (x)*px (y)*px (blur)*px #; (2px 2px 4px color;)

Img (for text) { vertical-align: text-top / text-bottom / sub / super / *px / *%; }

text-transform: uppercase / lowercase / capitalize / none;

text-indent: *px / *em / *%;

text-align: left / right / center / justify;

text-align-last: left /right/ center / justify / start / end;

text-justify: auto / inter-word / inter-ideograph / inter-cluster / distribute / kashida / trim;

word-wrap: normal / break-word;

word-break: break-all / keep-all;

  • Font

font: style variant weight size/line-height font-family / caption / icon / menu / message-box / small-caption / status-bar;

font-style: normal / italic / oblique;

font-variant: normal / small-caps;

font-weight: normal / bold / bolder / lighter / 100-900;

font-size: medium / xx-small / x-small / small / large / x-large / xx-large / smaller / larger / *px / *% / *em;

line-height: * / *px / *%;

font-family: sans-serif / serif / cursive / monospace / times / courier / arial / etc; http://bit.ly/1P9G1eC

@font-face {font-family: …; src: url(…); font-stretch: condensed / ultra-condensed / extra-condensed / semi-condensed / expanded / semi-expanded / extra-expanded / ultra-expanded; font-style: normal, italic / oblique; font-weight: normal, bold / 100 – 900;}

@font-face url order: .eot, eot?#iefix, .woff2, .woff, .ttf, .svg

  • Background

background: color image position / size repeat origin clip attachment;

background-image: url(…); do not use for logo, map and seo-related elements

background-position: left top / left center / left bottom / right top / right center / right bottom / center top / center center / center bottom / x% y% / *px *px;

background-size: auto / *px / *% / cover / contain;

background-repeat: repeat / repeat-x / repeat-y / no-repeat;

background-origin: padding-box / border-box / content-box;

background-clip: border-box / padding-box / content-box;

background-attachment: scroll / fixed / local;

background-blend-mode: normal / multiply / screen / overlay / darken / lighten / color-dodge / saturation / color / luminosity;

linear-gradient(direction, colorStart, colorStop); direction: to top(0deg) / to bottom(180deg) / to right(270deg) / to left(90deg)

radial-gradient(ellipsis/circle, position, size, colorStart, colorStop); position: at (same with background-position) size: closest-side / closest-corner / farthest-side / farthest-corner / *px / *%

  • Layout

position: absolute / relative / fixed

left / right / top / bottom: auto / *px / *%;

set the parent element a relative position then apply an absolute position to that element

float: left / right / none; requires setting the width; doesn’t work with positioning;

use img { max-width: 100%; } and remove height & width for images inside columns

clear: none / left / right / both; > element:after { clear: both; }

display: block / inline / inline-block / list-item / none;

Block Elements: div, p, ul, ol, li, h1-h6, form, header, footer, section

Inline Elements: span, a, em, img, strong

display: block; float: left; width: 100%;

height: auto / *px / *em / *%;

min-height: *px / *em / *%;

max-height: *px / *%;

–         Do not set height unless for setting height of image div and banner

width: auto / *px / *em / *%;

min-width: * px / *em / *%; ≥      max-width: *px / *%; ≤

overflow: visible / hidden / scroll / auto;

overflow-x / y: visible / hidden / scroll / auto;

visibility: hidden / visible / collapse;

z-index: auto / *;

vertical-align: baseline / *px / *% / sub / super / top / text-top / middle / bottom / text-bottom;

  • Center

Page Content: max-width: *px; margin: 0 auto;

position: relative / fixed; margin-left: auto; margin-right: auto; left: 0; right: 0;

<parent tag> text-align: center; + <main tag> display: inline-block;

Center img in a row: class=”text-center” position: relative; margin-left: auto; margin-right: auto;

Fixed-width & Block-level element: margin-left: auto; margin-right: auto;

Children of Block-level element: text-align: center;

Inline & Inline-block Elements: text-align: center;

Image: position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;

  • Transitions

transition: property duration timing-function delay;

transition-property: property / all;

transition-duration: *s;

transition-timing-function: ease / linear / ease-in / ease-out / ease-in-out / cubic-bezier(n, n, n, n);

transition-delay: *s;

  • Animation

@keyframes animationname {*% {css-styles;} *% {css-styles;} }

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-duration: *s;

animation-delay: *s; (optional)

animation-timing-function: linear / ease / ease-in / ease-out / cubic-bezier(n,n,n,n);

animation-iteration-count: * / infinite;

animation-direction: reverse / alternate / alternate-reverse / normal;

animation-fill-mode: forwards / backwards / both

animation-play-state: paused / running;

  • Media Queries

@media screen and (max-width: *px) ≤

@media screen and (min-width: *px) ≥

Breakpoints: 480px, 481-768, over 768

  • Navigation Bar

ul {list-style-type: none; margin-left: 0; padding-left: 0; width: *px; font-family: …; font-size: *;}

li {text-align: …;}             ul a {text-decoration: none;}

a:hover {…}

Vertical Navigation Bar: ul a {display: block; width: *px; height: *px; padding: *px;}

Horizontal Navigation Bar 1: ul {text-align: center;} ul li {display: inline;} ul a {display: inline-block;}

Horizontal Navigation Bar 2: ul li {float: left;} ul a {display: block;}

Horizontal Navigation Bar 3: ul {float: none; display: block; width: %;} li { width: %; text-align: center;}

 

Advertisements

About bernadetteengleman

Hello, I am Bernadette from New York City. I moved here from Chicago in 2013. I am originally from the Philippines. I started studying web programming in 2015. I love it because I like making fun websites and web apps. The projects that I built so far are posted below. I like to cook and I love to travel. I also like to volunteer and I am a team leader with the non-profit organization, NYCares.
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s