block properties
border-color/colour
letter-spacing
line-height
text-align
text-indent
vertical-align
white-spacing
word-spacing
Two element categorys block: an element which forms a separate block inline: an element which stays inline with the rest of the content
word-spacing the space between words in a paragraph should be 30 pixels
Value normal, defines normal space between words, this is default
Value length, defines an extra space between words in px, pt, cm, em, etc ,
negative values are allowed
Value inherit,
word-spacing property should be inherited from the parent element
Example

{
word-spacing:30px;
}
white-spacing specifies how white-space inside an element is handled
Value normal, sequences of whitespace will collapse into a single whitespace,
text will wrap when necessary this is default
Value nowrap, sequences of whitespace will collapse into a single whitespace,
text will never wrap to the next line,
the text continues on the same line until a tag is encountered
Value pre,
whitespace is preserved by the browser,
text will only wrap on line breaks , acts like the pre tag in an element
Value pre-line,
sequences of whitespace will collapse into a single whitespace,
text will wrap when necessary, and on line breaks
Value pre-wrap,
whitespace is preserved by the browser,
text will wrap when necessary, and on line breaks
Value inherit,
specifies that the value of the white-space property should be inherited from the parent element
Example
P
{
white-spacing:nowrap;
}
vertical align
vertical align property sets the vertical alignment of an element
Value length, raises or lowers an element by the specified length
Value and,
raises or lowers an element in a percent of the "line-height" property
Value baseline,
align the baseline of the element with the baseline of the parent element this is default Value sub,
aligns the element as it was subscript Value super,
aligns the element as it was superscript Value top,
the top of the element is aligned with the top of the tallest element of the line
Value text-top,
the top of the element is aligned with the top of the parents element font
Value middle,
the element is placed in the middle of the parent element
Value bottom,
the bottom of the element is aligned with the lowest element of the line
Value text-bottom,
the bottom of the element is aligned with the bottom of the parent elements font
Value inherit,
specifies that the value of the vertical-align should be inherited from the parent element
Example
img
{
vertical-align:text-top;
}
text-indent
indentation of the first line in a text block
Value length, defines a fixed indentation in px, pt, em, etc
Value %, defines the indentation in % of the width of the parent element
Value inherit, specifies that the value of the text-indent property should be inherited from the parent element
Example
p
{
text-indent:50px;
}
text-align
HORIZONTAL ALIGNMENT OF TEXT
Value left, aligns the text to the left
Value right, aligns the text to the right
Value center, centers the text
Value justify,
stretches the lines so that each line has equal width (like in newspapers and magazines)
Value inherit,
specifies that the value of the text-align property should be inherited from the parent element
Level 3 Heading
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
The line-height property specifies the line height
Negative values are not allowed
The line-height property is supported in all major browsers
Value normal, a normal line height is default
Value number, a number that will be multiplied with the current font size to set the line height Value length, a fixed line height in px , cm, etc.
Value %, a line height in percent of the current font size
Value inherit, specifies that the value of the line-height property should be inherited from the parent element
Example
p. small {line-height:90%}
p. big {line-height:200%}
letter-spacing
increase or decrease the space between characters in a text
Value normal, no extra space between characters is default
Value length,
defines an extra space between characters (negative values are not allowed)
Value inherit,
specifies that the value of the letter-spacing should be inherited from the parent element
Example
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
border-color
Definition and Usage
Examples:
border-color: red green blue pink;
top border is red
right border is green
bottom border is blue
left border is pink
border-color: red green blue;
top border is red
right and left borders are green
bottom border is blue
border-color: red green;
top and bottom borders are red
right and left borders are green
border-color: red;
all four borders are red
Note:
Always declare the border-style property before the border-color property.
An element must have borders before you can change the color.
Example
p
{
border-style:solid;
border-color:#ff0000 #0000ff;
}
text-transform
text transform DIFINITION AND USAGE
The text-transform property controls the capitalization of text
Value none, no capitalization,
the text renders as it is, this is default
text-decoration
Text-decoration property specifies the decoration added to text
Value none, defines a normal text, this is default
Value underline, defines a line below the text
Value overline, defines a line above the text
Value line-through, defines a line through the text
Value blink, defines a blinking text
Value inherit,
specifies that the value of the text-decoration property should be inherited from the parent element
Example
h1 {text-decoration:overline}
h2 {text-decoration: through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
font-weight
Sets how thick / thin characters should be displayed
Value normal, defines normal characters, this is default
Value bold,
difines thick characters
Value bolder,
difines thicker characters
Value lighter,
difines lighter characters
Value (100, 200 ,300 ,400 ,500, 600, 700, 800, 900)
defines from thick to thin characters,400 is the same as normal,
and 700 is the same as bold.
Value inherit,
specifies that the font-weight should be inherited from the parent element
Possible values for font-weights are,
(normal, bold, bolder, lighter)
Examples
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900:}
p.one { font-weight : normal; }
p.two { font-weight : bold; }
p.three { font-weight : normal; }
p.three span { font-weight : bolder; }
p.four { font-weight : bold; }
p.four span { font-weight lighter; }
p.five { font-weight : 100; }
p.six { font-weight : 200; }
font-variant
font variant, normal, small caps, inherit
Another type of variant within a font family is the small caps,
In a small -caps font the lower case letters look similar to the uppercase ones,
but in smaller size and with slightly different proportions,
The font-variant property selects that font
Value normal,
the browser displays a normal font, this is default
Value small-caps,
the browser displays a small-caps font
Value inherit,
specifies the font-variant should be inherited from the parent element
Example
p.small
{
font-variant:small-caps;
}
font-style
font-style, normal, italic, oblique, inherit
Value normal, the browser displays a normal font style, this is default
Value italic, the browser displays an italic font style
Value oblique, the browser displays an oblique font style
Value inherit,
specifies that the font-style should be inherited from the parent element
Example
p.normal {font-style:normal}
p. italic {font-style:italic}
p.oblique {font-style:oblique}
font-size
PIXELS,PERCENTAGES, OR EMS
Value xx-small, sets the font size to an xx-small size
Value x-small, sets the font-size to an extra small size
Value small, sets the font size to a small size
Value medium, sets the font size to a medium size, this is default
Value large, sets the font size to a large size
Value x-large, sets the font size to an extra large size
Value xx-large, sets the font size to an xx-large size
Value smaller, sets the font size to a smaller size than the parent element
Value larger, sets the font size to a larger size then the parent element
Value length, sets the font size to a fixed size in px, cm, etc
Value %, sets the fonts size to a percent of the parents element fonts size
Value inherit, specifies that the font size should be inherited from the parent element
Length, alone with pixels, there are several other units of length
(px, em, ex, pt, in, pc, mm, rem, vw, vh)
Absolute size, each of these values corresponds to a fixed size.
(xx-small, x-small, small, medium, large, x-large, xx-large)
Relative size, this value is relative to the surrounding text.
(smaller, larger)
Percentage, a percentage is calculated as a proportion of the parent element.
(2%,10%, 25%, 50%, 100%)
Example
h1 {font-size:250%}
h2 {font-size:200%}
p {font-size:%}
p.one { font-size : xx-small; }
p.twelve { font-size : 12px;}
p.thirteen { font-size : 3pc; }
p.fourteen { font-size : 10%; }
font-family
There are two types of font family names
1; Family-name, the name of the font-family, like "times", "courier", "Arial", etc.
2; Generic-family, the names of a generic-family like, "serif", "sans-serif", "cursive", "fantasy", "monospace".
Seperate each vale with a comma.
If a font name contains white space,
it must be quoted, single quotes must be used when using the "style" attribute in HTML. Specifies the typeface or family of the font that should be used.
Generic font name
Type of font
Example
seriffonts with serifs
Timessans-serif
fonts without serifs
Arialmonospacefixed width fonts
Couriercursivefonts that emulate handwriting
Comic sansfantasydecorative
fonts for titles and so onImpactExample p.serif
{
font-family : times, "times new roman", Serif;
}
p.sans-serif
{
font-family : arial, verdana, sans-serif;
}
}
monospace
{
font-family : courier, "courier new", monospace;
}
color/colour
colour/color/Css
CSS colors are defined using a hexadecimal (hex) notation for the combination
of Red Green Blue color values (RGB)
Hex values are written as 3 double digit numbers starting with the # sign
Initial value, depends on the user agent.
for example, your browser sets its own default colours/color for different elements
Possible values, colour.
This value can be expressed as one of the following:
keyword (for example, 'red')
RGB value-hexadecimal notation (for example #ff0000)
RGB value-functional notation
(for example rgb(255,000,000) or rgb(100%,0%, )%)
auto inherit
Example
colour/color: UK/english; USA/english
colour: red;
colour: #ff0000;;
colour: rgb(255,0,0);
colour: rgb(100%,0%0%);
These all acheive the same result
Font Category
FONT PROPERTIES
font-family
font-size
font-weight
font-style
font-variant
text-transform
colortext-decoration
Example p.ex1
{
font-:15px arial-serif;
}
p.ex2
{
font: italic bold 12px/30px Georgia, Serif:
}
z-index property specifies the stack order of an element
An element with greater stack order is always in front of an element with a lower stack order,
Note:
z-index only works on positioned elements (position:absolute, position::relative, or position: fixed)
Value auto,
sets the stack order equal to its parents, this is default
Value number,
sets the stack order of the element, Negative numbers are allowed.
Value inherit,
specifies that the z-index should be inherited from the parent element.
Example
img
{
position:absolute;
left:0px;
top:0px;
z-index:-;
}
position properties
positionz-indexExample
h2
{
position:absolute;
left:100px;
top:150px;
}
position
The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed)
Value static,
elements render in order, as they appear in the document flow, this is default
Value absolute,
the element is positioned relative to its first positioned (not static) ancestor element
Value fixed,
the element is positioned relative to the browser window
Value relative,
the element is positioned relative to its normal position, so "left:20" adds 20 pixels to the elements LEFT position
Value inherit,
the value of the position property is inherited from the parent element
Example
h2
{
position:absolute;
left:100px;
top:150px;
}
Elements and Attributes
----------------------------------
h1 About x10.mx /h1
opening tag closing tag
Creates a horizontal rule across the page
< h r /> Examples
Block level Elements.
p, h1, h2, h3, h4, h5, h6,
ul,
ol,
dl, pre, hr /, blockquote,
address,
Inline Elements.
b, i, u, em, strong, sup, sub, small, ins,
del,code, cite, dfn,kbd,va
Element Properties
New Elements in HTML5
canvas Used to draw graphics, on the fly, via scripting ()
New Media Elements
audio defines sound content

video defines a video or movie
source defines multiple media resources for video and audio
embed defines a container for an external application or interactive content (a plug-in)
track defines text tracks for video and audio
New Form Elements
datalist specifies a list of pre-defined options for input controls
keygen defines a key-pair generator field (for forms)
output defines the result of a calculation
New Semantic/Structural Elements
bdi Isolates a part of text that might be formatted in a different direction from other text outside it
command defines a command button that a user can invoke
details defines additional details that the user can view or hide
dialog defines a dialog box or window summary defines a visible heading for a details element
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 defines a header for a document or section
hgroup Groups a set of h1 to h6 elements when a heading has multiple levels
mark defines marked highlighted text
meter defines a scalar measurement within a known range (a gauge)
nav defines navigation links
progress represents the progress of a task
ruby defines a ruby annotation (for East Asian typography)
rt defines an explanation/pronunciation of characters (for East Asian typography)
rp defines what to show in browsers that do not support ruby annotations
section defines a section in a document
time defines a date/timeRemoved Elements 4.01
acronym
visibility
The visibility property specifies whether or not an element is visible.
Value visible, the element is visible, this is default
Value hidden, the element is invisible, (but still takes up space)
Value collapse, only for table elements, collapse removes a row or column,
but it does not affect the table layout, the space taken up by the row or column will be available for other content.
If collapse is used on other elements, it renders as "hidden"
Value inherit,
specifies that the value of the visibility property should be inherited from the parent element.
Example
h2
{
visibilty:hidden;
}
Layout Category
layout properties
display
float
visibility
Example
#dynamic {
visibility: hidden;
}
float
the float property specifies whether or not a box (an element) should float
Value left, the element floats to the left
Value right,
the element floats to the right
Value none,
the element is not floated, and will be displayed just where it occurs in the text, this is default
Value inherit, specifies that the value of the float should be inherited from the parent element
Example
img
{
float: right;
}
display
the display property specifies the type of box an element should generate
Value none, the element will generate no box at all
Value block, the element will generate a black box
(no line break before and after the element)
Value inline, the element will generate an inline box
(no line break before or after the element) this is default
Value inline-block, the element will generate an inline box,
laid out as inline box
Value inline-table, the element will generate an inline box
( like table, with no line break before or after)
Value list-item, the element will generate a block box,
and an inline box for the list marker
Value run-in, the element will generate a block or inline box, depending on context
Value table, the element will behave like a table
(like table, with a line break before and after)
Value table-caption, the element will behave like a table caption (like caption) Value table-cell, the element will behave like a table cell
Value table -column, the element will behave like a table column
Value table-column-group, the element will behave like a table-column-group (like colgroup)
Value table-footer-group, the element will behave like a table footer row group
Value table-header-group, the element will behave like a table-header row group
Value table-row, the element will behave like a table row
Value table-row-group, the element will behave like a table-row-group
Value inherit, specifies that the value of the display property should be inherited from the parent element
Example
p. inline
{
display: inline;
}
Border Category
border properties
border-styleborder-widthborder-color
Example
p
{
border:5px solid red;
border-width
border-width property
Value thin,
specifies a thin border
Value medium,
specifies a medium border this is default
Value thick,
specifies a thick border
Value length,allows you to define the thickness of the border
Value inherit,inherited from the parent element
Example
{
border-style:solid;
border-width:15px;
}
border-style
sets the style of the four borders
Value none, specifies no border
Value hidden, the same as "none" except in border conflict resolution for table elements
Value dotted, specifies a dotted border
Value dashed, specifies a dotted border
Value solid, specifies a solid border
Value double, specifies a double border
Value groove, specifies a 3d grooved border
Value ridge, specifies a 3d ridged border
Value inset, specifies a 3d inset border
Value outset, specifies a 3d outset border
Value inherit, specifies border should be inherited from the parent element
Example
{
border-style:solid;
}
border-color
border-color sets color of an elements four borders
Value color, specifies the background color
Value transparent, specifies that the border should be transparent this is default
Value inherit, should be inherited from the parent element
This property can have from 1 to 4 values
Examples:
border-color, red green blue pink
top border is red
right border is green
bottom border is blue
left border is pink
border-color, red green blue
top border is red
right and left borders are green
bottom border is blue
border-color, red green
top and bottom borders are red
left and right borders are green
border-color, red
all four borders are red
Box Category
box properties
marginpadding
Example
{
margin:2cm 4cm 3cm 4cm:
}
{
padding:2cm 4cm 3cm 4cm;
}
padding
sets the padding of a, p element
Value length, specifies the padding in px, pt, cm, etc default value is 0px Value %, specifies the padding in percent of the width of the containing element Value inherit, specifies that the padding should be inherited from the parent element Example
p
{ padding:2cm 4cm 3cm 4cm;
}
margin
sets all the four margins of a p element
Value auto, the browser calculates a margin
Value length, specifies a margin in px, pt, cm, etc default value is 0px
Value %, specifies a margin in percent of the width of the containing element
Value inherit, specifies that the margin should be inherited from the parent element
Example
p
{
margin:2cm 4cm 3cm 4 cm;
}
List Category
list properties
list-styles imagelist-style positionlist-style typesExample
ul
{
list-style: square url("sqpurple.gif");
}
list-style-types
the list-style-types specifies the type of list-item markers are in a list
Value circle, the marker is a circle
Value decimal-leading-zero, the marker is a number with leading zeros(01, 02, 03, etc) Value disc, the marker is a filled circle, this is default for ul
Value lower-alpha, the marker is lower-alpha(a, b, c, d, e, etc)
Value lower-latin, the marker is lower-latin (a, b, c, d, e, etc)
ist-style-position
list-item markers should appear inside the content flow (results in an extra indentation) Value inside, Indents the marker and the text, the bullet appears inside the current flow Value outside, keeps the marker to the left of the text, the bullet appears outside the content flow, this is default Value inherit, specifies the the values of the list-style-position property should be inherited from the parent element Example
ul
{
list-style-position: inside;
}
.|coffee
.|tea
INSIDE
.|Coca-Cola
|. coffee
|. tea
OUTSIDE
|. Coca-Cola
list-style-image
The list-style-image property replaces the list-item marker with an image
Value url, the path to the image to be used as a list-item marker
Value none, no image will be displayed, instead the list-style property will define what type of list marker will be rendered, this is default Value inherit, specifies that the value of the list-style-image property should br inherited from the parent element Example
ul
{
list-style-image: url('sqpurple.gif');
}
list Banner size 1040x44 pixels
A class in a php include file, one with a non standard extension, will probably show up as an undefined class.
Check and then ignore the error.
style ="clear: both" new construct
10 sup span style ="font-size: 0.8em;"1,2,3,4,5 /span /sup
10 sup span style="font-size: 0.8em;"1 /span /sup
10 sup span style="font-size: 0.8em;"2 /span /sup
10 sup span style="font-size: 0.8em;"5 /span /sup
This code will adjust the font size to the power of
sup span style="font-size: 0.8em;"
compact="compact"
checked="checked"
declare="declare"
readonly="readonly"
disabled="disabled"
selected="selected"
defer="defer"
ismap="ismap"
noshade="noshade"
nowrap="nowrap"
multiple="multiple"
noresize="noresize"
textname is not allowed in html5 option tag
wrap="virtual"is not permitted in textarea
form action="form"
visibility: show;
visibility: visible;
disabled="disabled"
wrap=virtual = out of date
readonly="readonly"
param name="loop" value="true"for windows media player
nowrap="nowrap"
pattern="[0-9]*" not allowed in xhtml input tag
ul li onmouseover="this.style.color='blue'" onmouseout="this.style.color='green'
Four Aces /li
/ul
td style white-space nowrap
textarea name="screen" rows="12" cols="70" "white-space:pre"/textarea
The nowrap attribute of td is not supported in html5
Use CSS instead.CSS syntax:
onmouseover="this.style.color='#FFFFFF';this.style.backgroundColor='#0000FF';"
onmouseout="this.style.color='#000000';this.style.backgroundColor='#FFCCFF'"
img src="..." onmouseover="this.width='someWidth'; this.height='someHeight'" onmouseout="
How to Place more than one javascript on a webpage using onload
javascript function conflicts
1 st script,
body onload="shake()"
2 nd script,
body onload="delay()"
Solution body onload="shake(); delay()"
style="white-space: pre-wrap"
style="word-wrap: inherit"
layout algorithm.
Value auto, automatic table-layout algorithm (this is default)
The column width is set by the widest unbreakable content in the cells
Can be slow, since it needs to read through all the content in the table,
before determining the final layout
Value fixed, fixed table-layout algorithm
The horizontal layout only depends on the table's width and the width of the columns,
not the contents of the cells
.Allows a browser to layout the table faster than the automatic tablet-layout
.The browser can begin to display the table once the first row has been received
Value inherit,
specifies that the value of the table-layout property should be inherited from the parent
element
Example
Table
{
table-layout: fixed;
The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML
Value collapse, borders are collapsed into a single border when possible (border-spacing and empty-cells properties will be ignored)
Value separate, borders are detached (border-spacing and empty-cells properties will not be ignored) this is default
Value inherit, specifies that the value of border-collapse property should be inherited from the parent element
Example
table
{
border-collapse: collapse;
}
}
the border-spacing property sets the distance between the borders of an adjacent cells
(only for the "separated borders" model)
Value length length, specifies the distance between the borders of adjacent cells in px, cm,
etc., negative values are not allowed
.If one length value is specified, it specifies both the horizontal and vertical spacing

If two length values are specified , the first sets the horizontal spacing and the second sets the vertical spacing

Value inherit, specifies that the value of the border-spacing property should be inherited from the parent element
Example table
{
border-collapse:seperate;
border-spacing:10px 50px;
}
caption-side

the caption-side property specifies the placement of a table caption
Value top, puts the caption above the table, this is default
Value bottom, puts the caption below the table
Value inherit, specifies that the value of the caption-side property should be inherited from the parent element
Example
caption
{
caption-side: bottom;
}
empty-cells properties
Value hide, no background or border are shown on empty cells
Value show, background and borders are shown on empty cells, this is default
Value inherit, specifies that the value of the empty-cells property should be inherited from the parent element
Example
table
{
border-collapse: separate;
empty-cells: hide;
}
table properties
border-collapseborder-spacescaption-sideempty-cellstable-layoutExample in HTML 4:
table
caption This is a simple 3x3 table caption
tr id="row1"
the Header 1 td cell 1 td cell 2
tr id="row2"
th Header 2 td cell 3 td cell 4
tr id="row3"
th Header 3 td cell 5 td cell 6
Attribute groups
input type="text" required
input type="text" required="true"
id Attribute
id="string"
id="javascript" about javascript

id="c#" about c#
Class Attribute
class="className"
class="className1 className2 className3"
Style Attribute
style="font-family: Arial; color#FF0022" hello world
Title Attribute
title="string"
reversed Attribute
ol reversed="4"
li 1. one li
li 2. two li
li 3. three li
li 4. four li
/ol
type Attribute
ol type="a"
li 1. one li
li 2. two li
li 3. three li
/ol x-axis of the background-image
Value percentage, percentage is in reference to the box of the current element
value specifies the percentage on BOTH the image and the canvas and may be negative
(eg 20% indicates the reference point 20% from the left side of the image is to be located at 20% from the left side of the elements rendering box
Value length, represents an absolute x-coordinate position for the image and may be negative
standard absolute or relative length units may be used here
left| center| right| keywords representing X-axis screen position for image placement

Example
div marked
{
background-image: url(watermark.jpg);
background-position-x: center
}
specifies the initial position on the y-axis
Value percentage,
percentage is in reference to the dimensions of the box of the element value specifies the percentage
on BOTH the image and the canvas and may be negative
(eg: 70% indicates the reference point 70% from the top side of the image is to be located at 70% from the top side of the elements rendering box

Value length, represents an absolute or relative length units may be used here
tom| middle| bottom| keywords representing y-axis screen positions for image placement
Example
body
{
background-image: url(http://www.example.com/image.gif);
background-repeat: repeat-x;
background-position-y: bottom
}
sets if a background image is fixed / scrolls with the rest of the page
Value scroll, the background image scrolls with the rest of the page this is default
Value fixed, the background image is fixed
Value inherit, specifies that the setting of the background-attachment property should be inherited from the parent element
Example
body
{
background-image ('smiley.gif');
background-repeat: no-repeat;
background-attachment:fixed;
}
sets if/how a background image will be repeated
Value repeat, the background image will be repeated both vertically and horizontally this is default
Value repeat-x, the background image will be repeated only horizontally
Value repeat-y, the background image will be repeated only vertically
Value no-repeat, the background-image will not be repeated
Value inherit, specifies that the setting of the background-repeat property should be inherited from the parent element
Example
body
{
background-image: url('paper.gif');
background-repeat: repeat-y;
}
sets the background image for an element
Value url('URL'), the URL to the image
Value none, no background image will be displayed this is default
Value inherit, specifies that the background-image should be inherited from the parent element
Example
body
{
background-image: url('paper.gif');
}
Set the background-color of different elements
Value color, specifies the background-color
Value transparent, specifies that the background-color should be transparent this is default
Value inherit, specifies that the background-color should be inherited from the parent element
Example
body
{
background-color: yellow;
}
h1
{
background-color;#00ff00; }
p
{
background-color: rgb (255,0,255);
}
background properties
background-attachmentbackground-color/colourbackground-imagebackground-repeat(x)background-position(y)background-position
Example
{
background: url(smiley.gif) top left no-repeat, url(sqorange.gif) bottom left no-repeat,
url(sqgreen.gif) bottom right no-repeat;
}