If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

Specs, primers, validators, stuff like that

The CSShark Answers FAQs — Martina Kosloff has compiled a pretty good FAQ on CSS. Worth your time.

css/edge — From the mind of Eric Meyer comes this great little site pushing CSS to the edge. It is, in his words: “intended, first and foremost, to be as relentlessly creative with CSS as we have been practical all these years. It does not exist to present or explain safe cross-browser techniques; in fact, almost the opposite. The goal here is to find ways to make CSS live up to its fullest potential, with only minimal regard to browser limitations.”

websitetips.com CSS section — Literally a ton of links to CSS resources from all over. A better set of links than this one by far.

Style Sheet Reference Guide from webreview.com. — Eric Meyer’s excellent resource, including the justly famous browser compatibility charts. It’s a bit dated (I wish it included Opera 5 and more of CSS2) but still an excellent resource.

CSS School from w3schools.com. — A whole lot of information, references, and examples.

Cascading Style Sheets, level 1 Recommendation from the Web Design Group. — This is the spec (really a rec) folks; can be very helpful if you learn how to read it.

W3C CSS Validation Service — Download a CSS validating app, give it a URL, or cut and paste your CSS here for the ultimate in CSS Validation services.

The Layout Reservoir from BlueRobot. — A resource much like this page with beautiful CSS layouts for you to steal.

Agitprop — Todd Fahrner’s collection of CSS writings, tests, and treatises. Good stuff.

CSS Pointers Group — A great resource full of information and links to other resources on CSS. Some of it is a bit dated (but what isn’t in today’s modern age?), and they are all down on multi column layouts, but still a must visit.

Eric Meyer’s CSS work — The author of the O’Reilly CSS Definitive Guide, Eric has done an amazing amount of writing and work on CSS. One highlight: his frame set views of the W3C’s CSS references.

• 0 Comments

CSS layout techniques and the sites that use them.

3 Columns, The Holy Grail of page layouts — The most elegant technique and perhaps the most sought after layout: a 3 column page with a fluid center column. Easy to understand, easy to implement. I first saw this layout at dynamic ribbon device and have since learned that the sweet CSS came from Rob Chandanais of BlueRobot. Owen also made a very nice tutorial using this layout technique.

2 Columns, ALA Style — Famously chronicled by Jeffrey Zeldman in his ALA article A Web Designer’s Journey, this is an extremely easy layout to implement requiring only a simple float:left declaration.

4 Columns, All Fluid — This technique can actually be used to provide as many columns on a page as you like. Drawback #1) it gets difficult quickly if you want to make any of the columns a fixed width. Drawback #2) it relies heavily on percentages, which the various browsers all calculate differently, so you can’t place your columns very precisely. Still, a very useful technique, especially if you don’t want borders and different background colors for your columns.

3 Columns, All Fluid — A much simpler and potentially more useful technique that then 4 column technique above. It uses float:left, suffers from needing percentage widths for each column, and from potential column wrapping when the browser window is narrowed.

Static Width and Centered — 3 columns all with static widths, and contained in a parent DIV which remains centered in the window. One rather serious limitation of this particular technique is that if any of the three content DIVs contains an image or a really long word that is longer than the width of the DIV, it totally breaks the layout. Each browser breaks it differently.

Nested Float — A very simple layout that features a nested, floated menu in the upper right. Easily reversed. A variation of this technique is in use on this very page.

• 0 Comments

Cascading Order

When multiple style sheets are used, the style sheets may fight over control of a particular selector. In these situations, there must be rules as to which style sheet’s rule will win out. The following characteristics will determine the outcome of contradictory style sheets.

1. ! importantRules can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight. Likewise, since both author and reader may specify important rules, the author’s rule will override the reader’s in cases of importance. A sample use of the ! important statement:

   BODY { background: url(bar.gif) white;
          background-repeat: repeat-x ! important }

2. Origin of Rules (Author’s vs. Reader’s)As was previously mentioned, both authors and readers have the ability to specify style sheets. When rules between the two conflict, the author’s rules will win out over reader’s rules of otherwise equal weight. Both author’s and reader’s style sheets override the browser’s built-in style sheets.

   Authors should be wary of using ! important rules since they will override any of the user’s ! important rules. A user may, for example, require large font sizes or special colors due to vision problems, and such a user would likely declare certain style rules to be ! important, since some styles are vital for the user to be able to read a page. Any ! important rules will override normal rules, so authors are advised to use normal rules almost exclusively to ensure that users with special style needs are able to read the page.

3. Selector Rules: Calculating SpecificityStyle sheets can also override conflicting style sheets based on their level of specificity, where a more specific style will always win out over a less specific one. It is simply a counting game to calculate the specificity of a selector.
   1. Count the number of ID attributes in the selector.
   2. Count the number of CLASS attributes in the selector.
   3. Count the number of HTML tag names in the selector.

   Finally, write the three numbers in exact order with no spaces or commas to obtain a three digit number. (Note, you may need to convert the numbers to a larger base to end up with three digits.) The final list of numbers corresponding to selectors will easily determine specificity with the higher numbers winning out over lower numbers. Following is a list of selectors sorted by specificity:

   #id1         {xxx} /* a=1 b=0 c=0 --> specificity = 100 */
   UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */
   LI.red       {xxx} /* a=0 b=1 c=1 --> specificity = 011 */
   LI           {xxx} /* a=0 b=0 c=1 --> specificity = 001 */
   

4. Order of SpecificationTo make it easy, when two rules have the same weight, the last rule specified wins.

• 0 Comments

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are special “classes” and “elements” that are automatically recognized by CSS-supporting browsers. Pseudo-classes distinguish among different element types (e.g., visited links and active links represent two types of anchors). Pseudo-elements refer to sub-parts of elements, such as the first letter of a paragraph.

Rules with pseudo-classes or pseudo-elements take the form

selector:pseudo-class { property: value }

or

selector:pseudo-element { property: value }

Pseudo-classes and pseudo-elements should not be specified with HTML’s CLASS attribute. Normal classes may be used with pseudo-classes and pseudo-elements as follows:

selector.class:pseudo-class { property: value }

or

selector.class:pseudo-element { property: value }

Anchor Pseudo-classes

Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style.

An interesting effect could be to have a currently selected (or “active”) link display in a slightly larger font size with a different color. Then, when the page is re-selected the visited link could display in a smaller font size with a different color. The sample style sheet might look like this:

A:link    { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

First Line Pseudo-element

Often in newspaper articles, such as those in the Wall Street Journal, the first line of text in an article is displayed in bold lettering and all capitals. CSS1 has included this capability as a pseudo-element. A first-line pseudo-element may be used in any block-level element (such as P, H1, etc.). An example of a first-line pseudo-element would be:

P:first-line {
  font-variant: small-caps;
  font-weight: bold }

First Letter Pseudo-element

The first-letter pseudo-element is used to create drop caps and other effects. The first letter of text within an assigned selector will be rendered according to the value assigned. A first-letter pseudo-element may be used in any block-level element. For example:

P:first-letter { font-size: 300%; float: left }

would create a drop cap three times the normal font size.

• 0 Comments

Rules

Selectors

Any HTML element is a possible CSS1 selector. The selector is simply the element that is linked to a particular style. For example, the selector in

P { text-indent: 3em }

is P.

Class Selectors

A simple selector can have different classes, thus allowing the same element to have different styles. For example, an author may wish to display code in a different color depending on its language:

code.html { color: #191970 }
code.css  { color: #4b0082 }

The above example has created two classes, css and html for use with HTML’s CODE element. The CLASS attribute is used in HTML to indicate the class of an element, e.g.,

<P CLASS=warning>Only one class is allowed per selector.
For example, code.html.proprietary is invalid.</p>

Classes may also be declared without an associated element:

.note { font-size: small }

In this case, the note class may be used with any element.

A good practice is to name classes according to their function rather than their appearance. The note class in the above example could have been named small, but this name would become meaningless if the author decided to change the style of the class so that it no longer had a small font size.

ID Selectors

ID selectors are individually assigned for the purpose of defining on a per-element basis. This selector type should only be used sparingly due to its inherent limitations. An ID selector is assigned by using the indicator “#” to precede a name. For example, an ID selector could be assigned as such:

#svp94O { text-indent: 3em }

This would be referenced in HTML by the ID attribute:

<P ID=svp94O>Text indented 3em</P>

Contextual Selectors

Contextual selectors are merely strings of two or more simple selectors separated by white space. These selectors can be assigned normal properties and, due to the rules of cascading order, they will take precedence over simple selectors. For example, the contextual selector in

P EM { background: yellow }

is P EM. This rule says that emphasized text within a paragraph should have a yellow background; emphasized text in a heading would be unaffected.

Declarations

Properties

A property is assigned to a selector in order to manipulate its style. Examples of properties include color, margin, and font.

Values

The declaration value is an assignment that a property receives. For example, the property color could receive the value red.

Grouping

In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, all of the headings in a document could be given identical declarations through a grouping:

H1, H2, H3, H4, H5, H6 {
  color: red;
  font-family: sans-serif }

Inheritance

Virtually all selectors which are nested within selectors will inherit the property values assigned to the outer selector unless otherwise modified. For example, a color defined for the BODY will also be applied to text in a paragraph.

There are some cases where the inner selector does not inherit the surrounding selector’s values, but these should stand out logically. For example, the margin-top property is not inherited; intuitively, a paragraph would not have the same top margin as the document body.

Comments

Comments are denoted within style sheets with the same conventions that are used in C programming. A sample CSS1 comment would be in the format:

/* COMMENTS CANNOT BE NESTED */

• 0 Comments

While many of the conclusions in the recent research released by the Poynter Institute where they analyzed how people view Web pages based on tracking eye movement are so painfully obvious that it’s embarrassing to read the article, the overall set of tips are well worth considering nonetheless.

Before we get to the tips, though, take a step back and think about the English language. It’s a left-to-right, top-to-bottom language, so after a lifetime of learning how to read and process information, it should be no surprise to you that Web pages are assimilated top left to bottom right, and that people only view the page until they ascertain the gist of the content and/or the information they were hoping to glean from the page. Therefore, it should be obvious that the top left corner of a page is viewed the most, while the bottom right corner is, you guessed it, viewed the least.

Further, when it comes to advertising, larger is better than smaller (as long as you hopefully try to find a balance between advertising and actual content) and ads that seem to be integrated into the content are better than those that stand out by virtue of color, design, placement, etc.

Those are some of the conclusions of the Eyetrack III research project, so you can see why I’m not too impressed: research done without regard (or commentary on) the milieu and context of the research project is questionable and typically obvious.

But, as I said earlier, the tips offered in the article are nonetheless worth considering, so I’m reproducing them here. I encourage you to go and read the entire research report to get the full context if you’re so inclined.

Simple Designs Work Best

“If you are responsible for creating the ad content for your advertiser clients, think about making sure that your design can deliver its message in a single glance, because that might be all you’ll get. If you want to insert more text on an ad unit than can be consumed in a single (less-than-a-second) glance, then assume that the unit will have one glance to hook the reader’s attention. Once hooked, you have the opportunity to draw the reader in closer, but only if that initial hook is effective.”

Contextualize Your Advertising

“Consider designing news homepages so that ads are not set apart from editorial content too much with horizontal or vertical rules and excessive white space, which can act as barriers to viewing ads.”

Integrate Your Advertising Into Your Content Design

“The researchers’ observations suggests that you’ll get better viewing for banner ads that do not contrast too severely with surrounding editorial content. An ad that broadcasts “I’m an ad!” by using bright, contrasting colors sometimes has the opposite of the intended effect. (Of course, the content of a contrasting ad can be compelling enough to counter this tendency; as is so often the case, the quality of the content can override other factors.) We are NOT recommending that ads be presented as camouflaged editorial content. While that may attract more visual traffic, this practice would diminish your credibility.”

Size Versus Placement: Consider the Tradeoffs

“Size isn’t always the dominant factor in Web ad performance. To get the most people to actually look at an ad (for them to fixate on it for at least a fraction of a second) on an article page, insetting it into the text flow seems to work better than any other placement. But in-text placement may not give you the most intense user engagement with an ad; sheer size appears to perform better in this regard.”

“Expandable” Ads Work, But People Won’t Know They’re Active

“You might consider using expandable banner ads if you want better performance than static ads offer. If you do, you might want to let viewers know the banner will expand. It’s not always a great idea to surprise users with this sort of behavior. If you’re going to use a mouseover-expand ad, we suggest positioning it in a normal path of user mouse movement as a way to get the expanding part of an ad seen by a lot of people. (Note: We only tested a mouseover-action ad, but many sites now use ads that automatically appear on top of editorial content and must be closed by the user. This would make for an interesting future eyetracking test. We can make an educated guess based on these findings that such an ad would be seen by most if not all users. The trade-off is that such ads annoy some users.)”

Pop-Up Advertising Doesn’t Work Very Well

“Should you choose to use pop-up ads on your homepage, be aware of their poor performance relative to other ads.”

• 0 Comments

How and Why’s Of Promoting

There are three main problems when trying to promote your Web site. The first one is getting people to initially find your site in the first place. If they can’t find your site they can’t visit your site and you won’t get any visitors.The second problem with promoting your Web site is getting your visitors to read more than one page on your site. If they don’t like what they see on the homepage they won’t go any further. They’ll hit the back button on their browser and never look back.

The third problem is getting visitors to return to your site again and again. This is extremely important to a Web site. You need to get them hooked so they return. If you want to create a community or make money from your Web site then you need to find out what they are looking for and give it to them.

If you don’t want people to visit your Web site then you don’t need to worry about any of this.

But, if you want people to come to your site, read what you have to say, participate in forums and chats, send you email and come back again, then you need to promote your site. Promoting your site doesn’t end with search engines. That’s a good starting point but there’s so much more. Getting good traffic for your site is something you need to work on constantly and continuously.

Submitting To Search Engines

Search Engines

Before you even start submitting your pages to search engines and other places make sure your meta tags are good. You need to have a great title tag, descriptive keywords and a descriptions that tells people and search engines what they will find on your page. If you need help deciding which meta tags are appropriate for your page you can use a meta tag generator. If you just want to check the meta tags you already have you can do a meta tag analysis. Traffic Zap has many tools that can help you make sure your meta tags and keywords are right for your page.

Using auto-submitting software is alright if you want to get your name out there on the Net, but if you want to be listed in the top search engines you should do it yourself.

While you’re submitting your pages to search engines make sure you also manually submit your pages to The Open Directory Project and Yahoo!.

Keep a Log
Read each search engines rules before submitting to make sure you’re doing it right because the rules for each are different. Write down some of the important points that you will need to remember. For some of them you may be allowed to submit your pages monthly while other’s only allow you to submit your pages quarterly. If you submit a page more than once your page may be disqualified for submission altogether.

If you had to sign up before you could submit your pages then you will want to keep track of the user name and password you used to sign up with so you can get back in there again later. If you keep this information in a text document on your computer then you can copy and paste the URL’s of each search engine submission page that you use to submit your pages. You can also keep track of which pages on your site you have already submitted and to which search engines you submitted them.

Newsletters and Link Exchange

Link Exchange
There’s more to promoting your Web site then just letting the search engines know your out there. You should let other people know your site exists too. One of the best ways to get your name known is to exchange links with other sites that are similar to yours.You can keep a page of sites that may be of interest to your visitors. Look around the Web for sites that you think your readers would enjoy. Whenever you add a link to a Web site let the owner of the Web site know about the link and ask them if they would consider linking back to your site. When looking for sites to link to you want to avoid linking to other sites that you might consider competition. You don’t want your visitors to drive your readers away.

When asking Web site owners to link to you suggest that they use a button instead of a text link.

You will have to create the button yourself and you might want to include the code for them to use along with the graphic of the button so all they have to do is copy and paste the code to their page. The button should state the name of your site and a short description of what your site offers.Having other Web sites link to you can actually increase your search engine ranking. Some search engines are tracking the number of good Web sites that link to other Web sites. If you have a lot of popular, high ranking sites linking to you, it increases your rank value which in turn will increase your site’s traffic.

Newsletters
Sending out an occasional newsletter is a great way to let your readers know what’s going on at your site. It’s also a great way to bring them back to your site on a regular basis. Create a newsletter sign-up link on your homepage and on any other pages that you think might get people to sign-up for your newsletter. The more people you can get to sign up for your newsletter the more people you might be able to intice to come back and see what’s new on your site. Then send out your newsletter weekly, bi-weekly or monthly.

If you want to be mentioned in other people’s newsletters you could offer to do something similar to a link exchange. You can ask another similar Web site if they would consider mentioning your site in your newsletter and in exchange you will mention them in your newsletter. This way you are not only getting visitors from your newsletter but you will also be getting visits from the other site’s newsletter.

Other Things You Can Do

Discussion Boards
Whenever you post to a discussion board or forum make good use of your signature. It’s simple advertisement to include a link to your Web site in your signature. If someone is interested in what you have to say or in finding out who you are they will click on the link in your signature and visit your Web site.Before posting links to your site in your main messages or answering questions and linking to your site, find out the rules of the board. Some board and forums don’t allow advertising. You don’t want your site to be considered spam. Then no one will visit and you will be kicked off the board. You might want to consider lurking on the board for a little while to see what kinds of thing the regular posters post before you do any posting yourself, just to be on the safe side.

Write Articles
Keep your Web site fresh.

You can do this by adding something new every week, every other week or every month. The more often you update your site the more reason your readers will have for coming back to see what’s new. Whenever you add something new to your site write a newsletter to let your readers know you’ve added something and they should come have a look.

Pay For Advertising
Pay to have your banners and buttons or text links added to other people’s Web sites or newsletters. You may not want to take it this far but if you are really serious about making your Web site popular you may need to.

If you want to ensure that your site places at the top of the search engines you may also want to consider paying the search engines. Many of them offer programs where you pay to be placed higher to the top.

Lycos has a really good “paid inclusion program” and “pay per click” program. Both are good for increasing your site’s traffic.

• 0 Comments

This is the first in a series of Myspace tutorials targeting specific blocks of the Myspace layout. If you’ve never tried to Modify myspace you should read some of the basic Myspace tutorials first, particularly where to customize Myspace layouts and backgrounds . The “extended network” block is the rectangle fount in the upper right portion of your profile.

You access it using the blacktext12 class. If you just want to make it disappear this is all you need:

<style>
.blacktext12 {
font-size:0px;
color:FFFFFF;
}
</style>
Be sure to change the color to match your background color. Technically you should not have to do this but Internet Explorer doesn’t render 0px fonts properly so you actually see a tiny font on screen if you don’t match the colors (a good reason to go to Firefox, it’s a better browser). This works because by default the Myspace extended network block contains only text.

It’s more fun, though, you place an image in that spot. The key to making that work is to know the dimensions of the image so you can set the size of the block properly. Here are the steps I use to find the image size if you have Firefox (if you have IE, sorry, you’ll have to dive into the source of the page or know where the image lives, another reason to upgrade to Firefox):

1. Browse to the page with the image you want to use (make sure it is on your own web space or you have permission to use it directly)
2. Right click (ctl - click if you have one button mouse) and select View Image or View Background Image
3. Copy the URL to paste into your code
4. Right click (ctl - click if you have one button mouse) and choose Properties (this will work in IE for page images but not background images, IE really does stink). Note the dimensions of the image.

Now your ready to take that information and customize your Myspace layout in a fun way:

<style>
span.blacktext12 {
font-size:0px;
color:FFFFFF;
background-image:url(paste URL from above here);
background-position:center;
background-repeat:no-repeat;
display:block;
width:468px;
height:60px;
}
</style>

Note that this time you needed to add the span tag in front of the blacktext12 property. The background properties aren’t strictly neccessary but help if you get the dimensions wrong.

If your adventurous you can play with other CSS properties. An example would be adding a border. All you need to do is add the following line of code to the end of the code above and you have a 2 pixel green border:

border:solid 2px rgb(0,255,0);

Note: you can only use rgb color codes or text color codes , hex codes (e.g. 00FF00) do not work in this situation.

• 0 Comments

Are you looking to change your Myspace backrounds? This is the code for placing the Myspace background image in the top center of the browser window. In order to make the image visible the backgrounds of all the tables in the Myspace layout need to be made transparent. This process will be explained in the Myspace layout tutorials.

<style type=”text/css”>

body {
background-color: FFFFF;
background-image:url(http://URL TO IMAGE);
background-position: top;
background-repeat: no-repeat;
}
</style>

One thing to note is I used only the vertical background-position option and let the default horizontal position of center do its own thing.

This is not an optimal position as the Myspace banner ads will obscure the top portion of the image.

• 0 Comments

Looking to change your Myspace backrounds? Here is the code for placing the Myspace background image in the top left of the browser window.

<style type=”text/css”>

body {
background-color: FFFFF;
background-image:url(http://URL TO IMAGE);
background-position: top left;
background-repeat: no-repeat;
}
</style>

Remember that without special code the contents in the Myspace layout tables will cover the Myspace background image on the left when the browser window is made smaller.

• 1 Comment