HTML Special Characters

HTML Special Characters

HTML special characters Unknown  

In HTML code you use lesser than (<) symbol as tag start and greater than (>) symbol as tag end. But if you want to display it as a symbol in the webpage you have to go with special characters.

Special Characters is used to display keyboard and other special symbols as symbol in the webpage. For example :
               <   -  <
               >   -  >   

The most common character entities have been collected by the International Organization for Standardization and compiled in the ISO Latin Alphabet No.1 table which contains 255 characters.

ISO special character codes:

Punctuation	HTML Entity (case sensitive)	ISO Latin-1 code	name or meaning
–	–	–	en dash
—	—	—	em dash
¡	¡	¡	inverted exclamation
¿	¿	¿	inverted question mark
"	"	"	quotation mark
“	“	“	left double curly quote
”	”	”	right double curly quote
'	´	'	apostrophe (single quote)
‘	‘	‘	left single curly quote
’	’	’	right single curly quote

Symbols
&	&	&	ampersand
¢	¢	¢	cent
©	©	©	copyright
÷	÷	÷	divide
>	>	>	greater than
<	<	<	less than
µ	µ	µ	micron
·	·	·	middle dot
¶	¶	¶	pilcrow (paragraph sign)
±	±	±	plus/minus
€	€	€	Euro
£	£	£	British Pound Sterling
®	®	®	registered
§	§	§	section
™	™	™	trademark
¥	¥	¥	Japanese Yen
°	°	°	Degree

Notes:

• The " entity was mistakenly omitted from the HTML 3.2 specification. While use of " generates error reports when validating against 3.2, browsers have continued to recognize the entity. The omission has been corrected in the HTML 4.0 specification.
• The non-breaking space (  or  ) can be used not only to prevent the separation of words by line wraps.
• The middle dot (· or ·) can be used as a bullet and embedded anywhere in text. Because it is equal in size to a period, however, it may be necessary to apply   or tags to enhance its graphic effect (use of   or   elements is not recommended, as these will alter the character's vertical spacing relative to other characters in the same line).

CSS3 Background Properties

CSS3 Background Properties

CSS3 Unknown  

CSS background properties are used to define the background style effects of an element.

Background-color:

background-color property used to apply only colors to an element in HTML. You can specify the format to color by:

• HEX-decimal like “#000FFF”
• Name of the color like “blue”
• RGB value like “rgb(0,0,255)”

The background color of a webpage is defined as follows:

body {
    background-color: #b0c4de;
}

Background-image:

If you like to have an image as background in a webpage you can use background-image property to specify the image with the extension and location. By default image is repeated in both ways so it covers entire element of the page.

    body {
        background-image: url("bg1.jpeg");
    }

Background-repeat:

By default, background-image property will repeat in both horizontally and vertically. Using background-repeat property you can repeat it only in horizontal or only in vertical. There are four values for repeat property as follows:

• repeat – default value, will repeat on both sides
• repeat-x – image will repeat only on horizontal side
• repeat-y – image will repeat only on vertical side
• no-repeat – image will not repeat. It will display only on

Background-position:

CSS3 background-repeat property specifies the background image only once.You can also change the position of the image, which will not affect the text.

Using background-position property you can specify the position of an image.

     body {
             background-image: url("img_tree.png");
             background-repeat: no-repeat;
             background-position: right top;
          }

Background Shorthand property:

To specify all background properties in a single line is possible and it is called as shorthand property.

This shorthand property for background is "background":

     body {
        background: #ffffff url("img_tree.png") no-repeat right top;
     }

CSS3 Backgrounds:

CSS3 contains a few new background properties, which gives more control of an element.

CSS3 Background-size:

CSS3 background-size property allows you to specify the size of background images. This property allows you to re-use the images in different context sizes.

The size can be specified in length, percentage of both x-axis and y-axis or by using one of the other two values: contain and cover.

contain - scales the background image to be as large as possible which fits to the content area in both its width and height.

cover -  scales the background image to covered the content area completely which displays both its width and height are equal to or exceed the content area.

#box1 {
    background: url(flower_img.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

     
      #box2 {
            background: url(flower_img.jpg);
            background-size: cover;
            background-repeat: no-repeat;
        }

CSS3 Background-clip:

CSS3 background clip property used to specify the painting area of the background. It takes three different values:

• border-box – It’s a default value, which is painted to the outside edge of the border
•  padding-box – Makes the background is painted to the outside edge of the padding
• content-box – Makes the background is painted within the content box

CSS Position Property

CSS Position Property

CSS Unknown  

CSS position properties allow you to position an element. Using this property and values you can decide which element to display in front.

Elements can be positioned using top,bottom,left and right properties. These properties will not work unless you set the position property which is depending on the position methods.

There are four different methods.

1.Static position:

By default HTML elements are positioned as static. A static positioned element is always positioned according to the normal flow of the page.

2.Relative position:

A relative positioned element is positioned relative to its normal position. Elements which positioned relatively can be moved and overlap other elements, but the space reserved for the element is preserved in the normal flow.

3.Absolute Position:

An absolute position element is positioned where the first parent element is positioned as relative. If no such element is found, the containing block is < html >

4.Fixed position:

An element with position fixed is positioned based on the browser window. It will not move even if the window is scrolled.

Example:

style.css:

         .box1{

background:#F00;

border:2px solid #FF0;

position:static;

}

.box2{

background:#00F;

border:2px solid #0FF;

position:relative;

left:50px;

}

.box3{

background:#FF0;

border:2px solid #FF0;

position:absolute;

right:0;

bottom:0;

border-radius:50%;

width:40px;

height:40px;

}

.box4{

background:#666;

border:2px solid #06F;

position:fixed;

}

position.html

    < div class="box1" > < /div >

    < div class="box2" > < div class="box3" > < /div > < /div >

    < div class="box4" > < /div >

Overlapping Elements:

Elements can overlap other elements when elements are positioned outside the normal flow.

The z-index property specifies the stack order of an element (which element should be placed in front of,or behind, this others).

The overlapping values can have a positive or negative stack order.

Example:

     box{

          position: absolute;

          left:0px;

          top:0px;

         z-index:-1

       }