This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

In other words, we can highlight three main things concerning class attribute:

• It allows to assign more than one class name to a single element (separated by white space characters)
• You can use a class name or a combination of class names more than once within the same document
• You can assign a class name or a combination of class names to different elements

Thus, class attribute provides you with more opportunities than id attribute.

When Use the Class Attribute

First of all, decide whether an element will be repeated more than once on the same page or on any other page within the same project. If yes, you should use class attribute instead of id attribute. Thus, you make it possible for javascript and CSS as well as for other processes to retrieve elements within one document and process them all together. In such a way you can define a box for product descriptions, put multiple instances of this box on the same page and have them styled identically by one single piece of css.

Note that there are the same restrictions for the class attribute as for the id attribute. Here they are:

Not valid in base, head, html, meta, param, script, style, and title elements.

You can assign multiple classes to a single element. In other words, an element can be given a base class, then can be further specified by adding extra classes. Seems to be quite simple, but still some errors occur. First of all, you should decide whether you are further specifying a certain element by itself, or just trying to adapt an element according to its context. In case you choose the latter, classes or ids higher up in the structure should be used in combination with the element class to target these elements.

You can add as much classes to one element as you need. However, it is not recommended to add 10 classes to one element because of code readability.

The order of the specified classes on an element is not important. Thus, class=”product promo” is the same as class=”promo product”.

Anyway, if you use extra classes to specify element, it is better to keep a logical ordering where base class comes first.

Apply Unrelated Class to One Element

You also can add two semantically unrelated classes to a single element or contain fixes and apply them to elements through one class. If you need examples, “clearfix” class and “hidden” class are the most popular.

The other way to use unrelated classes is to apply common behavior to a class. For example, you can contain recurring visual characteristics (1 pixel gray border with 0.5em padding) and have them applied to an element by simply adding the class.

Apply the Same Class on Unrelated Elements

It is not advisable because such practice may lead to unexpected results when code gets copied across pages. Remember that it is better to use classes to identify elements that can be repeated within a single document.

Reference: www.onderhond.com/blog/work/class-attribute

Use Other Blogs

It is popular method to get noticed. However, there are also several ways to use it.

Some people prefer to use trackback links within the comment section. It can be quite annoying, because it breaks the flow of the comments and some people even suppose that such trackbacks are just spam. Some blogs put the trackback links in a separate section.

The other thing you can do to be noticed is to post related articles in the comment section. It is appropriate if you post article that answers the bloggers questions. If you just post an article with similar theme this also may look like ordinary spam. So, ask yourself whether readers of the blog will find something useful in your article that you can’t express in small post.

And the final method to use is to add a link to your blog in your name in the comments. It is a standard feature on every blog so why not use it for your purpose? Especially if you post a relevant and interesting comment.

Use Others

The effectiveness of this method is also depends on the quality of your content. You can submit your articles to recaps of the most interesting articles of the last week or month. Of course you will be included in case your information is valuable or quite entertaining. In such a way, you can reach an interested audience.

This method is not about promoting your blog. It is all about providing high quality content to interested parties.

Use Web 2.0

This method allows you to communicate with other people interested in your business as well as allows you to attract potential clients. This time you also need to have valuable content and time to search for interesting topics or some other creative ideas to share with others. You can get noticed with del.icio.us, ma.gnolia, dig, stumbleupon, technocrati, twitter, facebook, etc.

There are quite a lot of techniques concerning Web 2.0. For example, you can submit excerpts of your articles with links to the full post, search for other articles in your niche and twitter or stubleupon them, you also can create your own online group, etc. The main thing is to start and be consistent as well as always try something new to improve.

Reference: www.onderhond.com/blog/work/blog-promotion

Perhaps, you have already visited w3schools and check up on the available xhtml tags. Here is the actual definition of the address tag according to w3c site:

The address element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.

Seems to be confusing? Well, the purpose of the address tag is to provide a means of contact for a specific piece of information on the document. However, the definition is quite vague and you can suggest that it can be used for any address stated within a document. Thus, w3schools give an explanation:

Note: The address tag should NOT be used as describing a postal address, unless it is a part of the contact information.

Thus, the address tag is intended for visitors willing to contact the author of the web document. However, you can see an address tag and expect that it is used for marking up an actual address, not for general contact information regarding the author of the document. This is quite possible… if you forget about standards:

<address>
<span class= “street”>…</span>
<span class=”city”>…</span>
<span class=”country”>…</span>
</address>

As you can see this article is quite ironical and of course, you should stick to the standards. But still sometimes it is rather interesting to be more creative and go against standards if it does no harm. This rule can be applied to web design as well as to life.

Reference: www.onderhond.com/blog/work/address-tag

Step 1

Create a new CSS file with the following:

body {font-family: arial,helvetica,sans; font-size: 13px; background:fff; color:000;}
// Black Text on White Background
a,a:visited,a:link {color:#000; text-decoration:none}
// Do no underline links
.noprint {display:none} //

Step 2

Then, open the HTML source of your main blog template and enclose sidebars, ad blocks, header logo, footers, etc (except the content) inside the following <span> tag to instruct the browser not to print anything that appears inside this tag:

<span class=”noprint”> ….. </span>

Step 3

The last thing to do is to add the following line inside the <HEAD> tag of your blog template:

<link rel=”stylesheet” media=”handheld,print” href=”print.css” />

That’s all. Such technique can also be used if your readers want to print your blog as a PDF document.

Reference: www.labnol.org/internet/design/create-printer-friendly-blog-css-trick/2109/

Focus on finding customers or try to be found by customers? This is the main difference between outbound marketing and inbound marketing. Outbound marketing uses print advertising, TV advertising, cold-calling, spam, junk mail or trade shows to attract customers. However, these techniques are poorly targeted and quite expensive.

The other thing is inbound marketing that is all about creating and providing information that can be really interesting for your customers. The tools of inbound marketing are social media sites (Twitter, Delicious, Facebook, Digg), your brain power and time. To do your best with inbound marketing techniques you should rely on the thickness of your brain instead of thickness of your wallet.

Things to Start With

The thing you should aim to is creating a site with engaging and useful information that meets all the needs of you potential customers as well as demonstrate your experience in some field. It is necessary to host such content on your main web site domain for search engine optimization purposes. However, if you are limited in resources, you can start with a free Wordpress blog. All you need is to start creating valuable content and then develop a blog on your own domain as soon as you get extra resources.

The next step is to engage with social media. You should create a Twitter account and start publishing excerpts of your articles with links to the full texts. You also can use Twitter account to follow other users with interests similar to yours and your customers, retweet the tweets that seem to be interesting as well as relevant, search for keywords related to your business and respond with helpful information.

To set up a Facebok page is much easier, but it can be only the second step after using Twitter effectively. And of course, don’t forget to use Delicious bookmarks that allow you to share your content with others. On the whole, there are quite a lot of techniques to attract potential clients via social media. My task is to make you start without too much information to consider.

Is Social Media Enough?

Social media is all about taking part in conversations going on in recognized places online. Inbound marketing is also creating content that is relevant and helpful. The other thing is to present it in a search engine friendly manner. And this time you need to know not only social media tips but also Search Engine Optimization techniques. For example, you can make keyword research to find out possible phrases your potential clients use looking for some information concerning your industry. There are quite a lot of resources on the web for training in case you want to do it yourself. You also can hire a web developer who will take your site for the next level.

Reference: www.aboundmarketing.com/1011/inbound-marketing-are-you-being-found/

Importing

The import at-rule will bolt on another style sheet. Just add something like the following if you want to add the styles of another style sheet to your existing one:

@import url(addonstyles.css);
As a rule, it is used in place of the link element to link a CSS file to an HTML page:

<style type=”text/css” media=”all”>@import url(monkey.css);</style>

Media Types

The media at-rule applies its contents to a specified media, such as print. For example:

@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}

#navigation {
display: none;
}
}

The media-type can be:

all – for every media under, over, around and in the sun.

aural – for speech synthesizers.

handheld – for handheld devices.

print – for printers.

projection – for projectors.

screen – for computer screens.

You can also use braille, embossed, tty or tv.

IE supports only the following media-types for now – all, screen and print.

Character Sets

The charset at-rule sets the character set encoding of an external stylesheet. It appears at the top of the stylesheet and looks something like

@charset “ISO-8859-1″;

Font Faces

The font-face at-rule is used for a detailed description of a font.

It requires a font-family descriptor, which the font can be referenced to. Use the src descriptor in order to embed a font. Other descriptors added to the font-face at-rule become conditions for that embedded font to be used.

Thus, adding a font-weight: bold style to the at-rule, the src of the font-family will only be applied to a selector with the font-family property if the font-weight property is also set to bold.

Here is the sample of a font-face at-rule you can use:

@font-face {
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}

p {
font-family: somerandomfontname;
font-weight: bold;
}

This will apply the somefont.eot font to paragraphs (it would not if the p selector was not set to font-weight: bold).

Pages

The page at-rule is for paged media and can apply styles to printed media. It defines a page block that extends on the box model. Thus, you can define the size and presentation of a single page.

You can use various specific properties such as size, which can be set to portrait, landscape, auto or a length. The marks property can also be used to define crop marks.

@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}

You can use three pseudo classes with the page at-rule, which would take the form of @page :pseudo-class { stuff }.

:first applies to the first page of the paged media.

:left and :right apply to left-facing and right-facing pages accordingly to specify a greater left margin on left-facing pages and a greater right margin on right-facing pages.

Layout with CSS is quite easy. It just differ from layout with tables and you should used to it. Look at each part of the page as individual chunk and place these chunks relatively or absolutely to another chunk.

Positioning

The position property defines whether an element is absolute, relative, static or fixed.

static – the default value for elements. It renders the normal position of things, as they appear in the HTML.

relative – similar to static, with the element that can be offset from its original position with the properties top, right, bottom and left.

absolute – pulls an element out of the normal flow of the HTML. Thus, the absolute element can be placed anywhere on the page using top, right, bottom and left.

fixed – much like absolute, but it will absolutely position an element in reference to the browser window as opposed to the web page. Thus, fixed elements will stay exactly where they are on the screen even when the page is scrolled. Note that it works in Mozilla and Opera, but it doesn’t work in IE.

Absolute Positioning

A traditional two-column layout with absolute positioning can be created in case you have something like the following HTML:

<div id=”navigation”>
<ul>
<li><a href=”this.html”>This</a></li>
<li><a href=”that.html”>That</a></li>
<li><a href=”theOther.html”>The Other</a></li>
</ul>
</div>

<div id=”content”>
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>

And if you apply the following CSS:

#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}

#content {
margin-left: 10em;
}

This sets the navigation bar to the left and the width to 10 em’s. With the absolutely positioned navigation, you need to set the left margin of the content area to be equal to the width of the navigation bar.

You also can arrange as many blocks as you like. For example, if a third column is necessary, you can add a ‘navigation2′ chunk to the HTML and change the CSS to:

#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}

#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}

#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}

However, there are drawbacks in absolutely positioned elements. For example, you can’t say for sure where they end. In other words, if you want to place anything below these elements (a footer, for example) you need to float your chunks.

Floating

Floating an element will shift it to the left or right of a line and surround content flowing around it.
As a rule, floating is used to position smaller elements within a page, but it can also be used with bigger chunks (navigation columns).

#navigation {
float: left;
width: 10em;
}

#navigation2 {
float: right;
width: 10em;
}

#content {
margin: 0 10em;
}

Apply the clear property in case you don’t want the next element to wrap around the floating objects.

clear: left – clear left floated elements

clear: right – clear right floated elements

clear: both – clear both left and right floated elements

Add a chunk of HTML with the id ‘footer’ and then add the following CSS if you want a footer to your page:

#footer {
clear: both;
}

In such a way you will have a footer underneath all columns, regardless of the length of any of them.

inline – elements that are displayed inline follow the flow of a line. Strong, anchor and emphasis elements as a rule are displayed inline.

block – adds a line break before and after the element. Header and paragraph elements are usually displayed block-line.

none – doesn’t display the element.

The following enables the title and the tag-line to be displayed next to each other rather than above and below each other:

h1 {
display: inline;
font-size: 2em;
}

#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}

This code is used in the print-only styles to basically ‘turn-off’ those elements, such as navigation:

#navigation, #seeAlso, #comments, #standards {
display: none;
}

display: none and visibility: hidden vary in that display: none takes the element completely out of play, where as visibility: hidden keeps the element and its flow in place without visually representing its contents.

Tables

table – initial display and you can mimic the tr and td elements with the table-row and table-cell values respectively.

The display property goes further by offering table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption as values. The good thing about these values is that you can construct a table by columns instead of using the row-biased method usual for HTML.

Other Display Types to Consider

list-item – displays as in the way that you would expect an li HTML element to. To work properly the elements displayed this way should be nested in a ul or ol element.

run-in makes an element either in-line or block-line depending on the display of its parent. However, it doesn’t work on IE or Mozilla based browsers.

compact makes the element inline or block-line depending on the context.

marker is used only with the :before and :after pseudo elements to define the display of the value of the content property.

A document declaration should be at the very top of your web pages. Without specifying a doctype, your HTML is not valid and most browsers will switch to ‘quirks mode’. In other words, the browsers will think that you just don’t know that you are doing and decide what to do with your code on their own. Even perfect CSS is nothing without a document declaration as well as with a wrong document declaration.

So, the document declaration for XHTML 1.0 Strict looks like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

The following is the document declaration for XHTML 1.1:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

You can use XHTML 1.0 Transitional in case you prefer HTML 4:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

If you use frames, the XHTML 1.0 Frameset document type declaration looks like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

Note that the DOCTYPE tag should be written in upper case and adorned with an exclamation mark. It is the only tag that doesn’t need closing.

Language Declarations

To identify the primary language of a document have nothing to do with a valid HTML document. It is all about accessibility. Thus, you can indentify it through an HTTP header or with the xml:lang attribute inside the opening html tag. The value is an abbreviation, for example, ‘en’ (English), ‘fr’ (French) or ‘de’ (German).

Here is the sample of a document with primarily English content:

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

In case you use other languages than in your content, use use the xml:lang attribute in-line (such as <span xml:lang=”fr”>HTML règles</span>).

Content Types

The following HTTP header specifies the media type and character set of an HTML document:

Content-Type: text/html; charset=UTF-8

Let’s describe this example in detail.

text/html – is the MIME type of the file, that lets the browser know what media type a file is and what to do with it. All files have some kind of MIME type. A CSS file is text/css, a JPEG image is image/jpeg and the type generally used for HTML is text/html.

UTF-8 – the second part of the HTTP header is the character set.

You can use an ‘HTTP-equivalent’ meta tag in the HTML to set an HTTP header:

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

You also can use a server-side scripting language that with PHP may look like this:

<? header(“Content-Type: text/html; charset= UTF-8″); ?>

In case using a server-side scripting language is problematic for you, you can go straight to the server with an ‘.htaccess’ file. Most servers (Apache compatible) can have a small text file with the file name ‘.htaccess’ that is in the root directory. Using the following line in it, you can associate all files with the extension ‘.html’ with a MIME type and character set:

AddType text/html;charset=UTF-8 html

Character sets include ‘ISO-8859-1′ for many Western, Latin based languages, ‘SHIFT_JIS’ for Japanese and ‘UTF-8′, a version of Unicode Transformation Format, which provides a wide range of unique characters used in most languages.

Of course, you can use a character set that will be recognized by the users of your site. For Latin-based language (including English) you can use ISO-8859-1, while UTF-8 can display most characters from most languages. What is more, the latter code is the safest one because it will work on most computers.

XHTML should be served by the MIME type application/xhtml+xml.

With most browsers having no clue what this is, you can use the MIME type text/html. According to W3C XHTML 1.0 may be served as text/html, but XHTML 1.1 should not.

Here is the sample of the script that placed at the top of every page of the site that uses PHP to serve XHTML 1.1 with an application/xhtml+xml MIME type to those browsers that understand the type (Mozilla) and XHTML1.0 Strict with the text/html type to other browsers (IE):

<?
if(stristr(\$_SERVER["HTTP_ACCEPT"],”application/xhtml+xml”)){
header(“Content-Type: application/xhtml+xml; charset=UTF-8″);
echo(‘<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>’);
} else {
header(“Content-Type: text/html; charset=UTF-8″);
echo (‘<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>’);
}
?>

If the browser accepts the application/xhtml+xml MIME, that MIME type is sent and the XHTML1.1 document type is written to the HTML. In case the MIME type isn’t recognized then the text/html MIME type is sent and the XHTML1.0 Strict document type is written in the HTML.

Labels

Each form field should have its label. The label tag sorts this out, with the help of a for attribute that associates it to a form element:

<form>
<label for=”yourName”>Your Name</label> <input type=”text” name=”yourName” id=”yourName” />
…

Note: name and id are both required – the name for the form to handle that field and the id for the label to associate it to.

Field Sets and Legends

Using the fieldset tag you can group fields, for example address (line 1, line 2, county, country, postal code, country etc.) or name (first, last, middle, title etc.)

You can set a legend with the legend tag within the field set.

Note: Visual browsers represent field sets with a border surrounding them and legends breaking the left of the top border.

<form action=”somescript.php” >
<fieldset>
<legend>Name</legend>
<p>First name <input type=”text” name=”firstName” /></p>
<p>Last name <input type=”text” name=”lastName” /></p>
</fieldset>
<fieldset>
<legend>Address</legend>
<p>Address <textarea name=”address” ></textarea></p>
<p>Postal code <input type=”text” name=”postcode” /></p>
</fieldset>
…

Option Groups

To group options in a select box you should use the optgroup tag. It requires a label attribute, the value of which is displayed as a non-selectable pseudo-heading preceding that group in the list of visual browsers.

<select name=”country”>
<optgroup label=”Africa”>
<option value=”gam”>Gambia</option>
<option value=”mad”>Madagascar</option>
<option value=”nam”>Namibia</option>
</optgroup>
<optgroup label=”Europe”>
<option value=”fra”>France</option>
<option value=”rus”>Russia</option>
<option value=”uk”>UK</option>
</optgroup>
<optgroup label=”North America”>
<option value=”can”>Canada</option>
<option value=”mex”>Mexico</option>
<option value=”usa”>USA</option>
</optgroup>
</select>

Navigating Fields

To allow the users navigate from fields without the use of a pointing device you can use tab stops and access keys.
The accesskey and tabindex attribute can be added to the individual form tags such as input and to legend tags.

<input type=”text” name=”firstName” accesskey=”f” tabindex=”1″ />