This is a draft cheat sheet. It is a work in progress and is not finished yet.
Symbol quick ref
Non-breaking space |
  |
Copyright symbol |
© |
" Left |
“ |
" Right |
” |
' Left |
‘ |
' Right |
’ |
Styled link order
a (a:link) |
a:visited |
a:hover |
a:active |
Rounded border corners
Property: |
border-radius: |
Example: |
border-radius: 25px; |
PHP include
<?php include("example.php");?> |
To call a file in a different directory, add "../" to the filename to go up one directory.
Image as a form button
<input type="image" src="img.png" alt="alt text" width="10px" height="10px"> |
Replaces: type="submit"
|
|
Margin and Padding shorthand
margin: |
top right bottom left; |
padding: |
top+bottom right+left; |
| |
top right+left bottom; |
| |
ALL; |
margin = space outside border
padding = space inside border
Background shorthand
Property: |
background: |
Example: |
background: #ffffff url("img.png") no-repeat right top; |
Value order: |
color |
| |
image |
| |
repeat |
| |
attachment |
| |
position |
A value can be missing as long as the rest remain in this order.
Border shorthand
Property: |
border: |
Example: |
border: 5px solid red; |
Example (one side): |
border-left: 5px solid red; |
Value order: |
width |
| |
style (required) |
| |
color |
Semantic Elements
<article> - Defines an article (specifies independent, self-contained content) |
<aside> - Defines content aside from the page content (like a sidebar). The aside content should be related to the surrounding content. |
<audio> - Defines sound content |
<embed> - Defines a container for an external (non-HTML) application |
<figure> - Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
<figcaption> - Defines a caption for a <figure> element |
<footer> - Defines a footer for a document or section |
<header> - Specifies a header for a document or section |
<main> - Specifies the main content of a document |
<nav> - Defines navigation links |
<section> - Defines a section in a document |
<time> - Defines a date/time |
<video> - Defines a video or movie |
Form methods
get |
Default setting. |
| |
Input visible in address bar. |
| |
Use for search boxes. |
| |
post |
Input NOT visible in address bar. |
| |
Use for sign up/subscription forms. |
Misc
Set image dimensions with inline styles. |
|
