Vaishno Devi

Album2

New Photo

CSS Tutorial for Beginner....

CSS3 BACKGROUNDS

The background property is a shorthand property for setting all background properties in one declaration.

Example

body {background: #FF0000}
body {background: url(stars.gif) no-repeat top}
body {background: #00FF00 url(stars.gif) no-repeat fixed top}

CSS BACKGROUND-ATTACHMENT

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.

Example

body
{
background-image: url(stars.gif);
background-attachment: scroll
}

CSS BACKGROUND-COLOR

The background-color property sets the background color of an element.

Example

p {background-color: #00ff00}

CSS BACKGROUND-IMAGE

The background-image property sets an image as the background.

Example

body {
background-image: url(stars.gif);
background-color: #000000
}

CSS BACKGROUND-POSITION

The background-position property sets the starting position of a background image.

Example

body
{
background-image: url(stars.gif);
background-repeat: no-repeat;
background-position: top left
}
body
{
background-image: url(stars.gif);
background-repeat: no-repeat;
background-position: 0% 0%
}

CSS BACKGROUND-POSITION-X

If a ‘background-image’ is specified, this property specifies the initial position on the X-axis of the background image specified in the browser window if it is not continuously tiled in the element’s rendering box. A minimum value for this property indicates the left side of the rendering box, and a maximum value is at the right side. The Y-axis component of the background position can be specified using the ‘background’, ‘background-position’ or ‘background-position-y’ properties.

Example

div.marked {
background-image: url(watermark.jpg);
background-position-x: center
}

CSS BACKGROUND-POSITION-Y

If a ‘background-image’ is specified, this property specifies the initial position on the Y-axis of the background image specified in the browser window if it is not continuously tiled in the element’s rendering box. A minimum value for this property indicates the upper side of the rendering box, and a maximum value is at the lower side. The X-axis component of the background position can be specified using the ‘background’, ‘background-position’ or ‘background-position-x’ properties.

Example

body
{
background-image: url(http://www.example.com/image.gif);
background-repeat: repeat-x;
background-position-y: bottom
}

CSS BACKGROUND-REPEAT

The background-repeat property sets if/how a background image will be repeated.

Example

body {
background-image: url(stars.gif);
background-repeat: repeat-x
}

CSS BORDER

This is a shorthand property which allows an author to specify the border-width, border-style, and border-color for all the borders of an element’s rendering box at once. Unlike the ‘margin’ and ‘padding’ properties, this property cannot specify different values for each side. To do this, use the properties for each side instead (’border-top’, ‘border-right’, ‘border-bottom’ and ‘border-left’.)

Example

blockquote { border: medium dashed #ff0000 }

CSS BORDER-BOTTOM

This is a shorthand property which allows an author to specify the border-width, border-style, and border-color for the bottom border of an element. If no color is specified, the value will be taken from the ‘color’ property.

Example

div.out { border-bottom: 10px outset #ffffff }

CSS BORDER-BOTTOM-COLOR

This property controls the color of the bottom border of an element’s rendering box. If no border-color is specified for an element’s border, the value of the ‘color’ property is used instead.

Example

div { border-bottom-color: green }

CSS BORDER-BOTTOM-STYLE

This property controls the line style of the bottom border of an element’s rendering box. Browsers that support this property are allowed to treat values of dotted, dashed, groove, ridge, inset, outset and double as the value solid.

Example

strong { border-bottom-style: groove }

CSS BORDER-BOTTOM-WIDTH

This property controls the thickness (width) of the bottom border of an element’s rendering box. Negative values are not allowed.

Example

strong { border-bottom-width: medium }

CSS BORDER-COLLAPSE

The rendering of table borders is divided into two categories in CSS2 – “collapsed” and “separated”. This property specifies which border rendering mode to use. In the collapsed border model, adjacent table cells share borders. In the separated model, adjacent cells each have their own distinct borders

Example

table { border: medium double red; border-collapse: separate; border-spacing: 9pt 4pt }

CSS BORDER-COLOR

This is a shorthand property which allows an author to specify ‘border-top-color’, ‘border-right-color’, ‘border-bottom-color’, and ‘border-left-color’ properties using a single property and value notation (the values are given in this order separated by spaces.) If one or more of the values are not present, the value for a missing side is taken from the opposite side that is present. If only one value is listed, it applies to all sides. If no border-color is specified for an element’s border, the value of the ‘color’ property is used instead.

Example

em { border-color: blue }

CSS BORDER-LEFT

This is a shorthand property which allows an author to specify the border-width, border-style, and border-color for the left border of an element. If no color is specified, the value will be taken from the ‘color’ property.

Example

div.out { border-left: 10px outset #ffffff }

CSS BORDER-LEFT-COLOR

This property controls the color of the left border of an element’s rendering box. If no border-color is specified for an element’s border, the value of the ‘color’ property is used instead.

Example

div { border-left-color: green }

CSS BORDER-LEFT-STYLE

This property controls the line style of the left border of an element’s rendering box. Browsers that support this property are allowed to treat values of dotted, dashed, groove, ridge, inset, outset and double as the value solid.

Example

strong { border-left-style: groove }

CSS BORDER-LEFT-WIDTH

This property controls the thickness (width) of the left border of an element’s rendering box. Negative values are not allowed.

Example

strong { border-left-width: 5mm }

CSS BORDER-RIGHT

This is a shorthand property which allows an author to specify the border-width, border-style, and border-color for the right border of an element. If no color is specified, the value will be taken from the ‘color’ property.

b>Example

div.out { border-right: 10px outset #ffffff }

CSS BORDER-RIGHT-COLOR

This property controls the color of the top border of an element’s rendering box. If no border-color is specified for an element’s border, the value of the ‘color’ property is used instead.

Example

div { border-right-color: green }

CSS BORDER-RIGHT-STYLE

This property controls the line style of the right border of an element’s rendering box. Browsers that support this property are allowed to treat values of dotted, dashed, groove, ridge, inset, outset and double as the value solid.

Example

strong { border-right-style: groove }

CSS BORDER-RIGHT-WIDTH

This property controls the thickness (width) of the right border of an element’s rendering box. Negative values are not allowed.

Example

strong { border-right-width: 10px }

CSS BORDER-SPACING

This property specifies the distance between the borders of adjacent table cells in the “separated borders” model. The space between table cells uses the background color/image specified for the explicit or assigned TABLE element.

Example

table { border: medium double red; border-collapse: separate; border-spacing: 10pt 5pt }

CSS BORDER-STYLE

This is a shorthand property which allows an author to specify ‘border-top-style’, ‘border-right-style’, ‘border-bottom-style’, and ‘border-left-style’ properties using a single property and value notation (the values are given in this order separated by spaces.) If one or more of the values are not present, the value for a missing side is taken from the opposite side that is present. If only one value is listed, it applies to all sides.

Example

strong { border-style: groove inset solid none }

CSS BORDER-TOP

This is a shorthand property which allows an author to specify the border-width, border-style, and border-color for the top border of an element. If no color is specified, the value will be taken from the ‘color’ property.

Example

div.out { border-top: 10px outset #ffffff }

CSS BORDER-TOP-COLOR

This property controls the color of the top border of an element’s rendering box. If no border-color is specified for an element’s border, the value of the ‘color’ property is used instead.

Example

div { border-top-color: green }

CSS BORDER-TOP-STYLE

This property controls the line style of the top border of an element’s rendering box. Browsers that support this property are allowed to treat values of dotted, dashed, groove, ridge, inset, outset and double as the value solid.

Example

strong { border-top-style: groove }

CSS BORDER-TOP-WIDTH

This property controls the thickness (width) of the top border of an element’s rendering box. Negative values are not allowed.

Example

strong { border-top-width: thin }

CSS BORDER-WIDTH

This is a shorthand property which allows an author to specify ‘border-top-width’, ‘border-right-width’, ‘border-bottom-width’, and ‘border-left-width’ properties using a single property and value notation (the values are given in this order separated by spaces.) If one or more of the values are not present, the value for a missing side is taken from the opposite side that is present. If only one value is listed, it applies to all sides.

Example

strong { border-width: thick thin }

CSS BOTTOM

This describes the vertical offset for the bottom edge of the absolutely positioned element box from the bottom edge of the element’s containing block. For relatively positioned boxes, the offsets are relative to where the box would appear normally in the document flow. Positive values are above the parent block’s bottom edge and negative values are below.

Example

h2 { display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px }

CSS CAPTION-SIDE

This property specifies the position of elements with an intrinsic (HTML CAPTION elements) or assigned ‘display’ property value of “table-caption” in relation to the table rendering box they are assigned to. Alignment within the table caption is accomplished using the ‘text-align’ and ‘vertical-align’ properties.

Example

caption { caption-side: right }

CSS CLEAR

This property specifies whether the current element allows floated elements occuring earlier in the document to float along its sides. The values for this property indicate which sides of the element do not allow floating elements. If the current element has any floating sub-elements, the property does not apply to them.

Example

address { clear: both }

CSS COLOR

The color property sets the color of a text.

Example

body {color: rgb(255,255,0)}
body {color: #ffffff}

body {color: red}

CSS CONTENT

This property automatically generates content to attach before/after a CSS selector (using the :before and :after pseudo-elements.) One or more keywords may be specified for this property, but the content does not actually exist in the document tree; it is generated “on-the-fly.” The ‘display’ property is used with this property to specify the type of rendering box for the generated content.

Example

em:before { content: url(”ding.wav”) }

CSS CURSOR

This property controls the type of cursor that is used when a pointing device is over an element. Accepts a comma separated list of the below values. Browsers should attempt to first use the cursor indicated on the left, working to the right until it has a cursor it can use.

Example

blockquote { cursor: help }

CSS DIRECTION

Text in some languages flows from right to left, while many other languages flow from left to right. There will inevitably be cases where left to right text and right to left content must be intermingled. Unicode allows for a complex process of determining the directional flow of content based on properties of the characters and content, as well as explicit controls for language “embeddings” and directional overrides. This algorithm should be used with bi-directional content as formatted by CSS. The ‘unicode-bidi’ and ‘direction’ properties specify how document content maps to the Unicode algorithm.

Example

div { unicode-bidi: embed; direction: rtl }

CSS DISPLAY

This property specifies the type of rendering box used for an element. In a language such as HTML where existing elements have well-defined behavior, default ‘display’ property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. In languages where display behavior is not defined (like XML), the default value is ‘inline’.

Example

p { display: block }

CSS FILTER

This property creates an extensible mechanism allowing special visual effects to be applied to content. There are currently three categories of filters – Visual filters and Reveal/Blend Transition filters. Multiple filters can be applied to a selector to produce interesting results, with the order of application often playing an important role in the final visual result. Current filters only apply in a visual context, but the extensibility of the property could allow for other capabilities.

Example

img { filter: blur(strength=50) flipv() }

CSS FLOAT

Floating elements are elements whose rendering boxes are shifted to the left or right side of the current line. Content boxes that follow are rendered along the side of the floated element; down the right side of elements floated to the left, and down the left side of elements floated to the right. This property controls this floating behavior, specifying an element float to the left, right, or not at all. For correct rendering, a floated element needs to have an intrinsic or assigned ‘width’ value.

Example

img.test { float: left }

CSS FONT

With CSS you are given great control over the way your text is displayed. You can change the size, color, style, and more. You probably already knew how to make text bold or underlined, but did you know you could resize the size of your font using percentages? Let us begin the lesson with an easy and important font attribute, color!

Example

p {font: 12px arial}
p {font: italic small-caps bold 12px arial}
p {font: oblique small-caps 900 12px/14px arial}
p {font: menu}

CSS FONT-FAMILY

Font families can be divided into two groups: serif and san serif. A san serif font does not include the small lines at the end of characters, while a serif font does include these small lines. When choosing which kind you prefer, remember that studies have shown that sans serif fonts are much easier to read on a computer monitor as opposed to a serif font.

Example

body {font-family: courier, serif}
p {font-family: arial, “lucida console”, sans-serif}

CSS FONT-SIZE

You can manipulate the size of your fonts by using values, percentages, or key terms. Using values are useful if you do not want the user to be able to increase the size of the font because your site will look incorrect if they did so. Percentages are great when you want to change the default font, but do not want to set a static value

Example

body {font-size: x-large}
p {font-size: 10px}

CSS FONT-SIZE-ADJUST

Specifies an aspect value for an element that will preserve the x-height of the first-choice font. If the aspect value is high, the font will be legible when it is set to a smaller size.

Example

h2 {font-size-adjust: 0.58}

CSS FONT-STRETCH

The font-stretch property is used to expand or contract (condense) the horizontal width of the font. The change is relative to the normal width of the font as displayed by the browser.

Example

h2 {font-stretch: ultra-condensed}

CSS FONT-STYLE

CSS Font-Style is where you define if your font will be italic or not. Possible key terms are the following: italic, oblique, and normal.

Example

body {font-style: italic}

CSS FONT-VARIANT

CSS Font Variant allows you to convert your font to all small caps. Note: not every font supports CSS Font Variant, so be sure to test before you publish.

Example

p {font-variant: small-caps}

CSS FONT-WEIGHT

If you want to control the weight of your font ( its thickness ), using font weight is the best way to go about it. We suggest that you only use font-weight in multiples of 100 (e.g. 200, 300, etc) because any less and you probably will not see any difference. The values range from 100(thin)-900(thick).

Example

p {font-weight: bold}

CSS HEIGHT

This property specifies the height of an element’s rendering box for block-level and replaced elements (for other types of elements, height calculations are taken from their inherited or assigned ‘line-height’ value.)

If an element’s computed height is greater than that specified by the ‘height’ property, the content will overflow the rendering box according to the ‘overflow’ property. Negative values for the ‘height’ property are not allowed.

In addition to the ‘height’ property, two other properties – ‘min-height’ and ‘max-height’ – place constraints on the allowed value for an element’s rendering box height. The ‘height’ value is first computed without consideration for these other two properties. If the computed value is greater than the ‘max-height’ value or less than the ‘min-height’ value, the height is re-calculated using the ‘max-height’ or ‘min-height’ as the new ‘height’ value.

Example

img.class1 { height: 75px; width: 75px }

CSS IME-MODE

This property controls the state of the state of an Input Method Editor (IME) for user text entry fields. An IME is used in Asian languages to assist in the creation of characters from a large character set, using an entry device that contains only a small subset or an entirely different set of characters than the larger character set.

Example

input { ime-mode: deactivated }

CSS INCLUDE-SOURCE

This property inserts another document into the current document, replacing the current element’s content. Any elements or CSS properties applied to or inherited by the current element are applied to the inserted content as well.

Example

div {
position: absolute;
top: 100px; left: 300px;
width: 200px; height: 200px;
border: thin solid black;
include-source: url(http://www.example.com/testpage.htm);
}

CSS LAYER-BACKGROUND-COLOR

This value sets the background-color for the entire region of the current element. This proprietary property behaves in Netscape the way the ‘background-color’ property SHOULD behave, while the actual ‘background-color’ behavior is buggy in this regard. This property was invented to create the correct behavior.

Examples

div {
position: absolute;
top: 100px; left: 300px;
width: 200px; border: thin solid black;
background-color: blue; layer-background-color: blue;
}

CSS LAYER-BACKGROUND-IMAGE

This value sets the background-image for the entire region of the current element. This proprietary property behaves in Netscape the way the ‘background-image’ property SHOULD behave, while the actual ‘background-image’ behavior is buggy in this regard. This property was invented to create the correct behavior.

Examples

div {
position: absolute;
top: 100px; left: 300px;
width: 200px; border: thin solid black;
background-image: url(bg2.gif);
layer-background-image: url(bg1.gif);
}

CSS LAYOUT-FLOW

This property controls the direction and flow of the content in an element. Its use is deprecated in favor of the ‘writing-mode’ property which accomplishes the same purpose.

Example

div { layout-flow: vertical-ideographic; }

CSS LAYOUT-GRID

Asian languages often employ page layout for characters to achieve better visual formatting using a one or two-dimensional grid. The ‘layout-grid’ property is a shorthand method used to set the ‘layout-grid-mode’, ‘layout-grid-type’, ‘layout-grid-line’, ‘layout-grid-char’, and ‘layout-grid-char-spacing’ properties using a single property notation.

Example

div { layout-grid: both loose 15px 15px 2cm }

CSS LAYOUT-GRID-CHAR

Asian languages often employ page layout for characters for better visual formatting using a one or two-dimensional grid. This property controls the size of the character grid for the layout of an element’s text content when the ‘layout-grid-mode’ is set to ‘line’ or ‘both’. Visually, this property has an effect similar to the ‘line-height’ property.

Example

div { layout-grid-mode: line; layout-grid-char: 12px }

CSS LEFT

This describes the horizontal offset for the left edge of the absolutely positioned element box from the left edge of the element’s containing block. For relatively positioned boxes, the offsets are relative to where the box would appear normally in the document flow. Positive values are to the right of the parent block’s left edge and negative values are to the left.

Example

h2 { display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px }

CSS LETTER-SPACING

Specify the exact value of the spacing between your letters. Letter-spacing works best when pixels are used to define the spacing.

Examples

p {letter-spacing: 12px}
p {letter-spacing: -0.5px}

CSS LINE HEIGHT

This property specifies the height of an in-line element box. If the ‘line-height’ value is greater than the value of the ‘font-size’ for the element, this difference (called the “leading”) is cut in half (called the “half-leading”) and distributed evenly on the top and bottom of the in-line box. In this manner, the content of an in-line element box is centered within the line-box (assuming no ‘vertical-align’ property is also set to change this behavior.) Negative values for this property are not allowed. This property is also a component of the ‘font’ shorthand property.

Example

div.test { line-height: 160%; font-size: 10pt }

CSS LINE-BREAK

The Japanese language has especially strict rules regarding the conditions and characters after which a line may be broken. This property controls whether or not this strict line-breaking behavior is used.

Example

div { line-break: strict }

CSS LIST-STYLE

This shorthand property is used when the author wishes to change the default display characteristics of list-markers in HTML list structures. An author can specify location of the marker, a graphic to be used and/or a standard set of symbols. Keywords may come in any order, but using multiple keywords that control the same behavior is not allowed. If a [list-style-image] is specified for the list marker, it will be used in place of any [list-style-type] also specified. Nevertheless, a [list-style-type] should always be specified in the event the [list-style-image] can not be loaded. A value of ‘none’ for the ‘list-style’ property should set both ‘list-style-type’ and ‘list-style-image’ to ‘none.’

Example

ul { list-style: square inside url(http://www.foo.com/bullet.gif) }

CSS LIST-STYLE-IMAGE

This property indicates a graphic to be used for the list markers in the list structure. This should override the default appearance of list-markers in the current HTML list structure. If a ‘list-style-image’ is given a value of ‘none’ or the URL can not be loaded, the ‘list-style-type’ will be used in its place. The ‘list-style-type’ should always be specified in the event the URL pointed to in ‘list-style-image’ can not be loaded

Example

ul { list-style-image: url(http://www.example.com/pic.gif) }

CSS LIST-STYLE-POSITION

This property determines how the list-marker is rendered in relation to the content of the list item

Example

ul { list-style-position: inside }

CSS LIST-STYLE-TYPE

This property is used when the author wishes to change the default appearance of list-markers in HTML list structures. If a ‘list-style-image’ property is also given and it has a value of ‘none’ or the URL can not be loaded, the ‘list-style-type’ property value will be used in its place. This property should always be specified in the event the URL pointed to in ‘list-style-image’ can not be loaded. If a value for this property is not understood, the value ‘decimal’ should be used

Example

ul { list-style-type: square }

CSS MARGIN

This is a shorthand property which allows an author to specify ‘margin-top’, ‘margin-right’, ‘margin-bottom’, and ‘margin-left’ properties using a single property and value notation (the values are given in this order separated by spaces.) If one or more of the values are not present, the value for a missing side is taken from the opposite side that is present. If only one value is listed, it applies to all sides.

Example

body { margin: 5px 0px 2px 25px }

CSS MARGIN-BOTTOM

This property controls the size of the bottom margin of an element’s rendering box. Negative values are allowed. Margins are transparent and the background value of the parent element shines through.

Example

blockquote { margin-bottom: 3.0in }

CSS MARGIN-LEFT

This property controls the size of the left margin of an element’s rendering box. Negative values are allowed. Margins are transparent and the background value of the parent element shines through.

Example

h5 { margin-left: 1.0cm }

CSS MARGIN-RIGHT

This property controls the size of the right margin of an element’s rendering box. Negative values are allowed. Margins are transparent and the background value of the parent element shines through.

Example

h1 { margin-right: auto }

CSS MARGIN-TOP

This property controls the size of the top margin of an element’s rendering box. Negative values are allowed. Margins are transparent and the background value of the parent element shines through.

Example

address { margin-top: 33% }

CSS MAX-HEIGHT

This property allows a maximum height to be set for an element box. The calculation for the element’s height may be less than this value, but if the calculated ‘height’ value is above this value it will recompute the ‘height’ using the ‘max-height’ value as the new ‘height’ value. If the value of ‘min-height’ is greater than the value of ‘max-height’, the ‘max-height’ property value becomes the ‘min-height’ value.

Example

h5 { max-height: 150px }

CSS MAX-WIDTH

This property allows a maximum width to be set for an element box. The calculation for the element’s width may be less than this value, but if the calculated ‘width’ value is above this value it will recompute the ‘width’ using the ‘max-width’ value as the new ‘width’ value. If the value of ‘min-width’ is greater than the value of ‘max-width’, the ‘max-width’ property value becomes the ‘min-width’ value.

Example

h5 { max-width: 150px }

CSS MIN-HEIGHT

This property allows a minimum height to be set for an element box. The calculation for the element’s height may be greater than this value, but if the value falls below this value it will recompute the height based on the ‘min-height’ value. If the value of ‘min-height’ is greater than the value of ‘max-height’, the ‘max-height’ property value becomes the ‘min-height’ value. If the calculated value for the ‘height’ property is less than the ‘min-height’ value, the calculations are done again using the ‘min-height’ value as the value for the ‘height’ property.

Example

h5 { min-height: 100px }

CSS MIN-WIDTH

This property allows a minimum width to be set for an element box. The calculation for the element’s width may be greater than this value, but if the value falls below this value it will recompute the width based on the ‘min-width’ value. If the value of ‘min-width’ is greater than the value of ‘max-width’, the ‘max-width’ property value becomes the ‘min-width’ value. If the calculated value for the ‘width’ property is less than the ‘min-width’ value, the calculations are done again using the ‘min-width’ value as the value for the ‘width’ property.

Example

h5 { min-width: 100px }

CSS OUTLINE-COLOR

The ‘outline-color’ property specifies a color for the outline for an element.

The outline properties create a uniform line around an object in order to draw visual attention. An outline is slightly different than a border in several ways: An outline is drawn starting “just outside the border edge” and is allowed to be non-rectangular. Outlines are always rendered on TOP of an element’s rendering box and do not influence the box’s position or size calculation; the document does not need to be re-flowed when a border is rendered or hidden, but the outline may overlap other nearby elements.

Example

img { outline-color: black }

CSS OUTLINE-STYLE

The ‘outline-style’ property specifies an outline line style for the current element.

Example

button { outline-style: ridge }

CSS OUTLINE-WIDTH

The ‘outline-width’ property specifies the width for the outline of an element.

The outline properties create a uniform line around an object in order to draw visual attention. An outline is slightly different than a border in several ways: An outline is drawn starting “just outside the border edge” and is allowed to be non-rectangular. Outlines are always rendered on TOP of an element’s rendering box and do not influence the box’s position or size calculation; the document does not need to be re-flowed when a border is rendered or hidden, but the outline may overlap other nearby elements

Example

input { outline-width: thin }

CSS OVERFLOW

Some content in an element may fall outside the element’s rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the ‘overflow’ property describes what to do with the content outside the elements rendering area.

Example

blockquote { width: 50px; height: 50px; overflow: scroll }

CSS OVERFLOW-X

Some content in an element may fall outside the element’s rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the ‘overflow-x’ property describes what to do with the content that exceeds the element’s width.

Example

blockquote { width: 50px; height: 50px; overflow-x: scroll }

CSS OVERFLOW-Y

Some content in an element may fall outside the element’s rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the ‘overflow-y’ property describes what to do with the content that exceeds the element’s height.

Example

blockquote { width: 50px; height: 50px; overflow-y: scroll }

CSS PADDING

This is a shorthand property which allows an author to specify ‘padding-top’, ‘padding-right’, ‘padding-bottom’, and ‘padding-left’ properties using a single property and value notation (the values are given in this order separated by spaces.) If one or more of the values are not present, the value for a missing side is taken from the opposite side that is present. If only one value is listed, it applies to all sides. The rendered surface of the padding area is taken from the ‘background’ property.

Example

body { padding: 5px 5px 2px 25px }

CSS PADDING-BOTTOM

This property controls the size of the bottom padding of an element’s rendering box. Negative values are not allowed.

Example

blockquote { padding-bottom: 3em }

CSS PADDING-LEFT

This property controls the size of the left padding of an element’s rendering box. Negative values are not allowed.

Example

blockquote { padding-left: 3em }

CSS PADDING-RIGHT

This property controls the size of the right padding of an element’s rendering box. Negative values are not allowed.

Example

blockquote { padding-right: 3em }

CSS PADDING-TOP

This property controls the size of the top padding of an element’s rendering box. Negative values are not allowed.

Example

blockquote { padding-top: 3em }

CSS POSITION

This property determines whether normal, relative or absolute positioning methods are used to render the current element box.

Example

h2 { display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px }

CSS RIGHT

This describes the horizontal offset for the right edge of the absolutely positioned element box from the right edge of the element’s containing block. For relatively positioned boxes, the offsets are relative to where the box would appear normally in the document flow. Positive values are to the left of the parent block’s right edge and negative values are to the right.

Example

h2 { display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px }

CSS SCROLLBAR-3DLIGHT-COLOR

This property describes the color of the outer top and left bevel edges (the normally lighter portion of the “highlights”) of the scrollbar arrows and scroll bar slider box portions of a scroll bar

Example

body { scrollbar-3dlight-color: #ffff00 }

CSS SCROLLBAR-ARROW-COLOR

This property describes the color of the scrollbar directional arrows of a scroll bar when they are activate-able. When scrllbars appear but are not usable, this property does not control the arrow color in this state.

Example

body { scrollbar-arrow-color: green }

CSS SCROLLBAR-BASE-COLOR

This property describes the color of the button face of the scrollbar arrow widgets, the button face color of the slider widget and half of the dither colors for the scrollbar slider tray

Example

body { scrollbar-base-color: blue }

CSS SCROLLBAR-DARKSHADOW-COLOR

This property describes the color of the outer bottom and right bevel edges (the normally darker portion of the “shadows”) of the scrollbar arrows and scroll bar slider box portions of a scroll bar

Example

body { scrollbar-darkshadow-color: #00ffff }

CSS SCROLLBAR-FACE-COLOR

This property describes the color for the button face of the scrollbar arrow widgets, the button face color of the slider widget and the main color of the inactive square at the bottom/right corner of the scrolled box. This property has no effect on the scrollbar tray/track that the scrollbar slider widget travels in

Example

body { scrollbar-face-color: red }

CSS SCROLLBAR-HIGHLIGHT-COLOR

This property describes the color of the inner top and left bevel edges (the normally darker portion of the “highlights”) of the scrollbar arrows, the scroll bar slider box, and half of the dither pattern color of the scrollbar slider tray area (the other half of the dither is taken from the OS default button face color.)

Example

body { scrollbar-highlight-color: yellow }

CSS SCROLLBAR-SHADOW-COLOR

This property describes the color of the inner bottom and right bevel edges (the normally lighter portion of the “shadows”) of the scrollbar arrows and scroll bar slider box portions of a scroll bar

Example

body { scrollbar-shadow-color: #ff00ff }

CSS SCROLLBAR-TRACK-COLOR

This property describes the solid color of the scrollbar track

Example

body { scrollbar-track-color: #ff00ff }

CSS SIZE

This property describes the orientation or dimensions of the page box. The ’size’ property classifies a page box so that it is either ‘relative’ or ‘absolute’. ‘Absolute’ page boxes have a fixed size, whereas ‘relative’ page boxes will be scaled to fit the target paged media. In the case where a page box is smaller than the intended ’size’, CSS2 recommends that it be centered on the page to allow for better alignment of multiple pages.

Example

body { size: 8.5in 11in }

CSS TABLE-LAYOUT

This property controls the layout algorithm used to render table structures.

Using the “automatic” layout algorithm (the table algorithm used by default in most browsers today), all of the table content is required in order to determine the final table layout. For larger quantities of tabular data, this can be MUCH slower than the “fixed” table layout algorithm, especially since more than one analysis might need to be performed on the table data. However, this algorithm does find sufficient minimum and maximum widths for each column, allowing all content in the table’s data cells to be appropriately rendered as specified by the author.

Example

table { table-layout: fixed }

CSS TEXT-ALIGN

The text-align property aligns the text in an element.

Example

p {text-align: center}

CSS TEXT-ALIGN-LAST

This property can be used in conjunction with the ‘text-align’ property, but the value specified overrides the effects of that property on the horizontal alignment of the last or only rendered line of an element.

Example

div { text-align: justify; text-align-last: right}

CSS TEXT-AUTOSPACE

This property controls the autospacing and narrow space width adjustment behavior of text. Ideographs are used in many Asian writing systems to represent concepts rather than letters or phonetic strings, and their interpretation may be context-sensitive. This property allows for spacing rules to take into account the presence of ideographs in document content.

Example

div { text-autospace: ideograph-numeric; }

CSS TEXT-DECORATION

This property describes the appearance characteristics of text that are not specified with the ‘font-style’ and ‘font-weight’ properties. The color of the text-decoration is taken from the ‘color’ property for the element. The characteristics of this property ARE used by child elements if the parent element is set to block. If this property is specified for an element/section containing no text (like the IMG element) or is empty, this property has no effect. Browsers may treat unknown values as underline.

Example

p {text-decoration: underline}

CSS TEXT-INDENT

This property specifies the horizontal indent from the left side of the current parent Block Element for the first line in the current Block. The indent is only applied at the beginning of the block and not after any intervening line-breaking elements (like BR.)

Example

p {text-indent: 18px}
p {text-indent: -11px}

CSS TEXT-JUSTIFY

This property appears to offer a refinement on the “justify” value used in the ‘text-align’ property. Indeed, the “justify” value must be set for that property for ‘text-justify’ to have any effect.

Example

div { text-align: justify; text-justify: newspaper }

CSS TEXT-OVERFLOW

Some content in an element may fall outside the element’s rendering box for a number of reasons (negative margins, absolute positioning, content exceeding the width/height set for an element, etc.) In cases where this occurs, the ‘overflow’ (set to “hidden” or “scroll” for this property to have an effect), and ‘clip’ properties define what content will be visible.

Example

div { position: absolute; left: 20px; top: 50px; width: 120px; height: 50px; border: thin solid black; overflow: hidden; text-overflow: ellipsis }

CSS TEXT-SHADOW

This property defines one or more comma-separated shadow effects to be applied to the text content of the current element. Effects consist of a shadow color, a maximum blurring radius for the shadow effect and x/y offset of the shadow effect from the element content. Multiple effects are applied to the element in the order specified in the property. Effects can overlap each other, but they should never overlap the text content.

Example

blockquote { text-shadow: blue 2px 2px, red -2px -2px }

CSS TEXT-TRANSFORM

This property sets the casing style for a section of text. Content may not be affected if it is not in the ISO 8859-1 character set or does not have an applicable alternate case character to convert to.

Example

p {text-transform: uppercase}

CSS TEXT-UNDERLINE-POSITION

Sets or retrieves the position of the underline decoration that is set through the textDecoration property of the object.

The auto and auto-pos values apply to this property as of Internet Explorer 6. The default value of this property is auto as of Internet Explorer 6. With Internet Explorer 5.5, the default value of this property is below.

Example

p { text-underline-position: above; text-decoration: underline }

CSS TOP

This describes the vertical offset for the top edge of the absolutely positioned element box from the top edge of the element’s containing block. For relatively positioned boxes, the offsets are relative to where the box would appear normally in the document flow. Positive values are below the parent block’s top edge and negative values are above.

Example

h2 { display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px }

CSS VERTICAL-ALIGN

Element content is typically vertically centered on a rendered line (with extra line-height amounts distributed equally on the top and bottom.) This property allows in-line content boxes to be vertically aligned with respect to several different criteria on a rendered line.

Example

img.left { vertical-align: top }

CSS VISIBILITY

This property controls whether the content of an element box is rendered (including the borders and backgrounds.) If an element box is invisible it still affects document layout as if it were visible (to prevent an element box from affecting layout, the ‘display’ property should be set to ‘none’.)

Example

p { visibility: hidden }

CSS WIDTH

This property specifies the width of an element’s rendering box for block-level and replaced elements. Negative values are not allowed.

In addition to the ‘width’ property, two other properties – ‘min-width’ and ‘max-width’ – place constraints on the allowed value for an element’s rendering box width. The ‘width’ value is first computed without consideration for these other two properties. If the computed value is greater than the ‘max-width’ value or less than the ‘min-width’ value, the width is re-calculated using the ‘max-width’ or ‘min-width’ as the new ‘width’ value.

Example

img.class1 { height: 75px; width: 75px }

CSS WORD-BREAK

This property controls the line breaking behavior within words. It is especially useful in cases where multiple languages are used within an element.

Example

div { word-break: keep-all }

CSS WORD-SPACING

Specify the exact value of the spacing between your words. Word-spacing works best when pixels are used as the spacing value.

Example

p {word-spacing: 30px}
p {word-spacing: -0.5px}

CSS WORD-WRAP

This property specifies whether the current rendered line should break if the content exceeds the boundary of the specified rendering box for an element (this is similar in some ways to the ‘clip’ and ‘overflow’ properties in intent.) This property should only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.

Example

div { word-wrap: break-word }

CSS Z-INDEX

Positioning of elements in CSS occurs in three dimensions, not just two. The third dimension is perpendicular to the screen, giving the screen a sense of depth. Elements can be overlapped, with “higher”, or “closer” elements obscuring elements that are “lower” or “farther away” (element transparency becomes an important issue with this capability.) The placement of elements along this third ‘z-axis’ is exactly what this property controls.

Example

h2 { display: block; position: absolute; top: 20px; right: 50px; bottom: 20px; left: 50px; z-index: 3 }

My Pic...........

JavaScript

Simple JavaScript code for Image Gallery
JavaScript Code....


HTML Code....



Simple JavaScript code for Tabing
function showDIV(num){
var cont = document.getElementById('test');
for(i=0;i<=cont.getElementsByTagName('div').length;i++){
if(i==num){
cont.getElementsByTagName('div'[i]).style.display = "";
cont.getElementsByTagName('a')[i].style.textDecoration = "underline";
cont.getElementsByTagName('a')[i].style.backgroundColor = "#EEEEEE";
cont.getElementsByTagName('a')[i].style.border = "1px #AAAAAA solid";
}
else{
cont.getElementsByTagName('div')[i].style.display = "none";
cont.getElementsByTagName('a')[i].style.testDecaration = "none";
cont.getElementsByTagName('a')[i].style.backgroundColor = "#FF0000";
cont.getElementsByTagName('a')[i].style.border = "none";
cont.getElementsByTagName('a')[i].style.fontWeight = "normal";
}
}
}

Simple JavaScript code for Random Image

HTML Code....


JavaScript Code....
function golak(){
var arr = new Array("slide1.jpg", "slide2.jpg","slide3.jpg", "slide4.jpg", "slide5.jpg");
var a = arr.length;
var rnd = Math.floor(a*Math.random());
document.r_img.src = arr[rnd];
}

CSS-Hacks

CSS-Hacks for Opacity:----

#DIV_alpha{
width:200px;
height:200px;
background-color:#FF0000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}

CSS-Hacks for MIN-Height:----

#DIV_minHeight{
width:200px;
min-height:200px;
height:auto !important;
height:200px;
float:left;
}