Scribd
Upload
351 views

Htmlchart 0 X

HTML chart

Uploaded by

Naman Mittal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
351 views

Htmlchart 0 X

HTML chart

Uploaded by

Naman Mittal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

<blod:.

quote>
<lblod:.quole> <tt><ltt>
Body <bodp <lbodp Identifies the body of on HTML document Unordered list <ul> <lui> Identifies on unordered !bulletedl Jist
Bold Displays text in boldface Variable <var> <lvar> Indicates a variable or program argument
Break (line break) <br/> Forces a line break in the document
<button> </ button> Creates a push button HTML ATTRIBUTES
Button
<caption> </caption> Adds a table caption ATTRIBUTE ELEMENTS IT VALUE TYPES FUNCTION
Cite <Cite> <Ieite> Identifies a citation or source reference NAME WORKS WITH

Identifies a computer code fragment abbr <ld>, <lh> Text Includes on abbreviation for
Code <code> </code>
header cell name
Column (table) <COl I> Creates a group of table column attributes
accept dorm>, <input> Comma-separated list of Provides a list of MIME types for
Column group <colgroup> Creates a specifi c column group media types file upload
<lcolgroup> accept- Provides a list of supported
dorm> Space-separated list of
Comment <! -- --> Adds comments not displayed as part of the page charset character encodings character sets
Definition description <dd> <ldd> Identifies definition in a glossary or definition list access key <O>, <area>, Chorset !A single character Identifies an accessibility key
Defining instance <dfn> </dfn> Indicates a defining instance of a given term <button>, <input>, lrom 150-106461 character
<label>, <legend>,
Definition list <dl> <ldl> Creates definition or glossary list
<lextarea>
Definition term <dl> <ldl> Identifies a term to be defined
action dorm> URI I Uniform Resource Identifies a server-side form
Deleted text <del> </del> Displays strikethrough text Identifier! handler
Division <div> <ldiv> Sets apart element's contents on separate line all <area>, <img> Text Displays a short text description
Emphasis <em> <lem> Indicates emphasis Iusually. displays in italics) of on image
Fleldset <fieldsef></fieldsef> Groups together related controls all <input> CDATA lA sequence of Displays a short text description
characters from the docu- of form buttons for non-graphical
Font <font> </font> Modifies font appearance
ment's cha racter set. May browsers
Form dorm> <!form> Creates on interactive form include entities.)
Frame <frame I> Defines a frame archive <Object> CDATA Contains a URL where on archive
Frameset <framesel> Defines a group of frames file is located
<l framesef> axis <ld>, <lh> CDATA Includes a comma-separated list
Head <head> </head> Identifies HTML document header of related headers
Heading 1-6 <hl> </hb, <h2> <lh2> . Identifies heading levels 1-6 bgcolor <body>, <fable>, Color Specifies background color.
<td>, <lh>, <tr>
Horizontal rule <hr I> Adds a horizontal line
border <img>, <fable> Pixels Controls border width around table
HTML <html> <lhtml> Identifies HTML document
cellpadding <table> Length (nn for pixels or nn% Adds extra space w ithin cells
Image <img/> Embeds on image for percentage length I
lnlineframe <iframe> <liframe> Creates on in line subwindow (floating frame) cellspocing <fable> Length Adds extra space between cells
Input <input I> Specifies a form control (user input) char <col>, <colgroup>. Character lA single charac- Identifies alignment character
Inserted text <ins> <fins> Marks up a document, identifying text inserted in <lbodp, <ld>. ter from 150-106461 for table elements. For instance,
o new version <ffoof>, <fh >, char=";"
<thead>, <lr>
Italic text <i><li> Displays text in italics
charoff <col>, <colgroup>, Length Specifies offset for alignment
Keyboard text <kbd> <ikbd> Identifies text to be entered by the user
<!body>, <ld>, character
Label <label> </label> Assigns labels to form fields <ffool>, <th>,
Legend <legend> <!legend> Sets apart groups of form elements in boxes <fhead>, <fr>
Unk <link/> Used in document head to create links to other charset <a>, <link>, Charset lA character Identifies character encoding of
documents <scrip!> encoding) linked resource
Ust Item <li> <IIi> Identifies an item in an orde red or unordered list checked <input> (checked) Identifies o pre-selected option in
checkboxes and radio buttons
Map <mop> </mop> Identifies a client-side image mop
cite <blockquote>, <q> URI Identifies URI for source document
Meta information <metal> Conta ins descriptive information
cite <del>. <ins> URI Includes info on reason for change
Noframes <noframes> Contains alternate content for browsers not
class All except, CDATA Identifies a space-separated list of
<lnofromes> supporting frames
<bose>. <head>, classes in an element
Noscript <noscript> <lnoscripl> Contains alternate content for browsers not <hlml>. <meta>.
supporting client-side scripts <param>, <script>,
Object <object> </object> Identifies a generic embedded object <style>. <title>
Option <Option> </option> Identifies a selectable choice in a form classid <objecl> URI. Contains a URI for an object's
Option group <optgroup> <loptgroup> Creates a logical group of options in a form implementation
code base <Object> URI Identifies a base URI for classid,
Ordered list <OI> <lol> Identifies a numbered list
data, archive
Paragraph <P> <lp> Identifies a paragraph
codetype <object> Media type Identifies content type for code
Parameter <porom I> Contains a set of values required by an object at cols dramesel> Multiple lengths Define columns in a frames page
run-time ldefoulll00%1
Preformatted text <pre> </pre> Overrides HTML's text formatting cols <textarea> Number Defines the width lin characters) of
Quotation <q> <lq> Identifies a short inline quotation a text area
Sample text <samp> <lsamp> Sample output colspon <td>, <lh> Number Specifies the number of table
Script <scri pt> </script> columns spanned by a single cell
Encloses script statements
Select content <meta> CDATA Identifies information types
<select> </select> Creates a drop-down menu in a form
included in <meta> element
Small <small> </small> Renders text in a "small" font
coords <a> Coords Sets coordinates for clickable area
Span <span> </span> Contains a customizable in line element in client-side image maps
Strong emphasis <strong> </strong> Displays text as strongly emphasized (usually, as coords <area> Coords (A comma- Sets the points that define a shape
boldface) separated li st of lengths I in an image mop
Style <style> </style> Includes style information in the document header data <Object> URI Contains a reference to on object's
Subscript <SUb> </sub> Renders text as subscript data
SUperscript <sup> </sup> datetime <del>, <ins> Date and time in ISO date Identifies date and time of change
Renders text as superscript
format
Table <table> </table> Identifies a table
declare <object> !declare! Declares on object w ithout
Table body <lbodp <llbodp Creates a grouping of table body elements instantiating it
Table data <td> <ltd> Creates a table data cell defer <script> (defer) Enables user agent to defer
Table footer <ffool> <ltfool> Identifies a table footer execution of script
Table header <lhead> <lthead> Creates a grouping of rows in a table header dir All except, <base>, lltr I rill Specifies direction for weak/
Table header cell <fh > <llh> <bdo>, <br>, neutral text
Identifies a table header cell
<frame>, <frame-
Table row <fr> <fir> Identifies a row of cells in a table set>, <iframe>,
Textarea <fextareo> <ltextorea> Creates a multiple line text field in a form <param>, <script>
-~ ..
dir <bdo> lltrlrtll Specifies directionality of text onfocus <O>, <area>. Script cdtses an action when on i
disabled <button>. <input>, !disabled I Disables form elements <button>. <input>, element receives the focus
<optgroup>. <label>, <select>,
<option >, <select>, <lextarea>
<lextorea>
enctype dorm> Media type Sets the encoding method for
form data
for <label> ID reference defined by Matches field 10 value onkeydown All except: <base>, Script Causes an action when a k:ey is
other attributes <bdo>. <br>. pressed down
frame <table> void I above I belowl hsides Identifies which parts of a table doni>, <frame>,
llhs I rhs I visdes I box I structure should display dramesel>.
border <head>. <hfmb,
frameborder <frame>. <iframe> 11101 Turns frame borders on or off <ifrome>. <meta>.
headers <ld>, <lh> ID reference defined by Contains a list of IDs for header <param>. <script>,
other attributes cells <style>. <title>
height <ifram e> Length Specifies frame height on keypress (same as above} Script Causes on action when a key is
pressed and released
height <img>. <Object> Length Specifies an image's or object's
height in pixels
href URI Identifies a URI for a linked onkeyup !same as above} Script Causes an action when a key is
<a>. <area>.
<link> resource released

href <base> URI Identifies a URI that acts as a on load <body> Script Causes an action when the docu-
base URI men! has been loaded

hreflang A language code Specifies a language code on load <framesef> Script Causes an action when all the
<a>. <link>
frames hove been loaded
http-equiv <meta> Name Identifies an HTTP response
header name on mouse- All except: <bose>. Script Causes on action when a pointer
down <bdo>, <br>, or mouse button is pressed down
id All except: <base>, ID Specifies a document-wide
doni>. <frame>.
<head>, <html>, unique ID
dramesef>,
<meta>, <script>.
<head>, <html>,
<style>. <Iitie>
<ifrome>. <meta>.
ismap <img>, <input> lismapl Identifies a server-side image mop
<porom>, <script>,
label <optgroup> Text Identifies a group of options in
<style>, <title>
a form
on mouse- !some as above} Script Causes on action when a pointer
label <option> Text Specifies on option nome in a form move or mouse is moved within the
lang All except, Language code Indicates the language being used element
<bose>, <br>. in on element's contents onmouseout Script Causes an action when a pointer
All except: <bose>.
<frame>. <frame- <bdo>, <br>, is moved away from the element
set>. <iframe>, doni>. <frame>.
<parom >, <script> d ramesef>,
longdesc <frame>. <ifrome> URI Provides a link to a long descrip- <head>, <htm l>,
lion of a frame's contents <iframe>. <meta>.
longdesc <img> URI Provides a link to a long descrip- <param>. <script>.
lion for non-graphical browsers <style>, <title>
margin height <frame>. <iframe> Pixe ls Specifies frame margin height onmouseover !same as above I Script Causes on action when a pointer or
marginwidth <frame>. <ifrome> Pixels Specifies frame margin width cursor is moved onto the element
maxlength <input> Number Specifies maximum number of onmouseup (some as above I Script Causes an action when a pointer
characters for text fields or mouse butlon is released
media <link> Single or comma-separated Identifies the media a linked style on reset dorm > Script Causes an action when a form
list of media descriptors sheet should apply to is reset
media <style> Single or comma-separated Identifies the media an embedded onselect <input>, Script Causes an action when some text
list of media descriptors style sheet should apply to <lextorea> is selected
method dorm> lget I postl Specifies the HTTP method used to onsubmit dorm> Script Causes an action when a form is
submit a form submitted
multiple <select> (multiple I Permits multiple selections in a form onunlood <bOdY> Script Causes an action when the docu-
name <a> COATA Creates a named marker in a men! has been removed
document onunlood <fromesef> Script Causes an action when all the
name <bUI!On >. COATA Allows a form control to be named frames have been removed
<lextarea> profile <head> URI links to a named dictionary of
name <select> COATA Assigns a name to a form field meta information
name <form> COATA Assigns a name to a form for readonly <input>, (reodonlyl Prevents editing of text fields in
scripting purposes <lextareo> a form
name <frame>. <iframe> COATA Assigns a name to a frame for rei <O>, <link> Link types Identifies forward link types
targeting purposes rev <a>. <link> Link types Identifies reverse link types
name <img> COATA Assig ns a name to an image for rows dromesef> Multiple lengths Specifies a list of lengths
sc ripting purposes rows <lextareo> Number Sets the number of rows in a

. name

name
<input>. <object>

<mop>
COATA

COATA
Assigns a name for scripting
purposes
Assigns a nome for reference by
rowspan <ld>, <lh> Number
text area
Specifies the number of rows
spanned by a single table cell
usemop rules <table> none 1groups 1rows I Controls the display of rules within
name <meta> Nome Assigns a name to meta information eels I all a table
name <parom > COATA Specifies the nome of the object scheme <meta> COATA Identifies the expected format of
properly being set the conte nt otlribute
nohref <area> Inch ref) Identifies a region that ha s no scope <td>. <th> row 1coli rowgroup I Indicates the scope covered by
action in an image map colg roup I header cells
noresize <frame> lnoresizel Prevents resizing of frames scrolling <frame>, <ifrome> Iyes 1no 1auto) Turns scroll bars on or off in a frame
on blur <a>. <area >. Script lA script expression Causes an action when the selected <option> lselecledl Defines preselected option in a form
<butlon >. <input>, or code segme nt! element loses the focus shape <a> rect 1circle 1poly 1default Defines a selectable region in a
<label>. <select>. client-side image mop
<lextoreo> shape <area> reel I circle I poly I default Controls interpretation of
onchange <input>. <select>, Script Causes an action when the coordinates in on image mop
<lexto reo> element va lue is changed size <input> CDATA Specifies the size lin characters! of
onclick All except: <base>, Script Causes an action when pointer a text form control
<bdo>, <br>, !mouse) button is clicked size <select> Number Specifies the number of rows
<font>. <frame>. visible in a drop-down menu
<fromesel >. Specifies the number of table col-
span <COl> Number
<head>, <hlmb.
umns effected by COL attributes
<iframe>. <meta>,
spa n <colg roup> Number Specifies the default number of
<porom>. <script>,
table columns in a column group
<style>, <Iitie>
src <frame>, <iframe> URI Identifies the source of frame content
ondblclick {some as above) Script Causes on action when pointer
src <input> URI Identifies the URI of on image for
[mouse) button is double clicked
form fields with images

- :
rnNTINI I~n nt.a nTl-l~D c.1n~
SPARKCHARTS'"

HTML 1 ~::~
KEY HTML TERMS CREATING TABLES
Hypertext: A means of connecting documents by text links. <table wi.dt~"##" cellpoddi~"##" cellspocin~"##" border="##">
HTML: Hypertext Markup Language. A language that uses elements, attributes, and values <tr><td>Row 1 Cell 1</td><td>Row 1 Cell Z<ltd><ltr>
(markup) to construct and link (hypertext) documents for easy access and display. <tr><td>Row Z Cel l 1</td><td>Row Z Cell Z<ltd><ltr>
XML: Extensible Markup Language. A customizable markup language. <!tabl e> ,
XHTML: Extensible Hypertext Markup Language. A reformulation of HTML 4 as an XML 1.0 Use the <tabl e><ltable> element to create a table, the <tr ><ltr > element to define rows, and !
application. the <td><ltd> element to create cells. To create a dynamic table that resizes according to the ;
OHTML: Dynamic Hypertext Markup Language. HTML, CSS, and Javascri pt combined to create browser window size, use% values in the width and/or height attributes.
dynamic (as opposed to static) pages.
SGML: stanvard Generalized Markup Language. The mother language from which HTML, CONSTRUCTING FORMS
XHTML, and XML were created. Identity where the form information will be sent.
Element: A container that specifies the nature, formatting, or function of a portion of a docu- <fo rm acti.on="mail to: name@emailaddress. com" method~"post">
ment. E.g., <form>, <table>, <p>, <irng I>. Create a text box.
Tag : Signifies the opening and closing of an element. E.g., <table> <!table>. <p>Name <input type="text" name="name" si.ze="20" maxl ength="40" l><ip>
Empty element: An element that has no content and is written as a single tag. E.g., <i.rng 1>. Create a text input area.
Block element: causes a tine break after the element. E.g., <p>, <hl>, <table>, <br I>. <p>Enter text: <textarea name="response" rows~"S" cols="ZS"> <ltextarea><lp>
tnline element: Displays inline and does not generate a line break. E.g., <irng I>, <b>, <i.>.
Proprietary element: An element not part of the official HTML recommendation. Often, it is Offer a choice of one item with radio buttons.
supported only by the browser fo r which it was developed. E.g., Netscape's <blink> element. Choice 1: <input type="radi.o" name="choi.ces" value="choi.ce 1"
Deprecated element or attribute : An element or attribute that is being phased out of HTML checked~"checked" l><br I>
and therefol e eventually will not be supported by browsers. Choice 2: <input type="radi.o" ncme="choices" value="choi.ce 2" l><br I>
Attribute: Lists a characteristic of a particu lar element. E.g, <table border ~"3">. Choice 3: <input type="radi.o" ncme="choices" value="choice 3" l><br I>
Value: Modifies the attribute in which it occurs. E.g., <table border~"3 ">. Offer multiple choices with check boxes.
Nesting: The practice of placing elements inside one another (as opposed to overlapping <i.~ t~"checkbox" ~"selections" val ~"selection1" />Sel ection 1<br I>
them). Nesting is the correct syntax for HTML. overlapping is incorrect and can cause prob- <i.~ t~"checkbox" ~"selections" val~"selectionZ" />Selection Z<br I>
lems with your Web page. <i~ type="checkbox" ncme="selecti.ons" value="sel ecti.on3" />Selection 3<br I>
Correctly nested elements: <tr><td><ltd><ltr >
Incorrectly nested (overlapped) elements: <tr><td><ltr><ltd> Use the select and option elements to create a scrolling list box (size attribute value greater i
User agent (UA) : The means (e.g., a web browser) by which one accesses an HTML document. than 1) or a pull-down menu (size attribute value of 1) .
Client-side: Describes anything that is done on the user's computer. <sel ect ncrne="pulldowrmenu" si.ze="3">
Server-side: Describes anything that is done on the Web server. <opti.on va lue="firsti. tem">Fi rst Item<lopti.on>
CGI: common Gateway Interface. A protocol that is used for managing the exchange of infor- <opti.on value="secondi tem">Second Item<lopti.on>
mation between the user, the server, and the Web site owner. <opti.on value="thirdi tem">Third Item<lopti.on>
Script: A portion of programming code that can function in a Web page or on the server, but <opti.on value="fourthi tem">Fourth I tem<lopti.on>
not as a stand-atone program. <!sel ect>
Applet: A small program that can be embedded in a Web page. Use the "password" attribute to create a password field.
Well-formed document: A document that uses correct HTML or XHTML syntax. <input type="password" s i.ze="lS" I>
Valid document: A document that conforms to a particular DTD (Document Type Definition). Use the "submit" and "reset attributes to create submit/reset buttons
DTD: Document Type Definition. A standard that identifies the elements, attributes, and values <input type="submi t" l><br I>
that comprise HTML, XHTML, XML, or any other language created with SGML. <input type="reset" I>
W3C: The world Wide Web consortium. The group responsible for establishing standards for
the world Wide web (www.w3.org). CREATING A FRAMESET PAGE
XHTML DISTINCTIONS <html>
XHTML 1.0 is the current recommendation by the W3C for authoring Web documents. Although <head><ti tle>Frameset Page<lti. tle><lhead>
it uses the same elements as HTML, there are a number of important distinctions between the <frameset cols="ZS%, 75%">
two. In particular XHTML is much stricter regarding syntax. The following points are important to <frcrne src="docl..lllent_a . htm" I>
remember when writing valid XHTML: <frame src="document_b. htm" I>
Documents must be well-formed (syntactically correct). <lfromeset>
Element and attribute names must be in lowercase. <lhtml>
End tags are required for all non-empty elements. Note: For the frameset page to display property, the corresponding frame documents must also
Empty elements should be written in a minimized form. E.g., <br />. be created (in this case, document_a.htm and document_b.htm).
Attribute values must always be in quotation marks.
All attributes must have values. APPLYING STYLE SHEETS
Link to an external style sheet:
SYNTAX <head>
<link rel="stylesheet" type~"textlcss" href="stylesheetdoc. css" I>
Element with content: <elerrentName attribut~"value">Content<lelerrentName>
<!head>
Ex: <a href~"ney,page . hbn''>L inkNane<la>
Embed a style sheet:
Empty element: <el enentNane attri bvt~"value" I> <head>
Ex: <i.rng src~"ITMJiX. jpg" I> <style type~"text/css">
sel ector {property: val ue;}
selector {property: value;}
NUMBERED (ORDERED) LISTS
<!style>
<ol type~"I"> displays capital Roman numerals. <!head>
<ol type~"i"> displays small Roman numerals. Apply style inline :
<ol type~" A"> displays capital letters. <p style~"property: value; property: value">Formatted text<lp>
<ol type~" a"> displays small letters.
<ol type~"1"> displays Arabic numerals (default). INCLUDING SCRIPTS
<script type="textljavascript"> <! --
BULLETED (UNORDERED) LISTS document. write ("This is fun");
' <Ul type~"square"> displays a SOlid, Square bu llet. --> </script>
<ul type~" disc"> displays a solid disc (default). The script can be placed in the <head> of the document or in the body. It can also exist as
<Ul type~"circle"> displays a circle. a separate document on the server. To link to an external script, you must add the attribute 1
src~"document. js" to the opening script tag.
CREATING HYPERLINKS
Text link (internal) HTML ELEMENTS
<a href~"mypageZ. htm">Link to a page on my own si te<la>
ELEMENT NAME SYNTAX FUNCTION
Text link (external) Abbreviation Identifies abbreviated text
<obbr> <lobbr>
<a href~" http ://VMW.othersite.com">Link to someone el se's si te<la>
Acronym <acronym> </ acronym > Identifies acronyms
Image link (internal) Anchor <O> <Ia> Creoles links
<a h ref~"mypageZ. htm"><irng src~"button . gi f" wi.dth~"50" height="Z0" alt="Cli. ck
Area <area I> Defines hot spots in client-side image mops
here" l><ia>
Attribution <address> </address> Identifies author and contact information
Image link (external, with blue border turned off) Information
<a href="http : I IVMW. othersi te. com"><irng src="buttonZ. gi f" border="0" width="50"
Base URL <base I> Identifi es a base URL for a document
height~"Z0" alt="Other guy's site" !><Ia>
Bidirectional <bdo> <lbdo> Overrides the directionality of language characters
Email (mailto) link algorithm
<a href="mai.l to: name@email address. com"> Send me a greeting<!a>
Big text <big> </big> Makes text one size larger than default
HTML ATTRIBUTES (continued)
ATIRIBUTE ELEMENTS IT VALUE TYPES FUNCTION type <object> Media type IRFC20451 Identifies content type fo r object
NAME WORKS WITH dolo
src <img> URI Identifies the URI of image to embed type <OI> llaiAiill Specifies numbering style in an
src <SCript> URI Identifies the URI for an ordered list
external script type <param> Media type IRFC20451 Identifies content type for value
standby <object> Text Contains a message to display when valuetype=refM
while loading an object type <SCrip!> Media type IRFC2045} Identifies content type of script
style All except: <base>, Style rules Cohtains associated style language
<head>, <html>, inforrriation type <style> Media type IRFC20451 Identifies content type of style
<meta>. <parom>. language
<SCript>, <Style>, type <UI> disc I square I circle Specifies bullet style in an
<title> unordered list
summary <table> Text Identifies the purpose/structure of usemap <img>. <input>, URI Instructs user agent to use a
a table for speech output <object> client-side image map
toblndex <a>. <area >. Number Specifies tabbing order for form vallgn <col>. <colgroup>, lop I middle I bollam I Specifies vertical alignment in cells
<button>. <input>. fields <!body>, <ld>, baseline
<objec t>. <select>. <!fOOl>, <lh>,
<lextarea> <lhead>. <lr>
target <a>. <area>. Frome nome or _blank. Identifies a frame or browser value <button> CDATA Specifies a value sent to the server
<bose>. dorm>. _parent. _self. or _top window in which content is to be when clicked
<link> rendered value <input> CDATA Specifies values for radio buttons
lflle All except: <base>, Text Assigns on advisory title to an and checkboxes in forms
<head>. <html>. element value <Option> CDATA Specifies a value in a form item
<meta>. <param>,
value <param> CDATA Specifies the va"lue of a parameter
<script>. <title>
valuetype <param> data I ref I object Specifies how a value should be
type <a>. < link> Media type IRFC20451 Identifies advisory content type
interpreted
type <button> button I submit I reset Defines the function of a form button
width <col>. <colgroup> Multiple length Specifies width
type <input> text I password I checkbox Defines the kind of input that is
width <iframe>. <img>, length Specifies width
I radio I submit I resell file I needed for a farm field
<object>, <fable>
hidden I image I bullon
type <li> disc I square I circle or 11 Specifies a list item style
a A i I

CASCADING STYLE SHEETS [CSS] I


KEY CSS TERMS (The important declaration will usually prevent a user's Pseudo-element Selects an element based on a potential situ
Selector: Identifies which portions of a document will be styles from overriding your own.) ation in which that element occu rs.
affected by the style. Frequently a selector is an HTML ele- p :first-line {font-size: Zem}
ment name. RELATIVE LENGTH UNITS increases the font size of the first line of every
Ems: em paragraph.
Decloration : Identifies which style is to be applied to a selec-
Exes: ex
tor (contains both a property and va lue).
Percentage : % TEXT PROPERTIES
Property: Identifies which characteristic of an element is to Pixels: px
Property Possible Values
be modified (similar to an HTML attribute).
ABSOLUTE LENGTH UN ITS color }calor} I inherit
Value: Identifies the specific style to be applied.
Centimeters : em text-align left I right I center I justify
Inheritance : The passing of style from a parent element to Inches: in text-decoration none I underline I overline I line-through
its children and grandchildren (descendants). Millimeters: mm I blink 1inherit
Pica s: pc text-indent lleng!hl l lpercentage} I inherit
Descendant: An element that is nested inside another
Points: pt
element. text-transform capitalize I uppercase [lowercase I none
1inherit
Rule: A comp lete style instruction, including a selector and GENERIC FONTS
one or more properties and values. text-shadow none llcolorl llleng!hl I inherit
Cursive
Fantasy letter-spacing normallllenglhl I inherit
Text properties: Modify how text is displayed.
Monospace word-spacing normallllenglhlllpercentage} I inherit
Font properties: Modify how fonts are displayed. Sans-serif baseline I sub I super I top I text-lop I
Box properties: Modify how margins, borders, and padding Serif middle I bollom ltext-bollom llpercenl-
are displayed . age} llleng!hl I inherit
USEFUL PSEUDO CLASSES
Background properties: Set background images and back- FONT PROPERTIES
a :link
ground colors. Determine link appearance.
Property Possible Values
Classification properties : Set the display and function char- a :visited
Determine appearance of visited links. font-family !font name) [ !generic name] I inherit
acteristics of elements.
a:active xx-small l x-sma lll small I medium I large
linked style sheet: A style sheet that exists on the server Determine appearance of active links. I x- large I xx-large llleng!hl llpercentage}
as a separate text document and is linked to a web page or I larger 1smaller 1[relative measurement)
a :hover
pages through the <1 i.nk> element. Change appearance of links when a cursor moves over 1inherit
Embedded style sheet: A style sheet that is contained in the them. font-style norm al I italic I oblique I inherit
<head> portion of an HTML document, inside the <style> font-variant normal[ small-cops [ inherit
<!style> element. SELECTORS
f ont-weight normal I bold I lighter I bolder 1100 I 200
lnline style sheet: A style sheet that is inserted directly into : Selector Syntax 1300 1400 ISOO 1600 1700 1800 I 900 I
an HTML element through the use of the style attribute. ; Type (element} inherit
body {property: value ;} lmulliple
font-stretch ultra~condensed I extra-condensed I con-
Cascade: The order of priority a web browser gives to style : selectors may be separated by commosl hl,
densed I semi-condensed I normal I semi-
sheets. Generally (though not always), this order is as fol- ; h2, h3 , h4, h5, h6 {property:
expanded 1expanded I extra-expanded I
lows: inline styles take priority over embedded styles, and value;}
ultra~expanded 1 inherit
embedded styles take priority over linked styles. Descendant Selects an element <h3> that is a descendant
font-size-adjust !number) I none I inherit
(contextu al) of another element <Span>.
CSS SYNTAX line-height normalllnumber} lllenglhl llpercenlage}
span h3 {property : value;}
Style rule: 1 inherit
Class Selects an element that contains a corre-
selector {property : value; property : sponding class attribute.
value; property : value;}
BACKGROUND PROPERTIES
.boldface {property: value;} selects:
or <P class="boldface"> Property Possible Values
selector {
10 Selects an element that contains a unique background-color transparent II color va lue) I inherit
property: value;
ID allribute. background-image none llurlll inherit
property : value;
#243 {property: value;} selects: <P background-repeat repeal I repeat-x I repeat-y I no-
property : value
id="243"> repeat I inherit
}
Specifying a URL: Selects an element based on a potential con- background-attachment scroll I fixed I inherit
url(pi.cture .gi.f) dition that may occur when a page is viewed.
background-position lpercentagellllength(l,2JJ lltop
Adding an ! i.rrportaot declaration : o:visited {color: red;}setsthecolor
1center I bollom} Ill eft I center I
selector {property: value !i.rrportant;} of visited links to red .
right} I inherit
BOX PROPERTIES padding-bottom (Jenglhll lpercentagell inherit font [font-weight! lllfont-stylelll !font-variant!
Property Poss1ble Values padding-left llengthll !percentage! I inherit II !font-size! II !line-height! II !font-family! 11
caption I icon I menu I message-box 1sma ll-
width !lengthlllpercentagel l auto I inherit
CLASSIFICATION PROPERTIES caption I stqtus-bar I inherit
height Jlengthlllpercentagell auto I inherit
border !border-width! lllborder-stylelll color 1
clear none I left 1 right 1 both 1 inherit Property Possible Values
inherit
float left I right I none I inherit display block I inline I list-item I run-in I compact 1
border-[top, right, [border-width[ II [border-style[ II color 1
marker I table I inline-table I table-row-group
border-top-width !length II thin 1 medium 1 thick 1inherit bottom, left] inherit
I table-header-group I table-footer-group 1
border-bottom-width [length! I thin I medium I thick 1 inherit table-row I table-column-group I table-column I margin margin-width {1,4} I inherit
border-left-width !length II th in 1 medium 1 thick 1 inherit table-cell I tabl e-caption I none I inherit padding padding-width {1,4} I inherit
border-right-width !length II thin I medium I thick 1inherit list-style-type disc I ci rcle I square I decimal llower-romon
I upper-roman I lower-alpha I upper-alpha I When adding va lues with the border, margin, and padding
border-width !length II thin I medium I thick I inherit
shorthand properties, the syntax is as follows:
border-color none 1 inherit
[color value} I Icolor name! I 1. If a single va lue is supplied, it applies to all four sides.
transparent I inherit list-style-image uri I none I inherit
2. If two values are supplied, they apply to the top and bot-
border-style none 1hidden 1 dotted 1 dashed 1 solid 1 dou- list-style- position inside I outside I inh erit tom, respective ly.
ble I groove 1 ridge 1 inset 1 outset 1 inherit white-space normal I pre I nowrap I inherit 3. If t hree va lues are supplied, the first and thi rd apply to
margin-top [length! I [percentage! I auto I inherit the top and bottom; t he second applies to both the right
SHORTHAND PROPERTIES and left sides.
margin-right llengthlllpercentagell auto 1inherit
4. If four values are supplied, they apply to the top, right, bot-
margin-bottom [length! I [percentage! I auto I inherit Property Values
tom, and left sides respectively.
margin -left [length! I lpercentogell auto 1inherit background [background-color II background-image II
padding-top [length II [percentage! I inherit background-repeat II background -attach-
ment II background-position} I inherit
padding-right llengthll [percentagell inherit

ADDING COLOR TO WEB PAGES


METHODS FOR CODING COLOR body {background-color : green;} THE WEB SAFE COLOR PERCENTAGES
Name [sixteen basic colors only) : white table {background-color : #00ff00;}
p {background-col or: #0f0;} Percent Hexadecimal Short Hex Numerical Value
Netscape Named (not all browsers support): Jemonchiffon
Hexadecimal : #ffffff di. v {background-col or: rgb(0, 255, 0);} 0% 00
Short hex: #Iff (CSS only) span {background -co lor : rgb(0%, 100%, 0%);} 20% 33 51
rgb(decimal): rgb(255, 255, 255) [CSS only) 2. The color properly: 40% 66 102
rgb(%) : rgb(100%, 100%, 100%) [CSS only) control s foreground (usually text) color.
60% 99 153
Accepts colors by name, hexadecimal code, short hex,

---
APPLYING COLOR WITH HTML (DEPRECATED) rgb(decimal), and rgb(%). 80% cc c 204
May be used with any element (selector). 100% FF 255
1. The bgcolor attribute controls background color:
syntax:
Accepts name, Netscape name, or hexadecimal code.
p {color : black;}

(~------
May be used with <body>, <table>, <ld>, <lh>, and <tr>.
td {color : #000000;}

-- -- -- -
syntax:
body {color: #000;} black silver gray white
<body bgcolor="red"> <tabl e bgcolor="#ff0000">
di.v {color : rgb (0,0,0,);} #000000 #COCOCO #808080 #FFFFFF
2. The color attribute controls text color:
span {color : rgb(e%,0%,0%);}
Accepts name, Netscape name, or hexadecimal code.
May be used with the <font> and <basefont> elements.
Syntax:
THE SIXTEEN BASIC COLORS maroon red purple fuchsia
See chart in next column. #800000 #FFOOOO #800080 #FFOOFF
<font color="blue"> <base font col or="#0000ff">

----
APPLYING COLOR WITH CSS THE WEB SAFE COLORS
green lime olive yellow
1. The background-color properly: Non-dithering or web safe colors are constructed using com-
#008000 #OOFFOO #808000 #FFFFOO
Accepts colors by name, hexadecimal code, short hex, binations of red , green, and blue in amounts of 0%, 20%, 40%,
rgb(decimal), and rgb(%). 60%, 80%, 100%. These va lues must be expressed in hexadeci-
May be used with any element (selector). mal if you are using the HTML bgcolor attribute, but may be writ- navy blue teal aqua
Syntax: ten in short hex, rgb(decimal). and rgb(%). in CSS. #000080 #OOOOFF #008080 #OOFFFF

SPECIAL CHARACTERS [ENTITIES)


DEFINITION LETTERS AND NUMERALS Dollar sign &#36;
Character entities are case sensitive combinatio ns of letters Percent sign &#37;
A &#65; a &#97; 0 &#48;
and numbers that represent a specific character or letter.
B &#66; b &#98; &#49; Ampersand & &#38; &amp;
For example, &reg; and &#174; both represent the registered
trade mark symbol, . Every character in the ISO 8859 Latin 1 c &#67; &#99; &#50; Apostrophe &#39;
Character Set has a numeric reference li ke &#174;, but only cer- D &#68; d &#100; &#51; Parenthesis (left) &#40;
tain characters have character references like &reg;. &#69; e &#101; 4 &#52; Parenthesis (right) &#41;
F &#70; &#102; 5 &#53; Asterisk &#42;
G &#71; g &#103; 6 &#54; Pius sign + &#43;
1. Inserting special characters: Entities may be used to insert
H &#72; h &#104; 7 &#55; Comma &#44;
special characte rs into your Web page. For example, if you
want to represent an amount of money using the Pound (), t &#73; &#105; 8 &#56; Hyphen/minus sign &#45;
you cou ld use either a character entity or numeric entity to &#74; i &#106; 9 &#57; Period &#46;
represent t he pound symbol: K &#75; k &#107; Stash &#47;
<:p>Item pri.ce : &pound;2.5<1p> Colon &#58;
L &#76; &#108;
or
M &#77; m &#109; Semicolon &#59;
<:p>Item pri.ce : &#163;2. 5</p>.
In either case, the text will display: Item price: 2.5 . N &#78; &#110; less than < &#60; &It;
2. Escaping out characters : Some characters, such as the "less 0 &#79; 0 &#111 ; Equal sign &#61;
than" and "greater than" signs, can cause problems with &#80; Greater than > &#62; &gt;
p p &#112;
your pages if you simply type them in from the keyboard.
Q &#81; q &#113; Question mark &#63;
This is because a browser might co nfuse those characters
with HTML, css, or Javascript code. To avoid this problem, R &#82; &#114; Commercial ..at.. sign @ &#64;
you need to escape out those characters by using entities. s &#83; &#115; Square bracket lleftl &#91;
For example, if you are designing an HTML tutorial page and T &#84; &#116; Backslash &#92;
wish to represent the <table> tag, you would need to write Square bracket Iright) &#93;
u &#85; &#117;
it either as
v &#86; &#118; Caret &#94;
&1t; tabl e&gt;
or as w &#87; w &#119; Underscore &#95;
&#60; tabl e&#62; X &#88; X &#120; Grave accent &#96;
y &#89; &#121; Curly brace lleft) &#123;
SYNTAX
z &#90; &#122; Vertical bar &#124;
All entities are case-sensitive. Curly brace !right) &#125;
All entities must begin with an & (ampersand). PUNCTUATION AND SYMBOLS Tilde &#126;
All entities must end with a; (semicolon).
Numeric entities must have a# (crosshatch) before the entity Normal space (none! &#32; Non-breaking space [none! &#160; &nbsp;
number. , Exclamation point &#33; Inverted exclamation &#161; &iexcl;
Quotation mark &#34; &quot; point
Euro sign E &#128; &euro;
Hash mark # &#35;
11 11 11 11 11 11 11 11 11 11 11 11 11 11 1111 11 11
990033 FF3366 CC0033 FF0033 FF9999

11 11 11 11 1111 11 11 11 11 11 11 111111 11 11 11 11
FF33CC FFOOCC FF66FF FF33 FF FFOOFF

11 11 11 11 1111 11 11 111111 11 11 1111 1111 11


CC3366

CC0099
FFCCFF

990066
CC6699

CC66CC
993366

CC33CC
660033

CC99FF
CC3399

CC66FF
FF99CC

CC33FF
FF66CC

993399
FF99FF

CCOOCC
FF6699

CCOOFF
CC0066

9900CC
FF006 6

990099
FF339 9

CC99CC
FF0099

996699
I
663366 660099 9933CC 660066 9900FF 9933FF 9966CC 330033 66339 9 6633CC 6600CC 9966FF 330066 6600FF 6633FF CCCCFF 9999FF 9999CC 6666CC

1111 11 11 11 11111111 11 11 1111 11 11 11 11 1111


6666FF 666699 333366 333399 330099 3300CC 3300FF 3333FF 3333CC 0066FF 0033FF 3366FF 3366CC 000066 000033 OOOOFF 000099 0033CC OOOOCC

II 11 11 11 11 11 11 11 11 11 11 11 1111
336699 0066CC 99CCFF 6699FF 003366
1111 6699CC 006699 3399CC 0099CC 66CCFF 33 99FF 003399 0099FF 33CCFF OOCCFF 99FFFF 66FFFF 33FFFF OOFFFF

11 11 11 11 11 11 11 11 11 11 1111 1111 11 11 11 11
OOCCCC 009999 669999 99CCCC CCFFFF 33CCCC 66CCCC 339999 336666 006666 003333 OOFFCC 33FFCC 33CC99 OOCC99 66FFCC 99FFCC OOFF9 9 339966

11 11 11 11 11 11 11 11 11 11 1111 11 11 11 1111
00663 3 33 66 33 669966 66CC66 99FF99 66FF66 339933 99CC99 66FF99 33FF99 33CC66 OOCC66 66CC99 009966 009933 33FF66 OOFF66 CCFFCC CCFF99

11 11 1111 1111 11 11 11 11 11 11 11 11 11 11 111111


99FF66 99FF33 OOFF33 33FF33 OOCC33 33CC33 66FF33 OOFFOO 66CC33 006600 003300 009900 33FFOO 66FFOO 99FFOO 66CCOO OOCCOO 33CCOO 339900

1111 11 11 11 11
99CC66 669933
11 1111 11 11 11 11 11 11 11
99CC33 336600 669900 99CCOO CCFF66 CCFF33 CCFFOO 999900 CCCCOO CCCC33 333300 666600 999933 CCCC66 666633 999966 CCCC99

FFFFCC FFFF99
11 11 11 11 11 11 11 11 11 11 11
FFFF66 FFFF33 FFFFOO FFCCOO FFCC66 FFCC33 CC993 3 996600 CC9900 FF9900 CC6600 993300 CC6633 663300 FF9966 FF6633 FF9933

11 11 11 11 11 11 11 11 11 1111 11 11 11 11 11 11 11
FF6600 CC3300 996633 330000 663333 996666 CC9999 993333 CC6666 FFCCCC FF3333 CC3333 FF6666 660000 990000 CCOOOO FFOOOO FF3300 CC9966

D
FFCC99
11 11 11 11
FFFFFF CCCCCC 999999 666666 333333 000000
216 Web Safe Colors

Cent sign &#162; &cent; Capital A (Hide) A &#195; &Atilde; Small oe (ligature) ae &#230; &ae lig;
Pound sign &#163; & pound; Capital A (umlaut) A &#196; &Au ml; Small c (cedilla) &#231; &ccedil ;
Currency sign 0 &#164; &cu rren; Capital A (ring) A &#197; &Aring; Small e (grove accent) &#232; &egrave;
Yen sign &#165; &yen; Capijal AE (ligature) AO &#198; &AEiig; Small e (acute accent) &#233; &eacute;
Broken vertical bar &#166; &brvbor; Capital C (cedilla) ~ &#199; &Ccedil ; Small e (circumflex &#234; &ecirc;
Section sign &#167; &sect; Capitol E (grove accent) &#200; &Eg rave; accent)

Umlaut &#168; &uml; Capitol E (acute accent) &#201; &Eacute; Small e (umlaut) &#235; &euml ;

Copyright symbol c &#169; &copy; Capitol E (circumflex &#202; & Ecirc; Small i (grove accent) &#236; & igrove;

Feminine ordinal &#170; &ordf; accent) Small i (acute accent) &#237; & ia cute;

Left angle quote &#171 ; &laquo; Capital E (umlaut) &#203; &Euml ; Small i (circumflex &#238; & ici rc;
Copitoll(grave accent) &#204; & lgrave; accent)
Logical not sign &#172; &not;
Capitol I (acute accent) &#205; & la cu te; Small i (umlaut) &#239; &ium l;
Soft hyphen &#173; &shy;
Copitoll(circumflex &#206; &Ieire; Small eth (Icelandic) &#240; &eth;
Registered trademark &#174 ; &reg;
accent) Small n (tilde) &#241; &ntilde;
Macron accent &#175; &macr;
Degree sign
Capital I (umlaut) I &#207; & luml; Small o (grave accent) &#242; &og rave;
&#176; & deg;
Plus or minus &#177; &plusmn;
Capital ETH (Icelandic)
Capital N (tilde)
!l
N
&#208;
&#209;
&ETH;
&Ntilde;
Small o (acute accent)
Small o (circumflex 6
&#243;
&#244;
&oacute;
&ocirc;
.g
Superscript two &#178; &sup2;
Capital 0 (grave accent) 6 &#210; &Ograve; accent) t~
.. .
Superscript three &#179; &sup3; ~ v
Small o (tilde) &#245; &otild e; 0 .;
Acute accent &#180; &acu te;
Capitol 0 (acute accent) 6 &#211; &Oacute; :::
~
Capitol 0 (circumflex 6 &#212; &Ocirc; Small o (umlout) &#246; &o uml; t: c:
Micro sign &#181; &micro; 0c. -1!
accent) Small o (slash) &#248; &oslash; o
. . Q.
Paragraph sign &#182; &para ;
Middle dot &#183 ; &middot;
Capital 0 (tilde)
Capital 0 (umlaut)
6
6
&#213;
&#214;
&Otild e;
&Ouml;
Small u (grave accent)
Small u (acute accent)
&#249;
&#250;
& ugrave;
&uacute;
~~
Cedillci &#184; &cedi l;
Capital 0 (slash) 11! &#216; &Oslas h; Small u (circumflex &#251; &ucirc;
Superscript one &#185; &sup1 ;
Capital U (grave) 0 &#217; & Ugrave; accent)
Masculine ordinal &#186; &o rdm;

I
Capitol U (acute) 0 &#218; &Uacute; Small u (umlaut) &#252; & uuml;
Right angle quote &#187; &raquo;
Capital U (circumflex) 0 &#219; & Ucirc; Small y (acute accent) &#253; &yacute;
Fraction one-fourth v. &#188; & fra c14;
Capital U (umlout) 0 &#220; &Uuml; Small thorn (Icelandic) &#254; & thorn;
Fraction one-half y, &#189; & frac12;
Capital Y (acute) &#221; &Yacute; Small y (umlaut) &#255; &yu ml;
Fraction three-fourths &#190; &frac34;
Capital Thorn (Icelandic) &#222; &THORN; left arrow &#8592; &l arr;
Inverted question mark &#191; &iquest;
Small sz (ligature, &#223; &szlig; Up arrow &#8593; & uorr;
Multiplication sign &#215; &times; German) Right arrow &#8594; & rarr;
Division sign &#247; &divide; Small a (grave accent) 0 &#224; &ograve; Down arrow &#8595; & dorr;

MISCELLANEOUS SPECIAL CHARACTERS Small a (acute accent) 6 &#22 5; &co cute ; Horizontal arrow &#8596; &herr:
Small a (circumflex &#226; &aci rc; Spade suit (black) ... &#9824; &spades;

I
Capital A (grave accent) A &#192; &Ag rave; accent) Club suit (black) &#9827; &c lubs;
Capital A (acute accent) A &#193;
Capitol A (circumflex A &#194;
&Aacute;
&Acirc;
Small o (tilde)
Small a (umlaut)
&#227;
&#228;
&atild e;
&aum l;
Heart suit (black)
Diamond suit (black)
&#9829;
&#9830;
&hearts;
&diems;
accent)
Small a (ring) &#229; & aring ;

You might also like