HTML/CSS Cheat Sheet ==================== Notes: 1. Options listed below tags may be placed within the < > of the tag to change the tags default behavior. You may include as may of them as you like. Set their values by placing an equals sign after the option then place double quotes around the value like the following example: Stuff it surrounds 2. Virtually all tags should have an ending tag. This consists of a tag similar to the opening tag but with a / in front of the tag word like the following example: Tags should "match" so when placing tags within other tags, be sure to close them before closing the tag above them like this:

The tag was closed after it's work was done and before the

tag was ended. This is very important! 3. HTML is entirely case-insensitive. Captialization only matters when linking to another document via the src option within the , , , and <a> tags. 4. Whitespace does not matter. You can place everything all on one line or put ten returns between each tag and it will not matter (except when using the <pre> tag). 5. Name 6. Class/Id Document Tags ------------- <html> *Defines the start and end of HTML document. <head> *Defines the start and end of Head portion of document. <title> *Surrounds the text to appear in the browser's title area. <meta> - No end tag *Used by a few older search engines. Options: name - "Description", "Author", "Generator", "Keywords", etc. content (where you place the relevant information) <link> - No end tag *Allows one to link in other documents. Options: rel - "Shortcut Icon", "Stylesheet" href (where you place the link information) type (can specify the MIME type of the inclusion) <body> *Defines the start and end of the Body portion of document. Options: bgcolor - Any hex color (#000000 -> #FFFFFF) or plain name (red, blue, green, black, etc.) text - Any hex color (#000000 -> #FFFFFF) or plain name (red, blue, green, black, etc.) link - Any hex color (#000000 -> #FFFFFF) or plain name (red, blue, green, black, etc.) vlink - Any hex color (#000000 -> #FFFFFF) or plain name (red, blue, green, black, etc.) alink - Any hex color (#000000 -> #FFFFFF) or plain name (red, blue, green, black, etc.) background - Specify the path of an image <frameset> *Allows the creation of frames in a document. Used in place of the body tag in the parent document. Options: cols - Specify number of columns rows - Specify number of rows <frame> *Used within the frameset tags to define the areas used for various documents. Options: src - Specify the location of source document border - Number of pixels wide a border should be noresize - Prevent users from resizing the frame (no value to set a.k.a. no =" ") scrolling - "yes", "no", "auto" color - Any hex color (#000000 -> #FFFFFF) or plain name (red, blue, green, black, etc.) <iframe> *NOT used within a frameset tag, this creates a floating frame on the document. Options: src - Specify the location of source document border - Number of pixels wide a border should be width - Number of pixels wide the frame should be height - Number of pixels high the frame should be scrolling - "yes", "no", "auto" Text Tags --------- <left> <center> <right> *Allows you to justify the enclosed part of the document. <p> *Creates a paragraph to place the text into. Non indenting without CSS! <blockquote> *Similar to the paragraph, blockquoted text will display in a narrower area than a paragraph tag's text. <br> *Creates a "return"/"enter" in the document. The clear option causes text in that area to wrap to the specified side of images in the same area. Options: clear - "Left', "Right", "Center", "Float" <b> *Bold the enclosed text. <i> *Italicize the enclosed text. <u> *Underline the enclosed text. <h1> <h2> <h3> <h4> <h5> <h6> <h7> *The heading tags allow for the quick choosing of a size of font. 1 is the largest and 7 is the smallest. <pre> *Forces the browser to render the enclosed text exactly as in the document's source code. This makes whitespace matter, something usually ignored in HTML.  - No end tag *This is the comment tag. It allows you to place text inside that no web browser will render on the page itself. It allows you to leave notes about certain parts of the page as necessary. <ul> <ol> *Creates either an unordered or ordered list with bullets/numbers. <li> *Creates a list item within an unordered/ordered list. Type changes the bullet/number that preceeds the list item into a different symbol/number scheme. Options: type - <ul> "Disc", "Round", "Square" <ol> "A", "a", "I", "i", "1" <dl> *Creates a definition list. <dt> *Creates a word within the definition list. <dd> *Creates a definition for the word. Outdated Text Tags ------------------ Note: Use these only as necessary. CSS is preferred to the use of these tags. <em> *Italicize the enclosed text. <strong> *Bold the enclosed text. <font> *Control attributes of the enclosed text. Options: size - Specify the size of the font in points (like Word) color - Any hex color (#000000 -> #FFFFFF) or plain name (red, blue, green, black, etc.) family - Specify the name(s) of the font(s) to be used (ex. "Arial") <basefont> *Control attributes of text that does NOT have a font tag surrounding it. Options: size - Specify the size of the font in points (like Word) color - Any hex color (#000000 -> #FFFFFF) or plain name (red, blue, green, black, etc.) family - Specify the name(s) of the font(s) to be used (ex. "Arial") <strike> *Place a line through the enclosed text. <tt> *Make the enclosed text appear in a different font that looks like it was written with a typewriter. <sub> <sup> *Make the text appear in a subscript or superscript position compared to the other text on that line. <big> <small> *Controls the size of the enclosed text. <blink> *Makes the enclosed text blink on and off. Images, Rules & Links --------------------- <img> *Allows you to place an image on the page. Options: src - Specify the location of the image alt - Displays alternate text before the image loads or when moused over width - Specify the width the image should be in pixels height - Specify the height the image should be in pixels hspace - Specify horizontal space around the image in pixels vspace - Specify vertical space around the image in pixels border - Specify the width the border should be in pixels align - "Left", "Right", "Center" ...or... "TextTop", "Top", "Middle", "Absmiddle", "Bottom", "Baseline", "Absbottom" for alignment within a line of text usemap - Specify the name of created image map <map> *Creates an image map to be applied to an image. Must be "name"d for use with an image. <area> *Creates a clickable area within a image map. Must be placed within a <map>. Options: shape - "rect" coords - A list of 4 pixel coordinates in x1,y1,x2,y2 order href - The address of the page the user should be sent to when anywhere within the area has been clicked <hr> *Places a horizontal rule on the page. Options: align - "Left", "Center", "Right" size - Specify height in pixels width - Specify width in pixels noshade - Fills the HR in solid (no value to be set) <a> *Takes the enclosed text/picture and transforms it into a clickable item that will take the user to another web page. Options: href - Specify either the location of a local file, the url of another distinct web site or e-mail address (put "mailto:" before the e-mail address) Tables ------ Note: It is preferrential to use CSS for positioning rather than tables for layout purposes. Use table for displaying text it is appropriate for. <table> *Defines a table on the page. Options: width - Specify the width of the table in pixels length - Specify the height of the table in pixels border - Specify the width of the border in pixels cellpadding - Specify the amount of space surrounding the data within a cell in pixels cellspacing - Specify the amount of space surrounding the cells within a table in pixels cols - Define the number of columns within the table rows - Define the number of rows within the table <tr> *Begins and ends a table row within a table. <th> <td> *Creates a table header and table data cells within a table row. Options: rowspan - Specify number of rows to span colspan - Specify number of columns to span width - Specify the width in pixels height - Specify the height in pixels align - "Left", "Center", "Right" the text within the cell valign - "Top", "Middle", "Bottom" the text within the cell nowrap - Doesn't allow the text to wrap to fit inside the cell (no value to set) <caption> *Allows you to put a title on your table Options: align - "Top", "Bottom" Forms ----- Note: Forms require that each element that's passing a value to the script have a name option for referencing it's value. <form> *Defines a from for user input. Options: method - "Post", "Get" action - Specify script to execute on submission of the form <input> *Creates an element for the user to fill in. Options: type - "text"?, "Password", "Hidden", "Radio", "Checkbox" value - Enter the default value for the input. Also doubles as the label on element you click. size - Specify the length of the box in characters maxlength - Define the maximum number of characters a user can enter checked - Used in conjunction with the Radio or Checkbox. <textarea> *Creates a multiline box for the user to type in. Options: wrap - "Yes"?, "No"? rows - Specify the height in lines to show cols - Specify the width in characters <select> *Creates a dropdown list for user to select an item from. <option> *Creates an item within the <select>. Options: selected - Sets a default selection (no value to be set) CSS2 ---- Note: CSS may be placed either in it's own tag (<style>) within the Head block, within each tag as a Option or in an external stylesheet accessed by the <link> tag within the Head block. When using the <style> tag, you may either reference the tags themselves, create classes/ids, or combine them. CSS does not use equals and avoid double quotes whenever possible. Instead, you lay them out like the following example: position: absolute; top: 10px; left: 10px; width: 200px; height:200px; This may be placed in double quotes for the style option within a tag or inside curly { } braces within the style tag or an external stylesheet. <style> *Defines the style markup used within the document. Content inside the tag must be commented out to protect older browsers that can not handle stylesheets. Options: type - "text/css", etc. background: *Specify all background information in this order with one CSS element. Options: color image repeat attachment position, inherit background-attachment: *Specify if/how a background image should be attached. Options: scroll, fixed, inherit background-color: *Specify the background color of an element. Options: >color<, transparent, inherit background-image: *Specify the location of the backgorund image. Options: url("somepic.jpg"), none, inherit background-position: *Specify the position of the background image. Options: top, center, bottom, left, center, right, inherit background-repeat: *Specify if/how the background image should repeat. Options: repeat, repeat-x, repeat-y, no-repeat, inherit border: *Specify all general border options in one CSS element. Options: width style color, inherit border-bottom: border-left: border-right: border-top: *Specify all border options for that side in one CSS element. Options: width style color, inherit border-bottom-color: border-left-color: border-right-color: border-top-color: *Specify the color of that side. Options: >color<, inherit border-bottom-style: border-left-style: border-right-style: border-top-style: *Specify the style of that side. Options: solid, dotted, double, groove, inset, inherit border-bottom-width: border-left-width: border-right-width: border-top-width: *Specify the width of the border on that side. Options: # px, thin, medium, thick, inherit border-collapse: *Specify ?. Options: collapse, separate, inherit border-color: *Specify the color of the border. Options: >color<, transparent, inherit border-width: *Specify the width of the border. Options: # px, thin, medium, thick, inherit bottom: *Specify how something should relate to the bottom of the window. Options: # px, # %, auto, inherit caption-side: *Specify where a table's caption should appear. Options: top, bottom, left, right, inherit clear: *Specify how text should align. Options: none, left, right, both, inherit clip: *Specify the region to show an element in. Options: >shape<, auto, inherit color: *Specify the color of the text. Options: >color<, inherit content: *Specify things to use :before & :after. Options: >string<, >url<, >counter<, attr(X), open-quote, close-quote, no-open-quote, no-close-quote, inherit counter-increment: *Specify counter increment. Options: >identifer< >integer<, none, inherit counter-reset: *Specify to reset the counter. Options: >identifer< >integer<, none, inherit cursor: *Specify the style of the cursor over that element. Options: url("somepic.jpg"), auto, crosshair, default, pointer, move, e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, se-resize, text, wait, help, inherit direction: *Specify direction of text flow. Options: ltr, rtl, inherit display: *Specify how the element is displayed Options: inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit empty-cells: *Specify to show/hide empty cells Options: show, hide, inherit float: *Specify how text should flow. Options: left, right, none, inherit font: *Specify all font options in one CSS element. Options: style variant weight size line-height family, caption, icon, menu, message-box, small-caption, status-bar, inherit font-family: *Specify what font(s) are to be used. Options: >family-name<, inherit font-size: *Specify how large the font should be. Options: # pt, # px, inherit font-size-adjust: *Specify ?. Options: >number<, none, inherit font-stretch: *Specify how a font should be stretched. Options: normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit font-style: *Specify the style of the font. Options: normal, italic, oblique, inherit font-variant: *Specify a variation on the font. Options: normal, small-caps, inherit font-weight: *Specify the thickness of the font. Options: normal, bold, bolder, lighter, 100-900, inherit height: *Specify the height of an element. Options: # px, # %, auto, inherit left: *Specify how far from the left of the document the element should be. Options: # px, # %, auto, inherit letter-spacing: *Specify the spacing of the letters. Options: normal, >length<, inherit line-height: *Specify how high the line goes. Options: normal, # px, # %, inherit list-style: *Specify all list style options in one CSS element. Options: type position image, inherit list-style-image: *Specify the image used for the bullets. Options: url("somepic.jpg"), none, inherit list-style-position: *Specify the position of the list. Options: inside, outside, inherit list-style-type: *Specify the type of list. Options: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-greek, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, none, inherit margin: *Specify the margin surrounding an element. Options: # px, inherit margin-bottom: margin-left: margin-right: margin-top: *Specify the side margin of an element. Options: # px, inherit marker-offset: *Specify ?. Options: # px/pt, auto, inherit marks: *Specify ?. Options: crop, cross, none, inherit max-height: max-width: min-height: min-width: *Specify maximum or minimum width/height of an element. Options: # px, # %, none, inherit orphans: *Specify ?. Options: >integer<, inherit outline: *Specify all outline options in one CSS element. Options: color style width, inherit outline-color: *Specify the color of the outline. Options: >color<, invert, inherit outline-style: *Specify the style of the outline. Options: solid, dotted, double, groove, inset, inherit outline-width: *Specify the width of the outline. Options: # px, inherit overflow: *Specify if/how overflow is to be displayed. Options: visible, hidden, scroll, auto, inherit padding: *Specify all padding options in one CSS element. Options: # px, inherit padding-bottom: padding-left: padding-right: padding-top: *Specify that side's padding. Options: #px, inherit page: *Specify ? Options: >identifier<, auto page-break-after: *Specify ? Options: auto, always, avoid, left, right, inherit page-break-before: *Specify ?. Options: auto, always, avoid, left, right, inherit page-break-inside: *Specify ?. Options: auto, avoid, inherit position: *Specify the position of an element. Options: static, relative, absolute, fixed, inherit quotes: *Specify ?. Options: >string<>string<, none, inherit right: *Specify distance from the right edge of document. Options: # px, # %, auto, inherit size: *Specify the size of the document's print settings. Options: # px, auto, portrait, landscape, inherit speak-header: *Specify ?. Options: once, always, inherit table-layout: *Specify how the table is to be laid out. Options: auto, fixed, inherit text-align: *Specify how text should be aligned. Options: left, right, center, justify, >string<, inherit text-decoration: *Specify how a line should be attached to text. Options: none, underline, overline, line-through, blink, inherit text-indent: *Specify the amount text should be indented. Options: # px/pt/%, inherit text-shadow: *Specify if/how the text should be shadowed. Options: none, >color< # px #px # px, inherit text-transform: *Specify how text should be transformed. Options: capitalize, uppercase, lowercase, none, inherit top: *Specify how far from the top of the document an element should be. Options: # px/%, auto, inherit unicode-bidi: *Specify ?. Options: normal, embed, bidi-override, inherit vertical-align: *Specify how an element should be aligned vertically. Options: baseline, sub, super, top, text-top, middle, bottom, text-bottom, # px/pt/%, inherit visibility: *Specify if an element is visible. Options: visible, hidden, collapse, inherit white-space: *Specify how whitespace is treated. Options: normal, pre, nowrap, inherit widows: *Specify ?. Options: >integer<, inherit width: *Specify how wide an element should be. Options: # px/%, auto, inherit word-spacing: *Specify how far apart words appear. Options: normal, # px/pt/%, inherit z-index: *Specify what "level" an element should appear on. Options: auto, >integer<, inherit