Mukesh Chapagain's Blog » HTML http://blog.chapagain.com.np PHP Magento jQuery SQL Wordpress Joomla Programming & Tutorial Tue, 07 Feb 2012 00:54:41 +0000 en hourly 1 http://wordpress.org/?v=3.1.3 Javascript: How to Submit form and Change form action? http://blog.chapagain.com.np/javascript-how-to-submit-form-and-change-form-action/ http://blog.chapagain.com.np/javascript-how-to-submit-form-and-change-form-action/#comments Mon, 02 Jan 2012 17:59:53 +0000 Mukesh http://blog.chapagain.com.np/?p=1539 Related posts:
  1. Javascript: Add Remove HTML elements
  2. Javascript: Show Hide textbox text on focus
  3. print_r in Javascript
  4. Javascript: Show/Hide HTML elements
  5. Magento: How to change or reorder top links?
]]> This article will show you how to submit form and change form action using javascript. This is a very simple trick but it’s very useful and frequently used.

Submit Form using Javascript

HTML form

<form name="myForm" action="http://google.com" method="get">
	Search: <input type="text" name="q" />
	<button onclick="javascript: submitForm()">Search</button>
</form>

Javascript function

function submitForm()
{
  document.myForm.submit();
}

Change form action using Javascript

HTML form

<form name="newForm" method="get" onSubmit="formAction(this)">
	Search: <input type="text" name="q" />
	<input type="submit" name="search" value="Search">
</form>

Javascript function

function formAction()
{
  document.newForm.action = "http://google.com";
}

Full Source Code

<html>
	<head>
		<title>Javascript and Forms</title>
		<script type="text/javascript">
			function submitForm()
			{
			  document.myForm.submit();
			}

			function formAction()
			{
			  document.newForm.action = "http://google.com";
			}
		</script>
	</head>
	<body>
		<p>
			Example 1: Submitting form through Javascript
			<form name="myForm" action="http://google.com" method="get">
				Search: <input type="text" name="q" />
				<button onclick="javascript: submitForm()">Search</button>
			</form>
		</p>

		<p>
			Example 2: Changing form action through Javascript
			<form name="newForm" method="get" onSubmit="formAction(this)">
				Search: <input type="text" name="q" />
				<input type="submit" name="search" value="Search">
			</form>
		</p>
	</body>
</html>

Hope it helps. Thanks.

Copyright © 2011
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)

Related posts:

  1. Javascript: Add Remove HTML elements
  2. Javascript: Show Hide textbox text on focus
  3. print_r in Javascript
  4. Javascript: Show/Hide HTML elements
  5. Magento: How to change or reorder top links?

]]> http://blog.chapagain.com.np/javascript-how-to-submit-form-and-change-form-action/feed/ 0 Javascript: Show/Hide HTML elements http://blog.chapagain.com.np/javascript-showhide-html-elements/ http://blog.chapagain.com.np/javascript-showhide-html-elements/#comments Fri, 27 Nov 2009 12:26:51 +0000 Mukesh http://blog.chapagain.com.np/?p=277 Related posts:
  1. Javascript: Add Remove HTML elements
  2. Javascript: Show Hide textbox text on focus
  3. print_r in Javascript
  4. Javascript: How to Submit form and Change form action?
  5. How to get(view) html source code of a website
]]> Here, I will be demonstrating on showing or hiding a div when a link is clicked. I have done this with Javascript and CSS.

I have called showHideDiv() Js function when the link is clicked. The display of the div where content is present, is visible or hidden on each click. For this, CSS styling is used (display: none).

The code follows:


<div>
	<a onclick="showHideDiv()" style="cursor:pointer">Show / Hide</a>
	<div id="addTag" style="display:none">This is a test.</div>
</div>

<script type="text/javascript" language="javascript">
	function showHideDiv()
	{
		if(document.getElementById('addTag').style.display == "none") {
			document.getElementById('addTag').style.display = "";
		}
		else {
			document.getElementById('addTag').style.display = "none";
		}
	}
</script>

Try, Implement and Enjoy!

Copyright © 2011
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)

Related posts:

  1. Javascript: Add Remove HTML elements
  2. Javascript: Show Hide textbox text on focus
  3. print_r in Javascript
  4. Javascript: How to Submit form and Change form action?
  5. How to get(view) html source code of a website

]]> http://blog.chapagain.com.np/javascript-showhide-html-elements/feed/ 2 Javascript: Add Remove HTML elements http://blog.chapagain.com.np/javascript-add-remove-html-elements/ http://blog.chapagain.com.np/javascript-add-remove-html-elements/#comments Tue, 17 Nov 2009 13:53:05 +0000 Mukesh http://blog.chapagain.com.np/?p=244 Related posts:
  1. Javascript: Show/Hide HTML elements
  2. print_r in Javascript
  3. Javascript: How to Submit form and Change form action?
  4. Website statistic (User Information) in Javascript
  5. Go back link in Javascript
]]> You can add html elements dynamically with Javascript. In this article, I will show you how to do so. I have created two Javascript functions. One for creating html elements and the other for removing them.

In my html elements, I have created ‘li’ and ‘strong’ elements inside ‘div’. The div id is ‘summary’. I have written comment in the code so that it would be easy to understand.

Javascript function to create html elements:-

function createSummary(title,content) {
	// get div id
	var summaryOptions = document.getElementById('summary');

	// create new <li>
	var newLi = document.createElement('li');
	var liIdName = title;
	// set <li> attribute id
	newLi.setAttribute('id',liIdName);

	// create new element <strong>
	var newStrong = document.createElement('strong');
	var strongIdName = title+" strong";
	// assign id to <strong>
	newStrong.setAttribute('id',strongIdName);

	// adding parameter 'title' value inside <strong>
	newStrong.innerHTML = title;
	// adding <strong> inside div
	summaryOptions.appendChild(newStrong);

	// adding parameter 'content' value inside <li>
	newLi.innerHTML = content;
	// adding <li> inside div
	summaryOptions.appendChild(newLi);
}

Javascript function to remove html elements:-

function removeSummary(title) {
	var summaryOptions = document.getElementById('summary');
	var childLi = document.getElementById(title);
	var childStrong = document.getElementById(title+" strong");

	// remove <li>
	if(childLi) {
	summaryOptions.removeChild(childLi);
	}

	// remove strong <strong>
	if(childStrong) {
	summaryOptions.removeChild(childStrong);
	}
}

Full code is as under:-


<html>
<head>
<title>Test</title>
<script language="javascript" type="text/javascript">
function createSummary(title,content) {
	// get div id
	var summaryOptions = document.getElementById('summary');

	// create new <li>
	var newLi = document.createElement('li');
	var liIdName = title;
	// set <li> attribute id
	newLi.setAttribute('id',liIdName);

	// create new element <strong>
	var newStrong = document.createElement('strong');
	var strongIdName = title+" strong";
	// assign id to <strong>
	newStrong.setAttribute('id',strongIdName);

	// adding parameter 'title' value inside <strong>
	newStrong.innerHTML = title;
	// adding <strong> inside div
	summaryOptions.appendChild(newStrong);

	// adding parameter 'content' value inside <li>
	newLi.innerHTML = content;
	// adding <li> inside div
	summaryOptions.appendChild(newLi);
}

function removeSummary(title) {
	var summaryOptions = document.getElementById('summary');
	var childLi = document.getElementById(title);
	var childStrong = document.getElementById(title+" strong");

	// remove <li>
	if(childLi) {
		summaryOptions.removeChild(childLi);
	}

	// remove <strong>
	if(childStrong) {
		summaryOptions.removeChild(childStrong);
	}
}
</script>
</head>

<body>

<input type="button" value="Show" onclick="createSummary('This is title','This is content.')" />
<input type="button" value="Remove" onclick="removeSummary('This is title')" />
<div id="summary" style="border:1px solid #CCCCCC; width:400px; ">&amp;nbsp;</div>

</body>
</html>
Copyright © 2011
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)

Related posts:

  1. Javascript: Show/Hide HTML elements
  2. print_r in Javascript
  3. Javascript: How to Submit form and Change form action?
  4. Website statistic (User Information) in Javascript
  5. Go back link in Javascript

]]> http://blog.chapagain.com.np/javascript-add-remove-html-elements/feed/ 0 How to change the source code and modify/parse a website? http://blog.chapagain.com.np/how-to-change-the-source-code-and-modifyparse-a-website/ http://blog.chapagain.com.np/how-to-change-the-source-code-and-modifyparse-a-website/#comments Fri, 14 Nov 2008 07:45:48 +0000 Mukesh http://blog.chapagain.com.np/?p=77 Related posts:
  1. How to get(view) html source code of a website
  2. PHP: Parse Unparse String Array
  3. PHP source code encoding with ionCube PHP Encoder
  4. PHP: Read Write CSV
  5. jQuery: How to replace string, div content and image src?
]]> Earlier I had written an article on How to get(view) html source code of a website . I had created an application and that would grab the html code of any website. In this article, I will be writing on how you can modify the looks of a website by changing the html source code after you grab it.

At first the html source code getting part. I have commented in the code for better understanding.

// storing the domain name posted in a variable
$domain = $_POST['domain'];

// fopen(string filename, "r") opens for reading only; place the file pointer at the beginning of the file.
$handle = fopen("http://$domain","r");

$contents = '';

// feof() Tests for end-of-file on a file pointer
// Returns TRUE if the file pointer is at EOF or an error occurs (including socket timeout); otherwise returns FALSE.
while (!feof($handle)) {

// string fread ( resource handle, int length )
// fread() reads up to length bytes from the file pointer referenced by handle. Reading stops when up to length bytes have been read, EOF (end of file) is reached
$contents .= fread($handle, 8192);
}
//var_dump($contents);

fclose($handle);

Now, the modification in the source code part. I have used ereg_replace() function for the modification.

// You have the html source code in the variable $code
$code = $_POST['code'];

// $present consits of the text present in the html source code that is to be replaced
$present = $_POST['present'];

// $replace consits of the text that you are going to replace $present with
$replace = $_POST['replace'];

// string ereg_replace ( string pattern, string replacement, string string )
// This function scans string for matches to pattern, then replaces the matched text with replacement.
// The modified string is returned. (Which may mean that the original string is returned if there are no matches to be replaced.)
$code = ereg_replace($present, $replace , $code);

// string stripslashes ( string str )
// Returns a string with backslashes stripped off. (\' becomes ' and so on.) Double backslashes (\\) are made into a single backslash (\).
// This is useful if you are using slashes in $present or in $replace
echo stripslashes($code);

exit;

Download | View Demo

Thank You

Copyright © 2011
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)

Related posts:

  1. How to get(view) html source code of a website
  2. PHP: Parse Unparse String Array
  3. PHP source code encoding with ionCube PHP Encoder
  4. PHP: Read Write CSV
  5. jQuery: How to replace string, div content and image src?

]]> http://blog.chapagain.com.np/how-to-change-the-source-code-and-modifyparse-a-website/feed/ 1 How to get(view) html source code of a website http://blog.chapagain.com.np/how-to-get-html-source-code-of-a-website/ http://blog.chapagain.com.np/how-to-get-html-source-code-of-a-website/#comments Wed, 02 Jul 2008 12:49:52 +0000 Mukesh http://blog.chapagain.com.np/?p=65 Related posts:
  1. How to change the source code and modify/parse a website?
  2. PHP: Read Write CSV
  3. PHP source code encoding with ionCube PHP Encoder
  4. Javascript: Add Remove HTML elements
  5. Creating dynamic table in PHP : Easy and Simple tutorial
]]> In this article, I will be illustrating about getting html source code of any website. I have done this in PHP.

I created an html form for submitting the website url. After the url is submitted, the PHP code does all the magic to display full html source code of that particular website. The source code is displayed in a textarea.

$domain = $_POST['domain'];

$handle = fopen(“http://$domain”,”r”);

//$contents = stream_get_contents($handle);

$contents = ”;

while (!feof($handle)) {

$contents .= fread($handle, 8192);

}

fclose($handle);

At first the website url submitted through the html form is opened with fopen(). Then, using while loop, the $contents string variable is populated (concatenated) until the end of file is reached. Finally, the file/url pointer is closed with fclose().

You can also get all the contents without using loop. You can get it with the stream_get_contents() function. But this function is only supported by PHP 5+. stream_get_contents() operates on an already open stream resource and returns the remaining contents in a string. stream_get_contents() will not work in PHP versions lower than PHP 5. If you are using PHP versions lower than PHP 5, then better not use it.

Description of functions used:

fopen() opens the url. The mode used here (i.e. ‘r’) is read mode.

feof() tests for end-of-file on a file pointer. It returns true if the file pointer is at EOF; otherwise it returns false.

fread() reads up to length bytes from the file pointer referenced by handle. Reading stops when up to length bytes have been read, EOF (end of file) is reached, (for network streams) when a packet becomes available, or (after opening userspace stream) when 8192 bytes have been read whichever comes first.

fclose() closes an open file pointer.

View it live

Full source code:

<?php
if(isset($_POST['submit']))
{
$domain = $_POST['domain'];
$handle = fopen("http://$domain","r");
//$contents = stream_get_contents($handle);
$contents = '';
while (!feof($handle)) {
$contents .= fread($handle, 8192);
}
//var_dump($contents);
}</p>
?></p>
<html>
<head>
<title>HTML Source Code Viewer</title>
</head>
<body></p>
<h2>
HTML Source Code Viewer
</h2></p>
<form method="post" name="pageform" action="" onsubmit="return validate(this);"></p>
<table border="0" style="border-collapse: collapse" width="">
<tr>
<td width="" height="91" valign="top">
<table style="border-collapse: collapse" width="" class="tooltop" height="76"></p>
<tr>
<td>
<table border="0" style="border-collapse: collapse" width="" cellspacing="5">
<tr>
<td height="28" width="100"><font size="2"><b>View source of</b></font><b><font size="2">:
</font></b></td>
<td height="28" width="">
<font size="1">http://</font><input type="text" name="domain" size="26" value="<?=$_POST['domain']?>"></td>
<td height="28" width="">
<input type="submit" name="submit" value="View!" style="float: left"></td>
</tr>
<tr>
<td width="" height="21">&nbsp;</td>
<td width="" colspan="2" height="21" valign="top"><font size="1">(eg. chapagain.com.np)</font></td></p>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<?php
if(isset($_POST['submit']))
{
?>
<tr>
<td>
<textarea rows="10" cols="60" name="code"><?=$contents?></textarea>
</td>
</tr>
<?php
}
?>
</table>
</form>
<script language="JavaScript">
function validate(theform) {
if (theform.domain.value == "") { alert("No Domain"); return false; }
return true;
}
</script>

</body>
</html>

Copyright © 2011
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)

Related posts:

  1. How to change the source code and modify/parse a website?
  2. PHP: Read Write CSV
  3. PHP source code encoding with ionCube PHP Encoder
  4. Javascript: Add Remove HTML elements
  5. Creating dynamic table in PHP : Easy and Simple tutorial

]]> http://blog.chapagain.com.np/how-to-get-html-source-code-of-a-website/feed/ 4 Creating dynamic table in PHP : Easy and Simple tutorial http://blog.chapagain.com.np/creating-dynamic-table-in-php/ http://blog.chapagain.com.np/creating-dynamic-table-in-php/#comments Sun, 09 Dec 2007 05:04:22 +0000 Mukesh http://blog.chapagain.com.np/2007/12/09/creating-dynamic-table-in-php/ Related posts:
  1. Add, edit, delete, login, register in PHP :: A simple and complete tutorial
  2. PHP: How to get stock quote data from Yahoo! Finance? (Complete Code and Tutorial)
  3. Alter MySQL table to add & drop column & add Foreign Key
  4. Simple and easy jQuery tabs with AJAX and PHP
  5. Very simple add, edit, delete, display in PHP
]]> Problem:

I want to create a dynamic table with a row starting after certain number of columns, i.e. like, i want to create an html table which automatically generate new row after 3 columns in a row.

Solution:

$content = array(1, 2, 3, 4, 5, 6, 7, 8, 9);
<table border="1" width="50%">
<tr>
	<?php
	$counter = 0;
	foreach($content as $data) {
		if($counter != 0 && $counter%3 == 0) {
			?>
			</tr><tr>
			<?php
		}
		?>
		<td>
			<?php echo $data; ?>
		</td>
		<?php
		$counter++;
	}
?>
</tr>
</table>

Here, $content is an array of 9 numbers (1 to 9). The array value can be any. You can have your custom array with your custom values. I have looped through the array and printed data in a html table. I have created new row after 3 columns have been created.

Happy PHPing!

Copyright © 2011
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)

Related posts:

  1. Add, edit, delete, login, register in PHP :: A simple and complete tutorial
  2. PHP: How to get stock quote data from Yahoo! Finance? (Complete Code and Tutorial)
  3. Alter MySQL table to add & drop column & add Foreign Key
  4. Simple and easy jQuery tabs with AJAX and PHP
  5. Very simple add, edit, delete, display in PHP

]]> http://blog.chapagain.com.np/creating-dynamic-table-in-php/feed/ 1 What are Meta-Tags? Full Description of Meta tags http://blog.chapagain.com.np/meta-tags/ http://blog.chapagain.com.np/meta-tags/#comments Tue, 17 Jul 2007 06:41:50 +0000 mukeshChapagain http://blog.chapagain.com.np/?p=11 Related posts:
  1. Dynamically change page title and meta tags in C#
  2. Magento: Show/Hide website to search engines by adjusting robots meta tag
  3. Magento: Set/Change page layout, title tag, meta keywords and description
  4. Magento: Set title, keywords and description in your module
  5. WordPress: Archive link not working
]]> Meta tags are HTML tags which provide information that describes the content of the webpage a user will be viewing.

Meta tags have two possible attributes:

a)

b)

(Note: I have used my name and my links in many of the examples below. Don’t forget to put your own name and description there.)

a) HTTP-EQUIV Tags

Meta tags with an HTTP-EQUIV attribute are equivalent to HTTP headers. Typically, they control the action of browsers, and may be used to refine the information provided by the actual headers. They are:-

Expires

The date and time after which the document should be considered expired.

Content-Type

This gives the character set.

Content-Script-Type

Specifies the default scripting language in a document.

Content-Style-Type

Specifies the default stylesheet language for the document.

Content-language

Used to declare the natural language of the document. May be used by robots to categorize by language. Languages are specified as the pair (language-dialect); here below, English-British (en-GB)

Refresh

Specifies a delay in seconds before the browser automatically reloads the document. Optionally, specifies an alternative URL to load.

Pragma

This tag tells IE not to cache the page.

b) NAME attributes

Meta tags with a name attribute are used for other types which do not correspond to HTTP Headers. They are:-

Robots

Controls web robots on a per-page basis, whether to index a page or not (index/noindex), and whether to follow links on the page or not (follow/nofollow). You can use these in any combination you want.

- index, follow – Default value. Page will be indexed, and links on the page will be followed.

- index, nofollow – Page will be indexed, but any links on the page will not be followed.

- noindex, follow – Page will not be indexed, but links on the page will be followed.

- noindex,nofollow – Page will not be indexed, and links on the page will not be followed.

Description

A short, plain language description of the document. Keep it short and to the point.

Keywords

Keywords are used by search engine to index our document in addition to words from the title and document body. It lets you specify keywords people might use when looking for your site. Enter as many as you can think of, but don’t repeat each word more than once.

Author

The author’s name.

Copyright

A copyright statement.

Rating

A way to say that your site is family safe.

Revisit-after

This tells the search engine to come back again and re-index your site every 10 days (in case of this example)

Distribution

Classification

What kind of directory heading does this come under.

Reply-to

Enjoy!!!

Copyright © 2011
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)

Related posts:

  1. Dynamically change page title and meta tags in C#
  2. Magento: Show/Hide website to search engines by adjusting robots meta tag
  3. Magento: Set/Change page layout, title tag, meta keywords and description
  4. Magento: Set title, keywords and description in your module
  5. WordPress: Archive link not working

]]> http://blog.chapagain.com.np/meta-tags/feed/ 0 Cascading StyleSheet (CSS) :: Property Value Pairs http://blog.chapagain.com.np/cascading-stylesheet-css-property-value-pairs/ http://blog.chapagain.com.np/cascading-stylesheet-css-property-value-pairs/#comments Fri, 23 Mar 2007 10:08:14 +0000 mukeshChapagain http://blog.chapagain.com.np/?p=6 Related posts:
  1. Page.IsPostBack property: A solution to the client postback problem
  2. What are Meta-Tags? Full Description of Meta tags
  3. jQuery: Grey out background and preview image as popup
  4. How to get(view) html source code of a website
  5. How to setup Google AdSense for your website
]]> CSS Syntax Introduction

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color: black}

If the value is multiple words, put quotes around the value:

p {font-family: “sans serif”}

If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:

p {text-align:center;color:red}

Properties

The different categories of property are explained below:

Text style properties

These properties affect how text appears on a page. The different text style properties are as under:

color

- sets the foreground color of an element

- {color: aqua}

- {color: black} (default)

- {color: blue}

- {color: fuchsia}

- {color: #808080}

- {color: maroon}

- {color: #ffa500}

font-weight

- the weight of the font is how bold it is

- {font-weight: normal} (default)

- {font-weight: bold}

- {font-weight: bolder} (use of relative keywords: bolder, lighter)

- {font-weight: lighter}

- bolder specifies that the text should be one degree bolder than the parent element and lighter specifies that the text should be one degree lighter than parent element

- {font-weight: 100} (use of numeric values: 100,200,300,400,500,600,700,800,900)

- Each value is one degree bolder than the previous value. normal is equivalent to 400 and bold is equivalent to 700.

font-family

- this property specifies a hierarchy list of preferred fonts that a browser should use to draw the element

- {font-family: Verdana, Arial, Helvetica, sans-serif}

font-size

- specifies how large text appears on a web page.

- {font-size: 2point} (abbrev. pt)

- {font-size: 2em} (abbrev. em)

- {font-size: 2ex} (abbrev. ex)

- {font-size: 2pica} (abbrev. pc)

- {font-size: 2pixel} (abbrev. px)

- {font-size: 2inche} (abbrev. in)

- {font-size: 10millimeter} (abbrev. mm)

- {font-size: 5centimeter} (abbrev. cm)

- {font-size: small}

- {font-size: larger}

- {font-size: smaller}

- {font-size: xx-small}

- {font-size: x-small}

- {font-size: medium} (default)

- {font-size: large}

- {font-size: x-large}

- {font-size: xx-large}

font-variant

- this specifies that the text should appear in small capitals

- {font-variant: normal } (default)

- {font-variant: small-caps}

- normal specifies that the text should appear using capital or lowercase letters as it appears in source and small-caps specifies that the lower case letters (but not capitals) should appear as small capital letters

font-style

- {font-style: normal} (default)

- {font-style: italic}

- {font-style: oblique}

text-decoration

- {text-decoration: none} (default)

- {text-decoration: underline}

- {text-decoration: overline}

- {text-decoration: line-through}

- {text-decoration: blink}

text-transform

- this allows you to specify the capitalization of text

- {text-transform: capitalize} (the first letter of each word is in capital letters)

- {text-transform: uppercase} (every letter is in uppercase)

- {text-transform: lowercase} (every letter is in lowercase)

Text Layout Properties

letter-spacing

- this gives you control over the space between characters

- {letter-spacing: normal} (default)

- {letter-spacing: 2px}

- {letter-spacing: 2in}

- Other units of measurement are em, ex, pica (pc), point (pt), pixel (px), millimeter (mm), centimeter (cm), inch (in).

word-spacing

- this gives you control over the space between words

- {word-spacing: normal} (default)

- {word-spacing: 2px} (other example of length units are given above)

line-height

- this property sets the distance between adjacent lines

- {line-height: normal} (default)

- {line-height: 1.2}

- {line-height: 120%}

- {line-height: 2px}

vertical-align

- this property gives control over how elements align vertically across the page

- {vertical-align: baseline} (default)

- {vertical-align: middle}

- {vertical-align: sub}

- {vertical-align: super}

- {vertical-align: text-top}

- {vertical-align: text-bottom}

- {vertical-align: top}

- {vertical-align: bottom}

- {vertical-align: 20%}

text-indent

- this property enables you to control how the first line of any element is indented, or outdented

- {text-indent: 5px}

- {text-indent: 10%}

text-align

- {text-align: left}

- {text-align: right}

- {text-align: center}

- {text-align: justify}

direction

- this property specifies the base direction for text

- {direction: rtl} (means the text should flow from right to left)

- {direction: ltr} (means the text should flow from left to right) (default)

Background properties

background-color

- specifies background color of an element

- {background-color: maroon}

- {background-color: #336699}

background-image

- {background-image: url(image1.gif)}

background-attachment

- specifies whether the background image should scroll or remain fixed

- {background-attachment: scroll} (default)

- {background-attachment: fixed}

background-repeat

- {background-repeat: repeat} (tiling the background image horizontally and vertically)

- {background-repeat: repeat-x} (tiles an image horizontally but not vertically)

- {background-repeat: repeat-y} (tiles an image vertically but not horizontally)

- {background-repeat: no-repeat} (makes the image appear once and doesn’t tile image)

background-position

- specifies where a background image is placed

- {background-position: 0% 0%} (default)

- {background-position: 15% 25%}

- {background-position: 20px 20px}

- {background-position: top left}

- {background-position: left top}

- {background-position: top}

- {background-position: top center}

- {background-position: right top}

- {background-position: left center}

- {background-position: right center}

- {background-position: bottom left}

- {background-position: bottom-center}

- {background-position: bottom-right}

background

- this is a shorthand property that lets you set any or all background properties at once

- {background: url(http://www.chapagain.com.np/gifs/mukesh1.gif) fixed no-repeat top center} is equivalent to the below four properties:

- background-image: url(http://www.chapagain.com.np/gifs/mukesh1.gif);

- background-attachment: fixed;

- background-repeat: no-repeat;

- background-position: top center;

Border properties

- {border-width: thin}

- {border-width: medium} (default)

- {border-width: thick}

- {border-top-width: 2pt}

- {border-left-width: medium}

- {border-right-width: 2em}

- {border-bottom-width: 2px}

- {border-color: #336699}

- {border-color: #336699 #003366}

- {border-color: maroon green blue}

- {border-color: maroon green blue yellow}

- {border-style: none} (default)

- {border-style: dotted dashed}

- {border-style: solid}

- {border-style: solid double groove}

- {border-style: none ridge inset outset}

- border, border-top, border-bottom, border-left, border-right let you specify with one property any or all of border-style, border-width, border-color values for each edge respectively, or the entire border.

- {border-top: red thick solid}

Margin properties

- A margin is the space between an element and the elements to its top, left, bottom and right. Margin can be negative values.

- {margin: auto}

- {margin-top: 20%}

- {margin-bottom: 2px}

- {margin-left: -2cm}

- {margin-bottom: 2em}

Padding properties

- Padding is the space between the edge of an element (its border) and its contents. Padding cannot take negative values.

- {padding: 4px}

- {padding-right: 20%}

- {padding-left: 9mm}

- {padding-bottom: 1in}

Page Layout properties

position

- this property is used to determine what the coordinates are with respect to, or how the element will be drawn

- {position: static} (default)

- {position: relative}

- {position: absolute}

- {position: fixed}

top

- specifies where the top of an element will be placed

- {top: auto} (this is default)

- {top: 4px} (using length values)

- {top: 4%} (using percentage values)

left

- specifies where the left of an element will be placed

- {left: auto}

- {left: 4px}

- {left: 55%}

bottom

- {bottom: auto}

- {bottom: 4in}

- {bottom: 9%}

right

- {right: auto}

- {right: 4cm}

- {right: 40%}

width

- specifies how wide an element will appear on the page

- {width: auto} (default)

- {width: 5%}

- {width: 5em}

min-width

- allows you to specify a minimum width for an element

- {min-width: auto} (default)

- {min-width: 5%}

- {min-width: 5mm}

max-width, height, max-height, min-height are similar as above

z-index

- determine which elements will appear in front of others when they overlap

- {z-index: auto} (default)

- {z-index: 5} (using integer values)

visibility

- lets you make an element either visible or invisible

- {visibility: inherit} (having same visibility as its parent) (default)

- {visibility: visible}

- {visibility: hidden}

overflow

- let you specify how a browser should display an element where its contents do not fit into its width and height

- {overflow: visible} (default) (means browser should increase the actual width and/or height of the element to display all of its contents)

- {overflow: scroll} (means that the browser should place scrollbars on the element whether or not the contents of the element have overflowed)

- {overflow: auto} (means that the browser should add scrollbars as needed to enable users to scroll horizontally and/or vertically to show hidden contents of the element)

- {overflow: hidden} (display only the contents which are visible within the specified width and height)

float

- this property takes an element out of the flow and place it to the right or left of other elements in the same parent element

- {float: none} (this is default)

- {float: right}

- {float: left}

clear

- this property can be used in conjunction with float to specify whether and or where an element allows floating alongside it

- {clear: none} (default) (element allows floating on either side)

- {clear: left} (element doesn’t allow floating on its left)

- {clear: right} (element doesn’t allow floating on its right)

- {clear: both} (element doesn’t allow floating either on its left or its right)

User Interface properties

cursor

- this property sets the shape of the cursor when the mouse is hovering over a selected element

- {cursor: auto} (default)

- {cursor: crosshair}

- {cursor: default}

- {cursor: pointer}

- {cursor: move}

- {cursor: *-resize} (Indicates that the edge is to be moved. * is replaced with N, S, E, W, NE, NW, SE, SW which are directions, for each of the edges)

- {cursor: text}

- {cursor: wait}

- {cursor: help}

outline

- sets the outline around an element

- outline is the shorthand for three properties outline-color, outline-width and outline-style

- {outline-color: invert} (default) (indicates that the outline will be visible regardless of background color)

- {outline-color: #ffa500}

- {outline-color: purple}

- {outline-style: none} (default)

- {outline-style: dotted}

- {outline-style: dashed}

- {outline-style: solid}

- {outline-style: double}

- {outline-style: groove}

- {outline-style: ridge}

- {outline-style: inset}

- {outline-style: outset}

- {outline-width: thick}

- {outline-width: medium} (default)

- {outline-width: thick}

- {outline-width: 4px}

Element Type properties

display

- determines how an element will be drawn on the page

- {display: none}

- {display: block}

- {display: inline} (default)

- {display: list-item}

- {display: inline-block}

- {display: run-in}

white-space

- this property applies only to block elements, and specifies what should be done by the browser with extraneous whitespace (tabs, extra spaces, returns and so on)

- {white-space: none} (default) (whitespace are handled in traditional manner. Any tabs, extraneous spacing will be ignored.)

- {white-space: pre} (keeps all whitespace as it appears in the element)

- {white-space: nowrap} (contents of the element will only wrap (break to a new line) when an explicit line break <br> is in the contents)

list-style-type

- lets you determine what maker (or bullet point) if any is associated with a list item

- {list-style-type: none}

- {list-style-type: disc} (default)

- {list-style-type: circle}

- {list-style-type: square}

- {list-style-type: decimal}

- {list-style-type: decimal-leading-zero}

- {list-style-type: lower-roman}

- {list-style-type: upper-roman}

- {list-style-type: lower-alpha}

- {list-style-type: upper-alpha}

- {list-style-type: lower-greek}

- {list-style-type: upper-latin}

- {list-style-type: lower-latin}

- {list-style-type: hebrew}

- {list-style-type: armenian}

- {list-style-type: georgian}

- {list-style-type: cjk-ideographic}

- {list-style-type: hiragana}

- {list-style-type: katakana}

- {list-style-type: hiragana-iroha}

- {list-style-type: katakana-iroha}

list-style-image

- specifies an image by URL as the maker for the list item

- {list-style-image: none} (default)

- {list-style-image: url(image1.gif)}

list-style-position

- {list-style-position: outside} (default)

- {list-style-position: inside}

list-style

- this property is the shorthand property that allows you to specify and set all list style property value with one property

- {list-style: disc url(image1.gif) inside}

table-layout

- enables the specification of which of the approach is taken to laying out a table

- {table-layout: auto} (default) (recalculate the row and column and cell sizes based on their content)

- {table-layout: fixed} (ignore any content and simply use the height and width specified for rows and columns)

Reference:

[1] www.westciv.com/style_master/academy/css_tutorial/introduction/index.html

[2] http://www.w3schools.com/css/css_font.asp

Copyright © 2011
This feed is for personal, non-commercial use only.
The use of this feed on other websites breaches copyright. If this content is not in your news reader, it makes the page you are viewing an infringement of the copyright. (Digital Fingerprint:
)

Related posts:

  1. Page.IsPostBack property: A solution to the client postback problem
  2. What are Meta-Tags? Full Description of Meta tags
  3. jQuery: Grey out background and preview image as popup
  4. How to get(view) html source code of a website
  5. How to setup Google AdSense for your website

]]> http://blog.chapagain.com.np/cascading-stylesheet-css-property-value-pairs/feed/ 0