CSS Selector

Validate email addresses using regular expressions

The local-part (the part before the "@" character) of the e-mail may use any of these ASCII characters [1]:

• Uppercase and lowercase letters
• The digits 0 through 9
• The characters , ! # $ % & ' * + - / = ? ^ _ ` { | } ~
• The character "." provided that it is not the first or last character in the local-part

The domain part of the address is much easier to handle. The dot separated domain labels can only include letters, digits and hyphens [1].
There are two regexps in this script. The first one will pass "normal looking" addresses like foo.bar@baz.example.com or foo+bar@example.com. This regexp won't, however, pass all syntactically valid addresses like foo,!#@example.com
// define a regular expression for "normal" addresses
$normal = "^[a-z0-9_\+-]+(\.[a-z0-9_\+-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*\.([a-z]{2,4})$";
To understand this expression you need to be familiar with regexp syntax. You'll find links to some good tutorials in the end of this article.
The first part, ^[a-z0-9_\+-]+ means that the address has to start with letters a-z, numbers 0-9 or characters "_", "+" or "-" The final "+" means there must be 1..n of these characters. A normal username, say jsmith2 would match this expression. It also matches to foo+bar
The regexp continues with (\.[a-z0-9_\+-]+)*. It means that the first characters defined before can be followed with a period "." and after that with the same set of characters than before the period. Because characters "." and "+" have special meaning in regexps they must be escaped with a backslash. The final * means there must be 0..n of these sequences. This way the regexp will match to strings firstname.lastname, firstname.long-middlename.lastname and foo.bar+baz
After these characters there must be a single "@" character. It must be followed by a domain label that consist of letters, numbers and hyphens. There can be 1..n domain labels separated with a period. The first label (without the period) is defined by [a-z0-9-]+. After this there can be 0..n similar sequences starting with a period. This is defined as (\.[a-z0-9-]+)*. At the time this article was written most email address end with a period followed by 2..4 letters (for example .fi or .info). The expression \.([a-z]{2,4})$ matches this.
The second regexp is supposed to match all syntactically valid addresses, even those that we don't see that often. The idea in this example is that the validator should pass those strange looking addresses but tell the user that it would probably be a good idea to double check the address.
// define a regular expression for "strange looking" but syntactically valid addresses
$validButRare = "^[a-z0-9,!#\$%&'\*\+/=\?\^_`\{\|}~-]+(\.[a-z0-9,!#\$%&'\*\+/=\?\^_`\{\|}~-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*\.([a-z]{2,})$";
This ugly regexp is actually quite similar to the one declared earlier. The period separated character sequences in the local-part can now include all the special characters defined in the RFC. Characters "$", "*", "+" "^", "{" and "|" all have their special meanings in regular expressions so they must be escaped with a backslash. The expression now allows the domain part to end with a period followed by 2..n letters such as .museum
You can use these regexps as follows (in PHP):

if (eregi($normal, $email)) {
  echo("The address $email is valid and looks normal.");
}

else if (eregi($validButRare, $email)) {
  echo("The address $email looks a bit strange but it is syntactically valid. You might want to check it for typos.");
}

else {
  echo("The address $email is not valid.");
}

These regexps were inspired by and modified from the article "Using Regular Expressions in PHP" by James Ussher-Smith [2]. The article uses email address validation as an example but the suggested regexp doesn't work with for example foo+bar@example.com.
You can use these regexps in your applications but please give credit to the original authors. Feel free to drop me an email if you liked this howto. :)

Limitations

• The example here does not check that the length of local-part is <65
• The example here does not check that the length of the domain name is is <256
• The example here does not allow quoted strings in the local part (eg."Foo Bar"@example.com). Quoted strings are allowed in local-part but RFC 2821 warns that they should be avoided.

Display Property in CSS?

Property Values

Value	Description	Play it
none	The element will not be displayed at all	Play it »
block	The element is displayed as a block element (like paragraphs and headers). A block element has some whitespace above and below it and does not tolerate any HTML elements next to it	Play it »
inline	This is default. The element is displayed as an inline element (like span). An inline element has no line break before or after it, and it tolerates HTML elements next to it	Play it »
inline-block	The element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element
inline-table	The element is displayed as an inline table
list-item	The element is displayed as a list-item, which means that it has a bullet in front of it	Play it »
table	The element is displayed as a table
table-caption	The element is displayed as a table caption
table-cell	The element is displayed as a table cell
table-column	The element is displayed as a table column
table-column-group	The element is displayed as a table column group (like <colgroup>)
table-footer-group	The element is displayed as a table footer row group
table-header-group	The element is displayed as a table header row group
table-row	The element is displayed as a table row
table-row-group	The element is displayed as a table row group
inherit	The value of the display property will be inherited from the parent element

Margin and Padding??

Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

Possible Values

Value	Description
auto	The browser calculates a margin
length	Specifies a margin in px, pt, cm, etc. Default value is 0px
%	Specifies a margin in percent of the width of the containing element
inherit	Specifies that the margin should be inherited from the parent element

It is possible to use negative values, to overlap content.
 

Padding

The CSS padding properties define the space between the element border and the element content.

---

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

Possible Values

Value	Description
length	Defines a fixed padding (in pixels, pt, em, etc.)
%	Defines a padding in % of the containing element

CSS Box Model

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements in relation to other elements.
The image below illustrates the box model:

Explanation of the different parts:

• Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
• Border - A border that goes around the padding and content. The border is affected by the background color of the box
• Padding - Clears an area around the content. The padding is affected by the background color of the box
• Content - The content of the box, where text and images appear

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

---

Width and Height of an Element

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins.
The total width of the element in the example below is 300px:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px
Assume that you had only 250px of space. Let's make an element with a total width of 250px:

Example

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

---

Browsers Compatibility Issue

The example above does not display properly in IE8 and earlier versions.
IE8 and earlier versions includes padding and border in the width, if a DOCTYPE is NOT declared.
To fix this problem, just add a DOCTYPE to the HTML page:

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

</html>

 

 

Lists commonly are found in documents, including web pages.  They are an easy and effective way to itemize such things as elements, components, or ingredients.
Words or phrases which need to be set apart from the rest of the body of text can be emphasized with a “bullet” (a heavy dot used for calling attention to a particular section of text).  An empty tag called a “list” tag is used to do this:

• <LI>: creates a bullet in front of text which is to be set apart for emphasis and causes all text after it to be indented, either until another list tag is detected or until the end of the list is reached.  It is used to itemize elements of “unordered” and “ordered” lists. Note:  A <BR> tag is not inserted at the end of an item beginning with a <LI> tag, as a line break automatically occurs at that point.

Since a list tag is an empty tag (that is, there is no negating counterpart </LI>), and since it indents the text following it, it cannot be alone; otherwise, the entire remainder of the document would be indented. Therefore, list tags (<LI>) must be incorporated between two non-empty tags.  One such pair of tags is called “unordered list” tags:

• <UL>unordered list</UL>: delineates a list, where the items are generally of equal importance and do not need to go in any particular order.  Each item begins with a <LI> tag.  Unordered lists may be nested inside unordered lists or inside any other types of lists (one list inside of another list inside of another list).  A line space automatically is inserted before and after an unordered list (that is, an entire line is skipped between an unordered list and any text before and after it), except for (on most browsers) a list nested within another list.

The initial <UL> tag may contain within it this parameter as part of the command:

• TYPE="DISC"|"SQUARE"|"CIRCLE": designates the appearance of the bullets preceding the listed items.  Many browsers support only the "DISC" attribute.    "DISC" causes each bullet to appear as a solid, round disc.
     "SQUARE" causes each bullet to appear as a solid square.   (Many browsers do not recognize the "SQUARE" attribute.)
     "CIRCLE" causes each bullet to appear as an empty circle.   (Many browsers do not recognize the "CIRCLE" attribute.)
  Note:  On some browsers, "DISC" is the default bullet.  On other browsers, "CIRCLE" is the default bullet.

Here, items in an unordered list are accentuated: <FONT SIZE="4"><P>During a routine eye examination, a pathology within the body sometimes can be detected in the eye, especially if the disease process is in a moderate to advanced stage.  Here are 2 such cases, along with their intraocular signs:
<UL TYPE="CIRCLE">
<LI><I>diabetic</I> retinal signs:
<UL TYPE="SQUARE">
<LI>CSME (clinically significant macular edema)
<LI>cotton wool spots (infarcted areas)
<LI>neovascular formation
<LI>blot and dot hemorrhages
</UL>
<LI><I>hypertensive (high blood pressure)</I> retinal signs:
<UL TYPE="SQUARE">
<LI>blood vessel crossing defects (arteries compressing veins)
<LI>exudative changes in and around the macula ("star-burst" pattern)
<LI>hemorrhages
<LI>narrowing of retinal arterioles, including the "boxcar" effect
</UL>
</UL></P></FONT> and would be marked up like this: During a routine eye examination, a pathology within the body sometimes can be detected in the eye, especially if the disease process is in a moderate to advanced stage.  Here are 2 such cases, along with their intraocular signs:

• diabetic retinal signs:
  • CSME (clinically significant macular edema)
  • cotton wool spots (infarcted areas)
  • neovascular formation
  • blot and dot hemorrhages
• hypertensive (high blood pressure) retinal signs:
  • blood vessel crossing defects (arteries compressing veins)
  • exudative changes in and around the macula ("star-burst" pattern)
  • hemorrhages
  • narrowing of retinal arterioles, including the "boxcar" effect
Note:  If circular bullets and/or square bullets do not appear in the example above, then your browser does not recognize the "CIRCLE" bullet attribute and/or the "SQUARE" bullet attribute.

---

List tags (<LI>) also may be incorporated within another pair of non-empty tags, called “ordered list” tags:

• <OL>ordered list</OL>: delineates a list, where the items are in sequential, numerical order.  Each item begins with a <LI> tag.  Ordered lists may be nested inside ordered lists or inside any other types of lists (one list inside of another list inside of another list).  A line space automatically is inserted before and after an ordered list (that is, an entire line is skipped between an ordered list and any text before and after it), except for (on most browsers) a list nested within another list.

The initial <OL> tag may contain within it this parameter as part of the command:

• TYPE="I"|"A"|"1"|"a"|"i": designates the appearance of the numbers preceding the items in the list and, therefore, is conducive to building an outline using nested ordered lists.    "I" causes the items to be numbered I, II, III, IV, V, VI, VII, etc.
     "A" causes the items to be numbered A, B, C, D, E, F, G, etc.
     "1" (the default) causes the items to be numbered 1, 2, 3, 4, 5, 6, 7, etc.
     "a" causes the items to be numbered a, b, c, d, e, f, g, etc.
     "i" cause the items to be numbered i, ii, iii, iv, v, vi, vii, etc.

In an ordered list, the list (<LI>) tag may contain within it this parameter:

• VALUE="1"|"2"|"3"|...|"N": immediately changes the number of that item to the Nth term of that particular numbering type.  For example, VALUE="4" would label that item in the sequence as follows:    for TYPE="I" that item would be “IV”;
     for TYPE="A" that item would be “D”;
     for TYPE="1" that item would be “4”;
     for TYPE="a" that item would be “d”;
     for TYPE="i" that item would be “iv.”

This is how items in an ordered list may be enumerated: <FONT SIZE="4"><P>As listed in the <I>Jackson Heights Journal</I>, Jackson Heights Middle School ranked <B>5th</B> in the city-wide achievement test given last week:
<OL TYPE="I">
<LI>Oakfield Middle School
<OL TYPE="A">
<LI>Tod Hastings
<OL TYPE="1">
<LI>Math (#3)
<LI>History (#2)
<LI>Science (#2)
</OL>
<LI>Bonita Chavez
<OL TYPE="1">
<LI>Math (#1)
<LI>History (#4)
<LI>Science (#3)
</OL>
</OL>
<LI>Parkview Mid-High
<OL TYPE="A">
<LI>Jacque Russell
<OL TYPE="1">
<LI>Math (#2)
<LI>History (#5)
<LI>Science (#4)
</OL>
<LI>Dwayne Clancy
<OL TYPE="1">
<LI>Math (#4)
<LI>History (#7)
<LI>Science (#1)
</OL>
</OL>
.<BR>
.<BR>
.<BR>
<LI VALUE="5">Jackson Heights Middle School
<OL TYPE="A">
<LI>Christine Quon
<OL TYPE="1">
<LI>Math (#7)
<LI>History (#6)
<LI>Science (#5)
</OL>
<LI>Roger Dietz
<OL TYPE="1">
<LI>Math (#5)
<LI>History (#8)
<LI>Science (#7)
</OL>
</OL>
</OL></P></FONT>
and would appear like this: As listed in the Jackson Heights Journal, Jackson Heights Middle School ranked 5th in the city-wide achievement test given last week:

1. Oakfield Middle School
   1. Tod Hastings
      1. Math (#3)
      2. History (#2)
      3. Science (#2)
   2. Bonita Chavez
      1. Math (#1)
      2. History (#4)
      3. Science (#3)
2. Parkview Mid-High
   1. Jacque Russell
      1. Math (#2)
      2. History (#5)
      3. Science (#4)
   2. Dwayne Clancy
      1. Math (#4)
      2. History (#7)
      3. Science (#1)
   .
   .
   .
   
5. Jackson Heights Middle School
   1. Christine Quon
      1. Math (#7)
      2. History (#6)
      3. Science (#5)
   2. Roger Dietz
      1. Math (#5)
      2. History (#8)
      3. Science (#7)

---

Sometimes, it is helpful to include a glossary of terms in a document, which is accomplished with non-empty “definition list” tags:

• <DL>definition list</DL>: delineates a list, where the items are individual terms paired with their definitions, and each definition is indented and placed one line down from each term.  Definition lists may be nested inside definition lists or inside any other types of lists (one list inside of another list inside of another list).  A line space automatically is inserted before and after a definition list (that is, an entire line is skipped between a definition list and any text before and after it), excluding a list nested within another list.
• <DL COMPACT>definition list</DL>: same as <DL> & </DL>, except each definition is placed on the same line as each term.

Within the definition list are terms, each marked with an empty “definition-list term” tag, as well as the actual definitions of the terms, each marked with an empty “definition-list definition” tag:

• <DT>: creates (but does not place bullets in front of) terms included in a glossary or definition list.
• <DD>: indents (but does not place bullets in front of) definitions of terms in a glossary or definition list.

Here is a short list of common Internet terms: <DL><FONT SIZE="4">
<DT>HTML
<DD>Hypertext Markup Language
<DT>TP
<DD>Transfer Protocol
<DL>
<DT>FTP
<DD>File Transfer Protocol
<DT>HTTP
<DD>Hypertext Transfer Protocol
</DL>
<DT>URL
<DD>Uniform Resource Locator (= web address)
<DT>WWW
<DD>World Wide Web</FONT>
</DL> and how this list would look on a browser:

HTML

Hypertext Markup Language

TP

Transfer Protocol

FTP

File Transfer Protocol

HTTP

Hypertext Transfer Protocol

URL

Uniform Resource Locator (= web address)

WWW

World Wide Web

When an enumerated list is required, with each item (“definition”) to be placed on the same line as each number (“term”), a compacted list could be used:
<DL COMPACT><FONT SIZE="4">
<DT>1<DD>HTML
<DT>1<DD>TP
<DT>1<DD>URL
<DT>1<DD>WWW</FONT>
</DL> and would look this way:

1

HTML

2

TP

3

URL

4

WWW

---

At times it is beneficial to create a list of related, indented terms which are not preceded by either bullets or numbers.  In such cases, non-empty “directory list” tags may be used:

• <DIR>directory list</DIR>: creates a directory listing where each entry is indented (on most browsers).  Directory lists may be nested inside directory lists or inside any other types of lists (one list inside of another list inside of another list).  On most browsers, a line space automatically is inserted before and after a directory list (that is, an entire line is skipped between a directory list and any text before and after it), except for (on many browsers) a list nested within another list. Note:  An example of directory lists nested within an unordered list may be seen by viewing the list of hyperlinks in the HTML source code of the initial page (“Ted’s HTML Tutorial”) of this portion of my web site.

The easiest way to understand directory list tags is to see that <DIR> tags indent the text coming after them, while </DIR> tags outdent the text coming after them.  The difference between <DIR> & </DIR> tags and <BLOCKQUOTE> & </BLOCKQUOTE> tags is that directory list tags indent only the left margin of the text between them, whereas blockquote tags indent both the left and right margins of the text between them. One example of a directory list is the table of contents of an HTML document, where each item in the table of contents is a hyperlink jumping directly to the site listed:
<FONT SIZE="4"><H2>Table of Contents</H2><DIR>
<A HREF="P-I">Part I</A><DIR>
<A HREF="P-I_C-1">Chapter 1</A><DIR>
<A HREF="P-I_C-1_S-A">Section A</A><BR>
<A HREF="P-I_C-1_S-B">Section B</A></DIR>
<A HREF="P-I_C-2">Chapter 2</A><DIR>
<A HREF="P-I_C-2_S-A">Section A</A><BR>
<A HREF="P-I_C-2_S-B">Section B</A></DIR></DIR>
<A HREF="P-II">Part II</A><DIR>
<A HREF="P-II_C-3">Chapter 3</A><DIR>
<A HREF="P-II_C-3_S-A">Section A</A><BR>
<A HREF="P-II_C-3_S-B">Section B</A></DIR>
<A HREF="P-II_C-4">Chapter 4</A><DIR>
<A HREF="P-II_C-4_S-A">Section A</A><BR>
<A HREF="P-II_C-4_S-B">Section B</A></DIR></DIR></DIR></FONT> and which would look like this when marked up:

Table of Contents

Part I Chapter 1 Section A
Section B Chapter 2 Section A
Section B Part II Chapter 3 Section A
Section B Chapter 4 Section A Section B

HTML Anchor Tag Tutorial

The HTML anchor element is used to create a link to a resource (another web page, a file, etc.) or to a specific place within a web page.
The anchor tag is written like this:

<a>

The anchor tag alone won't do anything without an attribute and value, so let's look at the attributes we can use.

The HREF Attribute

To create a link, you have to know the web address of the file you want to link to, whether it's another web page of your own site, another website, or a link to file such as a PDF document, sound file, or another type of file. Suppose you wanted to link to the front page of my site. The web address is: http://www.boogiejack.com. You'd code the link like this:

<a href="http://www.boogiejack.com">Boogie Jack</a>

The href part, shown in dark blue text, is short for hypertext reference. This is the attribute that defines the address of the file you want to link to.
The equal sign always connects an attribute to the attribute's value. So in this case, href is the attribute, and http://www.boogiejack.com is the value. The value is always enclosed in quotation marks.
The Boogie Jack part, shown in green text, is the anchor text, or sometimes called the link text. This is the part of a link that is clickable.
If you link to a page on another site you need to use the full web address as shown in the example above. If you're linking to a different page on your own site you only need to use the page name and extension if the page is keep in the same directory.
For example, suppose you want to link to a page you've saved with the name of MyPage.html. You'd code it like this:

<a href="MyPage.html">My Page</a>

By linking to your own internal pages without using the full web address your pages will load faster. If you use the full web address the browser goes back out to the Internet to find your site all over again, which takes longer. If you don't use the full path the browser only checks on your site for the file.
File names, which includes the name of the web page and the extension, are case sensitive. That means you must use the same capitalization in the web address of the file that was used when the file was saved.

The NAME Attribute

The name attribute allows an anchor tag to be used to point to a specific place on a web page. You might link from the bottom of a long page to the top of the page, or link from an item in a Table of Contents to the corresponding item where it appears on the page. The syntax for using the name attribute is like this:

<a name="top"></a>  » or...
<a name="TOC">Table of Contents</a>

You can leave out the text between the "a" tags or use them to surround some text. The appearance of the text won't change unless you have defined a hover color for your links. If you have, then the text will change to the hover color when a user's cursor is on it. It will not be clickable, however, because this is not the link, this is the anchor a link will point to.
In thre first examply you would link to the top of a page from the bottom of a long page, and maybe other points in between so your visitors could jump back to the top instead of scrolling.
Or, you might place a named anchor as shown in the second example around the Table of Contents for an online newsletter, for example, then link to it from strategic places down the page so your visitors can quickly jump to the Table of Contents after reading an article.
For the newsletter example, to link to that named anchor you'd code your link like this:

<a href="#TOC">Table of Contents</a>

As you can see, it's simply a hash mark (#) in front of the actual anchor name. The hash mark tells the browser the link is on the current page.
You can also link to a named anchor on another page. The syntax for that is:

<a href="AnotherPage.html#name">Link Text</a>

That would be a page located in the same directory as the current page. You can link to anchor points on other sites (if they have an anchor point) by including the full web address of the page.
As you probably noticed, it's a normal link followed by the hash mark and the anchor name. That tells the browser to go to the other page, then to find the named anchor on that page.

The TARGET Attribute

The target attribute allows you to determine where the link will open. With a framed site, it allows you to target a link to a specific frame. The most common use is to have off-site links open in a new browser window. Here's how to open a link in a new window:

<a href="http://www.site.com" target="_blank">Link Text</a>

By adding the part in green to a link, the link will open in a new window or a new tab, depending on the browser in use and how it's configured.