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!

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

To solve this problem, I used stylesheet property called ‘margin’. The example below is from single.php file of my wordpress theme. The adsense code is kept in between the paragraph tag.
It is kept after

<em><div class="entry-content"></em>

and before

<em><?php the_content(); ?></em>

<div class="entry-content">

<p class="alignleft" style="text-align: left; margin: 8px; float: left;">

<script type="text/javascript"><!--
google_ad_client = "pub-8802303964745491";
/* 336x280, created 5/16/08 */
google_ad_slot = "7152897181";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</p>

<?php the_content(''.__('Read More <span class="meta-nav">&raquo;</span>', 'sandbox').''); ?>

Similarly, I created an about me page. I wanted to show my pic in the top-left position and to show the text by the side of the pic. For this I added style to my uploaded image while editing the page. I went to the HTML (not View) section in the edit/add page.

The style I added goes like this:

style="margin: 8px; float: left;"

More HTML source from my about page:

<p style="text-align: left;">
<img class="alignleft" alt="Mukesh Image" src="http://blog.chapagain.com.np/wp-content/uploads/close-up-small.jpg" style="margin: 8px; float: left;"/>
</p>
<p> </p>
<p class="MsoNormal" style="text-align: justify;">
Hi, I am Mukesh Chapagain. My rest of the introduction goes here...
</p>

Related posts:

1. How to setup Google AdSense for your website
2. WordPress Plugin: Quick Adsense 1.0
3. Solution: Google Adsense not showing on my website blog
4. Blogspot: How to add google adsense to your blogger website?
5. How to get(view) html source code of a website

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

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