Pages

CSS Tutorial in PDF

4/11/14
If you think this PDF is worth of $5.99 value, kindly pay this little amount using a Credit Card or PayPal for the PDF.

CSS Tutorial (PDF Version)
Download CSS Tutorial (PDF Version)

Read more ...
Posted by at No comments:
Labels: ,

CSS Useful Resources

4/11/14
If you want to list down your website, book or any other resource on this page then please contact at webmaster@tutorialspoint.com


Read more ...
Posted by at No comments:
Labels: ,

CSS2 Reference Guide

4/11/14
This is a complete reference guide for web developers where haved we listed all the CSS properties defined in the World Wide Web Consortium's Recommended Specification for Cascading Style Sheets, Level 2
Click any property to see its description with examples:
PropertyDescription
azimuthDescribes the position of a sound source along the horizontal axis of the listener's environment.
backgroundComposite property for the following properties:
  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
background-attachmentDetermines if the background image is fixed in the window or scrolls as the document scrolls
background-colorSets the background color of an element
background-imageSets the background image of an element
background-positionSets the initial position of the element's background image, if specified; values normally are paired to provide x, y positions; default position is 0% 0%.
background-repeatDetermines how the background image is repeated (tiled) across an element
borderSets all four of an element's borders; value is one or more of a color, a value for border-width, and a value for border-style
border-bottomSets an element's bottom border; value is one or more of a color, a value for border-bottom-width, and a value for border-style
border-bottom-widthSets the thickness of an element's bottom border.
border-collapseSets the table border rendering algorithm
border-colorSets the color of all four of an element's borders; default is the color of the element
border-left-colorSets the color of an element's left borders; default is the color of the element
border-right-colorSets the color of an element's right borders; default is the color of the element
border-top-colorSets the color of an element's top borders; default is the color of the element
border-bottom-colorSets the color of an element's bottom borders; default is the color of the element
border-leftSets an element's left border; value is one or more of a color, a value for border-left-width, and a value for border-style.
border-left-widthSets the thickness of an element's left border
border-rightSets an element's right border; value is one or more of a color, a value for border-right-width, and a value for border-style.
border-right-widthSets the thickness of an element's right border
border-spacingWith separate borders set the spacing between borders. One value sets vertical and horizontal spacing and two values sets horizontal and vertical spacing respectively.
border-styleSets the style of all four of an element's borders
border-topSets an element's top border; value is one or more of a color, a value for border-top-width, and a value for border-style
border-top-widthSets the thickness of an element's top border.
border-widthSets the thickness of all four of an element's borders
bottomUsed with the position property to place the bottom edge of an element
caption-sideSets the position for a table caption
clearSets which margins of an element must not be adjacent to a floating element; the element is moved down until that margin is clear
clipSets the clipping mask for an element
colorSets the color of an element
contentInserts generated content around an element.
counter-incrementIncrements a counter by 1; value is a list of counter names, with each name optionally followed by a value by which it is incremented.
counter-resetResets a counter to zero; value is a list of counter names, with each name optionally followed by a value to which it is reset.
cue-afterPlays the designated sound after an element is spoken
cue-beforePlays the designated sound before an element is spoken
cursorDefines shap of the cursor
directionDefines direction of the flow of an element content
displayControls how an element is displayed
elevationSets the height at which a sound is played
empty-cellsWith separate borders, hides empty cells in a table
floatDetermines if an element floats to the left or right, allowing text to wrap around it or be displayed inline
fontSets all the font attributes for an element. Value is any of the values for:
  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family
font-familyDefines the font for an element, either as a specific font or as one of the generic serif, sans-serif, cursive, fantasy, and monospace.
font-sizeDefines the font size
font-size-adjustAdjusts the current font's aspect ratio
font-stretchDetermines the amount to stretch the current font
font-styleDefines the style of the face, either normal or some type of slanted style
font-variantDefines a font to be in small caps
font-weightDefines the font weight . if a number is used, it must be a multiple of 100 between 100 and 900; 400 is normal, 700 is the same as the keyword bold
heightDefines the height of an element
leftUsed with the position property to place the left edge of an element
letter-spacingInserts additional space between text characters
line-heightSets the distance between adjacent text baselines
list-styleDefines list-related styles using any of the values for:
  • list-style-image
  • liststyle-position
  • list-style-type
list-style-imageDefines an image to be used as a list item's marker, in lieu of the value for:
  • list-style-type
list-style-positionIndents or extends (default) a list item's marker with respect to the item's content
list-style-typeDefines a list item's marker either for unordered lists (circle, disc, or square) or for ordered lists (decimal, loweralpha, lower-roman, none, upper-alpha, or upper-roman)
marginDefines all four of an element's margins
margin-bottomDefines the bottom margin of an element. Default value is 0.
margin-leftDefines the left margin of an element. Default value is 0.
margin-rightDefines the right margin of an element. Default value is 0.
margin-topDefines the top margin of an element. Default value is 0.
marker-offsetThe marker-offset property can be used in bulleted lists for specifying the distance between the nearest border edges of a marker box (or bullet) and its associated principal box.
marksThe marks property is used to set crop marks and cross marks on paged media. This is used with the @page rule.
max-heightmax-height property is used to constrain the height of an element.
max-widthmax-width property is used to set the maximum width of an element.
min-heightmin-height property is used to constrain the height of an element.
min-widthmin-width property is used to constrain the width of an element.
orphansSets the minimum number of lines allowed in an orphaned paragraph fragment
outlineThe outline property is a shorthand property to specify all outline properties.
outline-colorThe outline-color property is used to specify the color of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular.
outline-color-styleThe outline-style property is used to specify the style of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular.
outline-widthThe outline-color property is used to specify the color of the outline. Note that, unlike the border property, outline does not take up extra space and it can be non-rectangular.
overflowDetermines how overflow content is rendered
paddingDefines all four padding amounts around an element
padding-bottomDefines the bottom padding of an element. Default value is 0
padding-leftDefines the left padding of an element. Default value is 0
padding-rightDefines the right padding of an element. Default value is 0
padding-topDefines the top padding of an element. Default value is 0
pageAssociates a named page layout with an element
page-break-afterForces or suppresses page breaks after an element.
page-break-beforeForces or suppresses page breaks before an element.
page-break-insideSuppresses page breaks within an element
pauseThe pause property is CSS shorthand for specifying shorthand property for specifying pauses in aural media.
pause-afterPauses a media after speaking an element
pause-beforePauses a media before speaking an element
pitchSets the average pitch of an element's spoken content
pitch-rangeSets the range of the pitch, from 0 (flat) to 100 (broad); default is 50
play-duringIf a URL is provided, it is played during an element's spoken content . specifying repeat loops the audio; mix causes it to mix with, rather than replace, other background audio.
positionSets the positioning model for an element
quotesSets the quote symbols used to quote text
richnessSets the richness of the voice, from 0 (flat) to 100 (mellifluous); default is 50
rightUsed with the position property to place the right edge of an element.
sizeThe size property is used in paged media to specify the size of the page.
speakDetermines how an element's content is spoken.
speak-headerDetermines if table headers are spoken once for each row or column or each time a cell is spoken.
speak-numeralDetermines how numerals are spoken
speak-punctuationDetermines if punctuation is spoken or used for inflection
speech-rateSets the rate of speech; a number sets the rate in words per minute
stressSets the stress of the voice, from 0 (catatonic) to 100 (hyperactive); default is 50.
table-layoutDetermines the table-rendering algorithm
text-alignSets the text alignment style for an element
text-decorationDefines any decoration for the text; values may be combined
text-indentDefines the indentation of the first line of text in an element; default is 0
text-shadowCreates text drop shadows of varying colors and offsets
text-transformTransforms the text in the element accordingly
topUsed with the position property to place the top edge of an element.
vertical-alignSets the vertical positioning of an element
visibilityDetermines if an element is visible in the document or table
voice-familySelects a named voice family to speak an element's content
volumeSets the volume of spoken content; numeric values range from 0 to 100
white-spaceDefines how whitespace within an element is handled
widowsSets the minimum number of lines allowed in a widowed paragraph fragment
widthDefines the width of an element
word-spacingInserts additional space between words
z-indexSets the rendering layer for the current element.

Pseudo-classes & Pseudo-elements:

PropertyDescription
:activeUse this class to add special effect to an activated element
:focusUse this class to add special effect to an element while the element has focus
:hoverUse this class to add special effect to an element when you mouse over it
:linkUse this class to add special effect to an unvisited link
:visitedUse this class to add special effect to a visited link
:first-childUse this class to add special effect to an element that is the first child of some other element.
:langUse this class to specify a language to use in a specified element
:first-letterUse this element to add special effect to the first letter of a text
:first-lineUse this element to add special effect to the first line of a text
:beforeUse this element to insert some content before an element
:afterUse this element to insert some content after an element
Read more ...
Posted by at No comments:
Labels: ,

Javascript Array unshift() Method

4/7/14

Description:

Javascript array unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

Syntax:

array.unshift( element1, ..., elementN );
Here is the detail of parameters:
  • element1, ..., elementN : The elements to add to the front of the array.

Return Value:

Returns the length of the new array. This returns undefined in IE browser.

Example:

<html>
<head>
<title>JavaScript Array unshift Method</title>
</head>
<body>
<script type="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");

var length = arr.unshift("water");
document.write("Returned array is : " + arr );
document.write("<br /> Length of the array is : " + length );

</script>
</body>
</html>
This will produce following result:
Returned array is : water,orange,mango,banana,sugar
Length of the array is : 5
Read more ...
Posted by at No comments:
Labels: ,

Javascript Array toString() Method

4/7/14

Description:

Javascript array toString() method returns a string representing the source code of the specified array and its elements.

Syntax:

array.toString();
Here is the detail of parameters:
  • NA

Return Value:

Returns a string representing the array.

Example:

<html>
<head>
<title>JavaScript Array toString Method</title>
</head>
<body>
<script type="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");

var str = arr.toString();
document.write("Returned string is : " + str );

</script>
</body>
</html>
This will produce following result:
Returned string is : orange,mango,banana,sugar
Read more ...
Posted by at No comments:
Labels: ,

Javascript Array splice() Method

4/7/14

Description:

Javascript array splice() method changes the content of an array, adding new elements while removing old elements.

Syntax:

array.splice(index, howMany, [element1][, ..., elementN]);
Here is the detail of parameters:
  • index : Index at which to start changing the array.
  • howMany : An integer indicating the number of old array elements to remove. If howMany is 0, no elements are removed.
  • element1, ..., elementN : The elements to add to the array. If you don't specify any elements, splice simply removes elements from the array.

Return Value:

Returns the extracted array based on the passed parameters.

Example:

<html>
<head>
<title>JavaScript Array splice Method</title>
</head>
<body>
<script type="text/javascript">
var arr = ["orange", "mango", "banana", "sugar", "tea"];

var removed = arr.splice(2, 0, "water");
document.write("After adding 1: " + arr );
document.write("<br />removed is: " + removed);

removed = arr.splice(3, 1);
document.write("<br />After adding 1: " + arr );
document.write("<br />removed is: " + removed);

</script>
</body>
</html>
This will produce following result:
After adding 1: orange,mango,water,banana,sugar,tea
removed is: 
After adding 1: orange,mango,water,sugar,tea
removed is: banana
Read more ...
Posted by at No comments:
Labels: ,

Javascript Array sort() Method

4/7/14

Description:

Javascript array sort() method sorts the elements of an array.

Syntax:

array.sort( compareFunction );
Here is the detail of parameters:
  • compareFunction : Specifies a function that defines the sort order. If omitted, the array is sorted lexicographically.

Return Value:

Returns a sorted array.

Example:

<html>
<head>
<title>JavaScript Array sort Method</title>
</head>
<body>
<script type="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");

var sorted = arr.sort();
document.write("Returned string is : " + sorted );

</script>
</body>
</html>
This will produce following result:
Returned array is : banana,mango,orange,sugar
Read more ...
Posted by at No comments:
Labels: ,

Javascript Array toSource() Method

4/7/14

Description:

Javascript array toSource() method returns a string representing the source code of the array. This method is supported by Mozilla.

Syntax:

array.toSource();
Here is the detail of parameters:
  • NA

Return Value:

Returns a string representing the source code of the array.

Example:

<html>
<head>
<title>JavaScript Array toSource Method</title>
</head>
<body>
<script type="text/javascript">
var arr = new Array("orange", "mango", "banana", "sugar");

var str = arr.toSource();
document.write("Returned string is : " + str );

</script>
</body>
</html>
This will produce following result:
Returned string is : ["orange", "mango", "banana", "sugar"]
Read more ...
Posted by at No comments:
Labels: ,

Javascript Array some() Method

4/7/14

Description:

Javascript array some() method tests whether some element in the array passes the test implemented by the provided function.

Syntax:

array.some(callback[, thisObject]);
Here is the detail of parameters:
  • callback : Function to test for each element.
  • thisObject : Object to use as this when executing callback.

Return Value:

If some element pass the test then it returns true otherwise false.

Compatibility:

This method is a JavaScript extension to the ECMA-262 standard; as such it may not be present in other implementations of the standard. To make it work you need to add following code at the top of your script:
if (!Array.prototype.some)
{
  Array.prototype.some = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this &&
          fun.call(thisp, this[i], i, this))
        return true;
    }

    return false;
  };
}

Example:

<html>
<head>
<title>JavaScript Array some Method</title>
</head>
<body>
<script type="text/javascript">
if (!Array.prototype.some)
{
  Array.prototype.some = function(fun /*, thisp*/)
  {
    var len = this.length;
    if (typeof fun != "function")
      throw new TypeError();

    var thisp = arguments[1];
    for (var i = 0; i < len; i++)
    {
      if (i in this &&
          fun.call(thisp, this[i], i, this))
        return true;
    }

    return false;
  };
}

function isBigEnough(element, index, array) {
  return (element >= 10);
}

var retval = [2, 5, 8, 1, 4].some(isBigEnough);
document.write("Returned value is : " + retval );

var retval = [12, 5, 8, 1, 4].some(isBigEnough);
document.write("<br />Returned value is : " + retval );
</script>
</body>
</html>
This will produce following result:
Returned value is : false
Returned value is : true
Read more ...
Posted by at No comments:
Labels: ,

Javascript Array slice() Method

4/7/14

Description:

Javascript array slice() method extracts a section of an array and returns a new array.

Syntax:

array.slice( begin [,end] );
Here is the detail of parameters:
  • begin : Zero-based index at which to begin extraction. As a negative index, start indicates an offset from the end of the sequence.
  • end : Zero-based index at which to end extraction.

Return Value:

Returns the extracted array based on the passed parameters.

Example:

<html>
<head>
<title>JavaScript Array slice Method</title>
</head>
<body>
<script type="text/javascript">
var arr = ["orange", "mango", "banana", "sugar", "tea"];
document.write("arr.slice( 1, 2) : " + arr.slice( 1, 2) ); 
document.write("<br />arr.slice( 1, 3) : " + arr.slice( 1, 3) ); 
</script>
</body>
</html>
This will produce following result:
arr.slice( 1, 2) : mango
arr.slice( 1, 3) : mango,banana
Read more ...
Posted by at No comments:
Labels: ,

Javascript Array shift() Method

4/7/14

Description:

Javascript array shift() method removes the first element from an array and returns that element.

Syntax:

array.shift();
Here is the detail of parameters:
  • NA

Return Value:

Returns the removed single value of the array.

Example:

<html>
<head>
<title>JavaScript Array shift Method</title>
</head>
<body>
<script type="text/javascript">
var element = [105, 1, 2, 3].shift();
document.write("Removed element is : " + element ); 
</script>
</body>
</html>
This will produce following result:
Removed element is : 105
Read more ...
Posted by at No comments:
Labels: ,
Subscribe to: Posts (Atom)

Related Posts

  • CSS Useful Resources
    If you want to list down your website, book or any other resource on this page then please contact at webmaster@tutorialspoint.com CSS 1...
  • CSS2 Reference Guide
    This is a complete reference guide for web developers where haved we listed all the CSS properties defined in the World Wide Web Consortium...
  • Javascript String - anchor() Method
    Description: This method creates an HTML anchor that is used as a hypertext target. Syntax: string .anchor( anchorname ) Here is ...
  • CSS Tutorial in PDF
    If you think this PDF is worth of $5.99 value, kindly pay this little amount using a Credit Card or PayPal for the PDF. Download CSS Tu...
  • Javascript String - localeCompare() Method
    Description: This method returns a number indicating whether a reference string comes before or after or is the same as the given string ...
  • Javascript Array unshift() Method
    Description: Javascript array  unshift()  method adds one or more elements to the beginning of an array and returns the new length of the...
  • Javascript Boolean valueOf() Method
    Description: Javascript boolean  valueOf()  method returns the primitive value of the specified  boolean object.. Syntax: boolean .va...
  • Javascript Number - toLocaleString()
    Description: This method converts a  number  object, into a human readable string representing the number using the locale of the environ...
  • Javascript Array toString() Method
    Description: Javascript array  toString()  method returns a string representing the source code of the specified array and its elements. ...
  • Javascript Array splice() Method
    Description: Javascript array  splice()  method changes the content of an array, adding new elements while removing old elements. Synta...