Beginning ASP.NET 2
.0.pdf
|
|
CSS and HTML Quick Reference |
|
|
|
|
Property |
Description |
|
|
|
|
|
|
|
border-top-style |
Define the style for an individual border of an |
|
border-bottom-style |
element. |
|
border-left-style |
|
|
border-right-style |
|
|
border-top-width |
Define the width for an individual border of an |
|
border-bottom-width |
element. |
|
border-left-width |
|
|
border-right-width |
|
|
border-width |
Defines the width of the border for an element. |
|
bottom |
Defines the distance to offset an element from the |
|
|
bottom edge of its parent element. |
|
caption-side |
Defines where a caption is placed in relation to a |
|
|
table, and can be one of top, bottom, left, right, |
|
|
or inherit. |
|
clear |
Clears any floating in action, and can be one of |
|
|
none, left, right, both, or inherit. |
|
clip |
Defines how much of an element is visible and can |
|
|
be a rectangle rect[n,n,n,n], auto, or inherit. |
|
color |
Defines the foreground color of an element. |
|
content |
Defines the type of content and how it is to be dis- |
|
|
played. |
|
counter-increment |
Defines the property and amount for |
|
|
auto-incrementing lists. |
|
counter-reset |
Resets the numerical value of auto-incrementing |
|
|
lists. |
|
cursor |
Sets the shape of the cursor when over the element. |
|
|
Can be one of auto, crosshair, default, |
|
|
pointer, move, e-resize, ne-resize, |
|
|
nw-resize, n-resize, se-resize, sw-resize, |
|
|
s-resize, w-resize, text, wait, help, inherit, |
|
|
or a URL to an image. |
|
direction |
Indicates the direction for letters, and can be one of |
|
|
ltr (left to right, the default), rtl (right to left), or |
|
|
inherit. |
|
display |
Determines how to display an element, and can be |
|
|
one of: block, inline, list-item, none, or |
|
|
inherit. |
|
empty-cells |
Defines how empty table cells are shown, and can |
|
|
be one of hide, show, or inherit. |
|
|
Table continued on following page |
709
Appendix E
Property |
Description |
|
|
float |
Indicates how this element floats within the parent |
|
element, and can be one of left, right, none, or |
|
inherit. |
font |
Defines the attributes of the font for the element. |
font-family |
Defines the font family for text. |
font-size |
Defines the size of the font for text. |
font-size-adjust |
Defines the aspect value for a font element. |
font-stretch |
Defines how expanded or condensed a font is. |
font-style |
Defines the style of the font, and can be one of |
|
italic, normal, oblique, or inherit. |
font-variant |
Defines whether the font is displayed in capital |
|
letters, and can be normal, small-caps, or |
|
inherit. |
font-weight |
Defines the thickness of the font, and can be |
|
absolute weight values (100 to 900 in steps of 100), |
|
bold or normal, bolder or lighter, or inherit. |
height |
Defines the height of an element. |
left |
When using absolute positioning, this defines how |
|
far from the left edge of the parent the element is |
|
placed. |
letter-spacing |
Defines the amount of space between letters. |
line-height |
Defines the height between lines. |
list-style |
Defines the properties for list elements. |
list-style-image |
Defines the image to be used as the marker for a |
|
list element. |
list-style-position |
Defines the positioning of the list relative to the list |
|
itself, and can be one of inside, outside, or |
|
inherit. |
list-style-type |
Defines the type of marker for the list, and can be |
|
one of circle, decimal, disc, square, |
|
lower-roman, upper-roman, lower-alpha, |
|
upper-alpha, none, or inherit. |
margin |
Defines the amount of space between the border |
|
and the parent element. |
margin-top |
Define the amount of space between the border |
margin-bottom |
and the parent element for an individual side of an |
margin-left |
element. |
margin-right |
|
|
|
710
|
|
CSS and HTML Quick Reference |
|
|
|
|
Property |
Description |
|
|
|
|
marker-offset |
Defines the distance between the border of a list |
|
|
marker and the list itself. |
|
marks |
Defines whether crop marks are shown, and can be |
|
|
one of crop, cross, both, none, or inherit. |
|
max-height |
Define the maximum height and width of an |
|
max-width |
element. |
|
min-height |
Define the minimum height and width of an |
|
min-width |
element. |
|
orphans |
Defines the minimum number of lines or |
|
|
paragraph that must be left at the bottom of a page. |
|
outline |
Defines the properties of a button or form field that |
|
|
has focus. |
|
outline-color |
Defines the color of a button or form field that has |
|
|
focus. |
|
outline-style |
Defines the border style of a button or form field |
|
|
that has focus. |
|
outline-width |
Defines the border width of a button or form field |
|
|
that has focus. |
|
overflow |
Defines the visibility of content if it doesn’t fit |
|
|
within the element, and can be one of auto, |
|
|
hidden, scroll, visible, or inherit. |
|
padding |
Defines the distance between one or more sides of |
|
|
the content area and its border. |
|
padding-top |
Define the distance between a side of the content |
|
padding-bottom |
area and its border. |
|
padding-left |
|
|
padding-right |
|
|
page |
Defines the page type (such as regular or |
|
|
landscape) for printed content. |
|
page-break-after |
Define how the browser should insert page breaks, |
|
page-break-before |
and can be one of always, auto, avoid, left, |
|
|
right or inherit. |
|
page-break-inside |
Defines whether page breaks split an element |
|
|
across pages, and can be auto, avoid, or inherit. |
|
position |
Defines how an element is positioned relative to |
|
|
the flow of the document, and can be absolute, |
|
|
fixed, relative, static, or inherit. |
|
quotes |
Defines the type of quotation mark to be used |
|
|
within embedded quotes. |
|
|
|
711
Appendix E
Property |
Description |
|
|
right |
Defines the distance an element should be from its |
|
parent’s right edge. |
size |
Defines the size of the printing area in a page. |
table-layout |
Defines how the width of table cells is calculated, |
|
and can be auto, fixed, or inherit. |
text-align |
Defines the alignment of text, and can be one of |
|
center, justify, left, right, or inherit. |
text-decoration |
Defines the decoration on text, and can be one |
|
of blink, line-through, none, overline, |
|
underline, or inherit. |
text-indent |
Defines the amount of space to indent the first line |
|
of a paragraph. |
text-shadow |
Defines the amount of shadow to apply to text. |
text-transform |
Defines the casing to use on text, and can be one of |
|
capitalize, lowercase, none, uppercase, or |
|
inherit. |
top |
Defines the distance between an element and its |
|
parent’s top edge. |
Unicode-bidi |
Defines Unicode text as having bidirectional |
|
characteristics. |
vertical-align |
Defines the vertical alignment of the element. |
visibility |
Defines how, or if, the element is shown, and can |
|
be one of collapse, hidden, visible, or |
|
inherit. |
white-space |
Defines how white space should be treated, and |
|
can be one of normal, nowrap, pre, or inherit. |
widows |
Defines the minimum number of lines that must be |
|
left at the top of a page. |
width |
Defines the width of the element. |
word-spacing |
Defines the distance between words. |
z-index |
Defines the depth of an element to allow |
|
overlapping elements. |
|
|
Common HTML Tags by Categor y
Following is a list of some of the most commonly used HTML tags by category. When you know what you want to do, but you’re not sure which tag will achieve the desired effect, use the following reference tables to put you on the right track.
712
|
|
CSS and HTML Quick Reference |
Document Structure |
|
|
|
|
|
|
Tag |
Meaning |
|
|
|
|
<! > |
Allows authors to add comments to code. |
|
<!DOCTYPE> |
Defines the document type. This is required by all |
|
|
HTML documents. |
|
<base> |
Specifies the document’s base URL — its original |
|
|
location. It’s not normally necessary to include this |
|
|
tag. It can only be used in <HEAD> section. |
|
<body> |
Contains the main part of the HTML document. |
|
<comment> |
Allows authors to add comments to code. |
|
<div> |
Defines a block division of the <BODY> section of |
|
|
the document. |
|
<head> |
Contains information about the document itself. |
|
<html> |
Signals the beginning and end of an HTML |
|
|
document. |
|
<link> |
Defines the current document’s relationship with |
|
|
other resources. Used in <HEAD> section only. |
|
<meta> |
Describes the content of a document. |
|
<nextid> |
Defines a parameter in the <HEAD> section of the |
|
|
document. |
|
<span> |
Defines an area for reference by a style sheet. |
|
<style> |
Specifies the style sheet for the page. |
Titles and Headings |
|
|
|
|
|
|
Tag |
Meaning |
|
|
|
|
<h1> |
Heading level 1. |
|
<h2> |
Heading level 2. |
|
<h3> |
Heading level 3. |
|
<h4> |
Heading level 4. |
|
<h5> |
Heading level 5. |
|
<h6> |
Heading level 6. |
|
<title> |
Defines the title of the document. |
|
|
|
713
Appendix E
Paragraphs and Lines
Tag |
Meaning |
|
|
<br> |
Line break. |
<center> |
Centers subsequent text/images. |
<hr> |
Draws a horizontal rule. |
<nobr> |
Prevents a line of text breaking. |
<p> |
Defines a paragraph. |
<wbr> |
Inserts a soft line break in a block of <NOBR> text. |
|
|
Text Styles |
|
|
|
|
|
|
Tag |
Meaning |
|
|
|
|
<address> |
Indicates an address. The address is typically |
|
|
displayed in italics. |
|
<b> |
Emboldens text. |
|
<basefont> |
Sets font size to be used as default. |
|
<big> |
Changes the physical rendering of the font to one |
|
|
size larger. |
|
<blockquote> |
Formats a quote — typically by indentation. |
|
<cite> |
Renders text in italics. |
|
<code> |
Renders text in a font resembling computer code. |
|
<dfn> |
Indicates the first instance of a term or important |
|
|
word. |
|
<em> |
Emphasized text — usually italic. |
|
<font> |
Changes font properties. |
|
<i> |
Defines italic text. |
|
<kbd> |
Indicates typed text. Useful for instruction manuals |
|
|
and the like. |
|
<listing> |
Renders text in a fixed-width font. |
|
<plaintext> |
Renders text in a fixed-width font without |
|
|
processing any other tags it may contain. |
|
<pre> |
Preformatted text. Renders text exactly how it is |
|
|
typed — carriage returns, styles, and so forth, will |
|
|
be recognized. |
|
|
|
714
|
|
CSS and HTML Quick Reference |
|
|
|
|
Tag |
Meaning |
|
|
|
|
<s> or <strike> |
Strikethrough. Renders the text as deleted (crossed |
|
|
out). |
|
<samp> |
Specifies sample code. |
|
<small> |
Changes the physical rendering of a font to one |
|
|
size smaller. |
|
<strong> |
Strong emphasis — usually bold. |
|
<style> |
Specifies the style sheet for the page. |
|
<sub> |
Subscript. |
|
<sup> |
Superscript. |
|
<tt> |
Renders text in fixed width, typewriter-style font. |
|
<u> |
Underlines text. Not widely supported at present, |
|
|
and not recommended, because it can cause |
|
|
confusion with hyperlinks, which also normally |
|
|
appear underlined. |
|
<var> |
Indicates a variable. |
|
<xmp> |
Renders text in fixed-width type, used for example |
|
|
text. |
|
|
|
Lists
Tag |
Meaning |
|
|
<dd> |
Definition description. Used in definition lists with |
|
<DT> to define the term. |
<dir> |
Denotes a directory list by indenting the text. |
<dl> |
Defines a definition list. |
<dt> |
Defines a definition term. Used with definition |
|
lists. |
<li> |
Defines a list item in any type of list other than a |
|
definition list. |
<menu> |
Defines a menu list. |
<ol> |
Defines an ordered (numbered) list. |
<ul> |
Defines an unordered (bulleted) list. |
|
|
715
Appendix E
Tables
Tag |
Meaning |
|
|
<caption> |
Puts a title above a table. |
<col> |
Defines column width and properties for a table. |
<colgroup> |
Defines properties for a group of columns in a |
|
table. |
<table> |
Defines a series of columns and rows to form a |
|
table. |
<tbody> |
Defines the table body. |
<td> |
Specifies a cell in a table. |
<tfoot> |
Defines table footer. |
<th> |
Specifies a header column. Text will be centered |
|
and bold. |
<thead> |
Used to designate rows as the table’s header. |
<tr> |
Defines the start of a table row. |
|
|
Links
Tag |
Meaning |
|
|
<a> |
Used to insert an anchor, which can be either a |
|
local reference point or a hyperlink to another |
|
URL. |
<a href=”url”> |
Hyperlink to another document, the location of |
|
which is specified by the url. |
<a name=”name”> |
Link to a local reference point, the location of |
|
which is specified by the name. |
|
|
Graphics, Objects, Multimedia, and Scripts
Tag |
Meaning |
|
|
<applet> |
Inserts an applet. |
<area> |
Specifies the shape of a hot spot in a client-side |
|
image map. |
<bgsound> |
Plays a background sound. |
|
|
716
|
|
CSS and HTML Quick Reference |
|
|
|
|
Tag |
Meaning |
|
|
|
|
<embed> |
Defines an embedded object in an HTML |
|
|
document. |
|
<img> |
Embeds an image or a video clip in a document. |
|
<map> |
Specifies a collection of hot spots for a client-side |
|
|
image map. |
|
<marquee> |
Sets a scrolling marquee. |
|
<noscript> |
Specifies HTML to be displayed in browsers that |
|
|
don’t support scripting. |
|
<object> |
Inserts an object. |
|
<param> |
Defines parameters for a Java applet. |
|
<script> |
Inserts a script. |
|
|
|
Forms
Tag |
Meaning |
|
|
<button> |
Creates an HTML-style button. |
<fieldset> |
Draws a box around a group of controls. |
<form> |
Defines part of the document as a user fill-out |
|
form. |
<input> |
Defines a user input box. |
<label> |
Defines a label for a control. |
<legend> |
Defines the text label to use in box created by a |
|
<FIELDSET> tag. |
<option> |
Used within the <SELECT> tag to present the user |
|
with a number of options. |
<select> |
Denotes a list box or drop-down list. |
<textarea> |
Defines a text area inside a <FORM> element. |
|
|
Frames
Tag |
Meaning |
|
|
<frame> |
Defines a single frame in a frameset. |
<frameset> |
Defines the main container for a frame. |
|
|
Table continued on following page
717
Appendix E
Tag |
Meaning |
|
|
<iframe> |
Defines a floating frame within a document. |
<noframes> |
Allows for backward compatibility with |
|
non-frame-compliant browsers. |
|
|
HTML Common Attributes to CSS Proper ty Cross Reference
Attribute |
CSS Values |
Description |
|
|
|
align |
text-align |
Specifies how the element is aligned |
|
|
with respect to its containing |
|
|
element, or to the rest of the page. |
alink |
:link pseudo class |
The color for active links in the |
|
|
page. A link is active while the |
|
|
mouse button is held down over the |
|
|
link. |
background |
background: |
Specifies a background picture that |
|
|
is tiled behind text and graphics. |
bgcolor |
background-color |
Specifies the background color to be |
|
|
used for an element. |
bgproperties |
background-attachment |
Specifies a background picture as a |
|
|
watermark, which does not scroll. |
border |
border |
Specifies if a border is to be drawn |
|
|
around the element, and sets its |
|
|
thickness. |
bordercolor |
border-color |
The color of all or some of the |
|
|
borders for an element. |
clear |
clear |
Causes the next element or text to |
|
|
be displayed below left-aligned or |
|
|
right-aligned images. |
color |
color |
The text or foreground color of an |
|
|
element. |
face |
font-family |
Sets the font family or typeface of |
|
|
the current font or base font. |
height |
height |
Specifies the height of the element |
|
|
that is to be drawn on the page. |
hidden |
visibility |
Forces the embedded object to be |
|
|
invisible in an <EMBED> tag. |
718