As usual, none of the IE browsers accept this property. So, you should include filter:alpha(opacity=80); in your css declaration. This time the opacity value lies between 0 and 100 (0 – the elements will be transparent, 100 – no transparency at all). Using these two properties we can get cross-browser transparency.

<–[if gte IE5.5]> .opaque {filter:alpha(opacity=80);}
<![endif]–> .opaque {opacity:0.8; filter:alpha(opacity=80);}

Transparency is Not Seen

As a rule, there is lack of separation between foreground and background transparency. Note that when you give an opacity to an element, the whole element will be transparent (not background only but also the text). Of course, it influences the readability of the text. If even with the opacity of 0.5 the contrast between background and foreground can seem to be optimal, but it is not so pleasant to read the text. Thus, opacity values of 0.8 are recommended in this case.

Internet Explorer Issue

In case Active X scripting (or scripting in general) is disabled the transparency won’t work. Thus, you should always consider that if transparency is used, your site remains to be functional without the opacity applied. In other words, avoid putting content on top of each other. Thus, if the content can be accessed through a transparent element, even the modern browsers can’t guarantee the transparency.

Capricious Firefox

In case you use CSS properties such as line-height and text-decoration, Firefox can make text starts jumping around or shift background images and surrounding borders. Long before opacity, Mozilla used its own property called -moz-opacity. By abusing this, we can simply set the opacity for Safari and Opera and disable it again for Firefox.

<–[if gt IE5]> .opaque {filter:alpha(opacity=80);}
<![endif]–> .opaque {opacity:0.8; -moz-opacity:1;}

Note that such transparency can be applied in Firefox in case you have controlled environment. However, it is better to avoid transparency in Firefox because it can be really irritating and unpredictable.

Reference: www.onderhond.com/blog/work/css-transparency

First of all, we should interpret the concept of CSS specificity:

The exactness with which a vocabulary term covers a concept.

With many ways to target a single html element, CSS can do it through classes, pseudo-classes, ids, through CSS selectors, the html elements themselves or even inline. Thus, it really matters whether you target a div through its class instead of its id, because all the above mentioned ways carry a different weight of importance.

In other words, each selector carries a weight of its specificity and the sum of all these values is the computed weight for a selector. Here are some possible weights:

• 1,0,0,0 : inline styles
• 0,1,0,0 : ids
• 0,0,1,0 : classes, pseudo-classes and attributes
• 0,0,0,1 : elements and pseudo-elements
• 0,0,0,0 : the * (universal selector)

Inherited properties and combinator (in the end of this list) carry no weight at all. Note that universal selector will still overwrite inherited properties.

Some elements can be targeted by several selectors carrying the same weight. In this case, the selector appearing last in the source will take preference. It is an important rule that can be abused when you deal with IE6.

Specificity Calculated

Note that the above mentioned calculations are not made in base-10. In other words, you are not able to get 11 classes to overwrite 1 id. Still the representation of the values with “,” can help to avoid some confusion. Just add all specificities within their respective weight category and compare results to other selectors.

h1 (weight: 0,0,0,1 )
* h1 (weight: 0,0,0,1 )
.class #id #id2 p (weight: 0,2,1,1 )
#id2 #id p .class (weight: 0,2,1,1 )
.class.class2>*~p (weight: 0,0,2,1 )

Important Addendum to Consider

h1 {color:#c0c0c0 !important;}

Declaring something !important you fix that value as unchangeable. This declaration should be used with caution and only within user style sheets or a piece of code that can’t be overruled by others. So, try to avoid it.

Reference: www.onderhond.com/blog/work/css-specificity

The > Combinator

ul>li { *properties* }

This > combinator targets the specified elements exactly 1 level below the source level. Thus if look at an example we offer, the selector will target all li elements that are nested right below the ul element.

However, IE6 doesn’t support this selector.

The + Combinator

h2+p { *properties* }

The + combinator targets an element on the same level, directly following the source target. In the example above, it will target every p tag directly preceded by an h2 tag.

IE6 doesn’t support this selector too.

The ~ Combinator

p~p { *properties* }

This combinatory selects all elements on the same level, following the source target. It is quite similar to the + combinator but more flexible.

IE6 doesn’t support this selector.

The Attribute Selector

input[type=text] { *properties* }

The class and id selectors are shorthands for specific attribute selectors. For example, the .nav selector can also be written as ul[class=nav]. Note that an attribute selector can be defined on an html tag, while the class selector is used separately from html tags.

The selector isn’t limited to the “=” operator, but can also accept *=, $=, ^=, |= and ~= operators. However, cross-browser support for all these operators is not the best thing to mention about.

The Pseudo-Classes

div:hover { *properties* }

Pseudo-classes always start with a : followed by the class itself, and can be attached to any selector. Pseudo-classes refer to the context or the behavior of an element. In very specific cases they can be made to work cross-browser (the :active class on the a tag for example) but most of the pseudo-classes have limited to no cross-browser support.

The Pseudo-Elements

div::after { *properties* }

Pseudo-elements resemble pseudo-classes quite a lot. They share the same syntax although this will change for pseudo-elements introduced in css3. The single : will be replaced by a double ::. Pseudo-elements can help to target specific parts of an element, or insert completely new elements before or after the source element.

In the example above, a virtual structural element is added after all divs. In this virtual element, content can be inserted which can then be styled. This virtual element will not show up in the dom however.

Complex CSS Rules

.box>*:first-child~* { *properties* }

Well, the above example, can be just an exercise for you to solve. So, is everything clear?

Reference: www.onderhond.com/blog/work/css-selectors-pt2

In css, pattern matching rules determine which style rules apply to elements in the document tree. These patterns, called selectors, may range from simple element names to rich contextual patterns. If all conditions in the pattern are true for a certain element, the selector matches the element.

So, let’s start.

The * Selector

* { *properties* }

The * selector just selects everything. This selector is quite useful if put in a specific context. However, its usage is quite limited today if compare with others.

HTML Tags

p { *properties* }

html tag that can appear within the body, can be addressed through CSS. Note that not all html tags accept all CSS properties. In the example above, all p tags within the document are given a range of properties.

Classes and IDs

#header { *properties* } .header { *properties* }

Thus, the selector starting with # refers to an html element with an id=”header” applied to it. The selector starting with . refers to an html element with a class=”header” applied to it. You can find classes and ids quite useful if need to style semantic elements across multiple pages.

Descendant Selectors

form p { *properties* }

You can target html elements based on their context selecting one or more elements above the targeted element. You can choose between simple selectors that are separated by a whitespace and have no limit to the amount of descending selectors as well as complex selectors that are interpreted from left to right.

According to a given example, all p tags within a form will be given a range of properties.

Combining All of the Above

.serviceNav li * { *properties* }

On the whole, there are no limits to the length or complexity of the selector.

In the example above, a selector matches everything within a li element, which appears in an element with class=”serviceNav” applied to it.

It is not so hard to write rules for a specific document, the other thing is to write CSS for entire site. It is advisable to verify that when a context is defined, it is necessary for an element to appear within that context to receive its defined style. If not, it’s better to leave the extra context selectors out.

Thus, in case you are going to style document, the selectors explained above can help you a lot. Of course, it will not result in the cleanest, leanest CSS possible, but it will be stable cross-browser.

Reference: www.onderhond.com/blog/work/css-selectors-pt1

Microsoft offers to use conditional comments. Thus, you can write a special CSS file for their browsers. In other words, you include a separate CSS file for browsers that requires CSS fixes for a certain project instead of standardizing conditional comments.

It processes like a normal css file. The only difference is that only those browsers which are targeted will include the css file.

With targeting every browser in a separate CSS file is quite a lot of work that sometimes not possible within the constraints of a project. However, such process allows a developer to implement his often good ideas to use css without having to worry about complying to 5 (or more) browsers.

As you can see advantages outweigh disadvantages of such a decision. It is necessary to look ahead and try to build a standard till CSS remains to be a problem with bugs in browsers. It is necessary to devise a system where the bugs can be addressed without reverting to hacks and tricks.

Reference: www.onderhond.com/blog/work/conditional-css

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/