HTML/CSS Service

HTML Characters Samples

Category: CSS, CSS Examples    |    868 views    |    Add a Comment  |   

Greater-than and less-than signs have special meaning within HTML documents and, because of this, can’t be used on a web page unless they are specified in a particular way. These special characters are specified in HTML by “surrounding” a simple description of them with an ampersand (&) and a semi-colon (;).Please find below a list of common characters:

Character Name Character HTML Tag
Ampersand & &
Less than sign < &lt;
Greater than sign > &gt;
Non-breaking space   &nbsp;
Inverted exclamation point &iexcl; &iexcl;
Inverted question mark &iquest; &iquest;
Cent Sign ¢ &cent;
British pound £ &pound;
Yen &yen; &yen;
Copyright © &copy;
Registered ® &reg;
Degree ° &deg;
Plus-or-minus sign ± &plusmn;
Division sign &divide; &divide;
Paragraph &para;
Acute accent ´ &acute;
Cedilla accent &cedil; &cedil;
Umlaut &uml; &uml;
A grave uc &Agrave; &Agrave;
A acute uc &Aacute; &Aacute;
A circumflex uc &Acirc; &Acirc;
A tilde uc &Atilde; &Atilde;
A umlaut uc &Auml; &Auml;
A ring uc &Aring; &Aring;
AE Ligature uc &AElig; &AElig;
a grave lc &agrave; &agrave;
a acute lc &aacute; &aacute;
a circumflex lc &acirc; &acirc;
a tilde lc &atilde; &atilde;
a umlaut lc &auml; &auml;
a ring lc &aring; &aring;
ae ligature lc &aelig; &aelig;
C cedilla uc &Ccedil; &Ccedil;
c cedilla lc &ccedil; &ccedil;
E grave uc &Egrave; &Egrave;
E acute uc &Eacute; &Eacute;
E circumflex uc &Ecirc; &Ecirc;
E umlaut uc &Euml; &Euml;
e grave lc &egrave; &egrave;
e acute lc &eacute; &eacute;
c circumflex lc &ecirc; &ecirc;
e umlaut lc &euml; &euml;
I grave uc &Igrave; &Igrave;
I acute uc &Iacute; &Iacute;
I circumflex uc &Icirc; &Icirc;
I umlaut uc &Iuml; &Iuml;
i grave lc &igrave; &igrave;
i acute lc &iacute; &iacute;
i circumflex lc &icirc; &icirc;
i umlaut lc &iuml; &iuml;
N tilde uc &Ntilde; &Ntilde;
n tilde lc &ntilde; &ntilde;
O grave uc &Ograve; &Ograve;
O acute uc &Oacute; &Oacute;
O circumflex uc &Ocirc; &Ocirc;
O tilde uc &Otilde; &Otilde;
O umlaut uc &Ouml; &Ouml;
O slash uc &Oslash; &Oslash;
o grave lc &ograve; &ograve;
o acute lc &oacute; &oacute;
o circumflex lc &ocirc; &ocirc;
o tilde lc &otilde; &otilde;
o umlaut lc &ouml; &ouml;
o slash lc &oslash; &oslash;
U grave uc &Ugrave; &Ugrave;
U acute uc &Uacute; &Uacute;
U circumflex uc &Ucirc; &Ucirc;
U umlaut uc &Uuml; &Uuml;
u grave lc &ugrave; &ugrave;
u acute lc &uacute; &uacute;
u circumflex lc &ucirc; &ucirc;
u umlaut lc &uuml; &uuml;
Y acute uc &Yacute; &Yacute;
y acute lc &yacute; &yacute;
y umlaut lc &yuml; &yuml;

Share/Save/Bookmark

  • No Related Post

 

Write a CSS Syntax

Category: CSS, CSS 2 Tutorial, CSS Examples, CSS Tutorials, CSS3 Tutorial    |    1,037 views    |    Add a Comment  |   

 

The syntax for CSS is different than that of (X)HTML markup. Though it is not too confusing, once you take a look at it. It consists of only 3 parts.

selector { property: value }

The selector is the (X)HTML element that you want to style. The property is the actual property title, and the value is the style you apply to that property.

Each selector can have multiple properties, and each property within that selector can have independent values. The property and value are separated with a colon and contained within curly brackets. Multiple properties are separated by a semi colon. Multiple values within a property are sperated by commas, and if an individual value contains more than one word you surround it with quotation marks. As shown below.

body {
  background: #eeeeee;
  font-family: “Trebuchet MS”, Verdana, Arial, serif;
}

As you can see in the above code I have separated the color from the font-family with a semi-colon, separated the various fonts with commas and contained the “Trebuchet MS” within quotations marks. The final result sets the body color to light grey, and sets the font to ones that most users will have installed on there computer. Read more…

Share/Save/Bookmark

 

how to Create a fancy image gallery with JQuery

Category: CSS Examples    |    1,596 views    |    Add a Comment  |   

Why jQuery?

jQuery is ideal because it can create impressive animations and interactions. jQuery is simple to

understand and easy to use, which means the learning curve is small, while the possibilities are (almost) infinite.

Demos:

  1. Simple tooltip
  2. Image tooltip with preview
  3. Link tooltip with preview

Installation

Step 1

First, you have to include the JQuery library between the <head> and </head> tags of your html page:

<script type="text/javascript" src="jquery-latest.pack.js"></script> Read more...

Share/Save/Bookmark