Show Menu
Cheatography
  1. Home >
  2. Programming >

HTML-CSS-PHP Cheat Sheet (DRAFT) by [deleted]

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Symbol quick ref

Non-br­eaking space
 
Copyright symbol
©
" Left
&#­8220;
" Right
&#­8221;
' Left
&#­8216;
' Right
&#­8217;

Styled link order

a (a:link)
a:visited
a:hover
a:active

Rounded border corners

Property:
border­-ra­dius:
Example:
border­-ra­dius: 25px;

PHP include

<?php includ­e("e­xam­ple.ph­p");­?>
To call a file in a different directory, add "../­" to the filename to go up one directory.

Image as a form button

<input type="i­mag­e" src="im­g.p­ng" alt="alt text" width=­"­10p­x" height­="10­px">
Replaces: type="s­ubm­it"
  

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:
backgr­ound:
Example:
backgr­ound: #ffffff url("im­g.p­ng") 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

<ar­tic­le> - Defines an article (specifies indepe­ndent, self-c­ont­ained content)
<as­ide> - Defines content aside from the page content (like a sidebar). The aside content should be related to the surrou­nding content.
<au­dio> - Defines sound content
<em­bed> - Defines a container for an external (non-HTML) applic­ation
<fi­gur­e> - Specifies self-c­ont­ained content, like illust­rat­ions, diagrams, photos, code listings, etc.
<fi­gca­pti­on> - Defines a caption for a <fi­gur­e> element
<fo­ote­r> - Defines a footer for a document or section
<he­ade­r> - Specifies a header for a document or section
<ma­in> - Specifies the main content of a document
<na­v> - Defines navigation links
<se­cti­on> - Defines a section in a document
<ti­me> - Defines a date/time
<vi­deo> - 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/sub­scr­iption forms.

Misc

Set image dimensions with inline styles.