Being a typical guy, Chirag Mehta have
no clue what the colors Lavender and Mauve look like. You can show him
Indigo and he won’t know if it’s more like Violet or Purple. So he made
this little app called Name that Color
where you can create a color on the screen (or copy-paste CSS hex#
color) and find out the name of the closest matching color. I did not
realise there are so many colors you can actaully call them until I saw
Name that Color…If you want to incorporate the same facility into your
website or project, you may download a copy and use it as you wish.

Requirements: Modern Browsers with Javascript Enabled

Demo: http://chir.ag/phernalia/name-that-color/

License: Creative Commons License

The Color Wizard lets you submit your own base color, and it automatically returns matching colors for the one you selected.

It returns a set of hue, saturation and tint/shade variations of
your color, as well as suggests color schemets to you, based on your
color’s complementary color, split complementary colors, analogous
colors and other variations. The Color Wizard also has a randomize function that lets you generate color schemes you might not have thought of on your own.

The first version of the Color Wizard was completed back in 2000 as
an ASP application. With version 3, it has been converted to a flash
based application.

Requirements: No Requirements

Demo: http://www.colorsontheweb.com/colorwizard.asp

License: License Free

Using COPASO you can save your palettes to a private folder or
download them to your local computer. When you’re ready, click publish
and share your color palette with thousands of other color enthusiasts.
This tool is very easy to use and it has all the necessary functions
for color lovers. You can easily build a really nice color schemes for
your websites.

Requirements: -

Demo: http://www.colourlovers.com/copaso

License: License Free

There are many types of color pickers,
now we have one more option. COLOURlovers found that web developers
needed to have a more advanced color picker to work inside the
application… and since COPASO
is built with DHTML it was easy enough to pull out the picker to use on
the other creation pages of websites. They have modularized the color
picker code and offer it to others to use on their own sites and
projects. So here is the code to get the Free Advanced DHTML Color Picker working on your site for free.

Requirements: -

Demo: http://www.colourlovers.com/blog/2008/01/16/free…

License: License Free

ColorToy 2.0
is a Flash based color scheme generator and picker. It generates
complementary color schemes based on your inputted color values or
randomly. There are three ways to use ColorToy.

1. Enter a RGB value. e.g. 211,21,52 and hit “Submit RGB”. ColorToy 2.0 will then generate your complementary color scheme.

2. Enter a HEX value e.g. #c0ffee and hit “Submit Hex”. ColorToy 2.0
will then generate your complementary color scheme based on your HEX
value.

3. Hitting “Random” will generate a random color and associated complementary color scheme. Go on, give it a click.

You can also check out the collection of other useful Color Scheme Generators we have mentioned on WebAppers a while ago.

Requirements: -

Demo: http://www.defencemechanism.com/color/

License: License Free

Web Standards have never been easier to learn. Everything you need
to know is condensed into short, helpful tutorials that inform and
inspire. Opera’s Web Standards Curriculum can help you brush up on
things you know and maybe even teach you something you didn’t.

Opera’s Web Standards Curriculum,
released in association with the Yahoo! Developer Network, is a
complete a course designed to give anyone a solid grounding in web
design/development, including HTML, CSS, design principles and
background theory, and JavaScript basics.

It is completely free to use, accessible, and assumes no previous
knowledge. It already has support from many organizations (including
Yahoo! and the Web Standards Project) and universities. The first 23
articles are currently available, with about 30 more to be published
between now and late September.

Source: Opera Web Standards Curriculum

Amazing Photoshop brushes come from talented designer Paul Willocks and Marielle.
You can find some Line Brushes, Abstract Tech Brushes, Circle Brushes
and a lot more in Paul Willocks Gallery. You can also find some Floral
Brushes, Frames Brushes, Hearts Brushes and Dividers Brushes in
Marielle Gallery. Most of them are licensed under Creative License. You
might want to use them to decorate or design your websites.

Requirements:-

Demo: http://mouritsada-stock.deviantart.com/gallery/#Brush-Packs

Demo: http://paulw.deviantart.com/gallery/#Photoshop-Brushes

License: Creative Commons License

There are many different kinds of stunning logos. Some are
aesthetic, some conceptual, and some cultural. It is also becoming
disturbingly clear that logo design has become a public sport. As the
public controls their own media more and more-Tivo-ing this, blogging
that, YouTube-ing and Googling everything else-people are no longer
satisfied to simply consume what is placed before them: They have
opinions they want to share. So when a large corporation reveals its
new identity, there are hundreds of internet sites flinging their
opinions back at it. Even when the village board of Remote votes on a
new logo for its two police cars, citizens take to the streets waving
pitchforks and copies of their own designs. Committeecide seems to be
rampant.

The full 2007 logo design trends report
follows. Whether we are noting social, conceptual or aesthetic trends,
remember that none of them exist in a vacuum or in a single moment in
time. They are results of many trends before them and are developing
taproots as we speak.

You can also look at more current Logo Design Trends here.

Source: Logo Design Trends Report 2007

When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. NETTUTS has published a tutorial (Creating a Dynamic Poll with jQuery and PHP) for creating a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

Requirements:-
Demo: http://nettuts.com/demos/test_poll/
License: License Free

Apple has sold over one million iPhone 3Gs in first weekend. iPhone 3G looks stunning and runs a lot faster. I am sure most of us would like to have one too. Have you got yours yet? Have you ever think of developing an iPhone Application / iPhone Web App for it? However, how can we get started? Where can we get all the best iPhone Application development resources? You should take a look at the article: Hand Picked iPhone Application Development Resources by iPhone Toolbox.

If you have an iPhone, you can download free iPhone Wallpapers, iPhone Icons from iPhone Toolbox. Also, you can check out the iPhone news and hand picked iPhone Web Apps as well.

Source: Hand Picked iPhone Application Development Resources

CSS isn’t always easy to deal with. Depending on
your skills and your experience, CSS coding can sometimes become a
nightmare, particularly if you aren’t sure which selectors are actually
being applied to document elements. An easy way to minimize the
complexity of the code is as useful as not-so-well-known CSS attributes
and properties you can use to create a semantically correct markup.

We’ve taken a close look at some of the most useful CSS tricks,
tips, ideas, methods, techniques and coding solutions and listed them
below. We also included some basic techniques you can probably use in
every project you are developing, but which are hard to find once you
need them.

And what has come out of it is an overview of over 70 expert CSS ideas
which can improve your efficiency of CSS coding. You might be willing
to check out the list of references and related articles in the end of
this post.

We’d like to express sincere gratitude to all designers
who shared their ideas, techniques, methods, knowledge and experience
with their readers. Thank you, we, coders, designers, developers,
information architects - you name it - really appreciate it.

1.1. Workflow: Getting Started

• After you have a design, start with a blank page of content.
  “Include your headers, your navigation, a sample of the content, and
  your footer. Then start adding your html markup. Then start adding your
  CSS. It works out much better.” [CSSing]
• Use a master stylesheet. “One of the most common
  mistakes I see beginners and intermediates fall victim to when it comes
  to CSS is not removing the default browser styling. This leads to
  inconsistencies in the appearance of your design across browsers, and
  ultimately leaves a lot of designers blaming the browser. It is a
  misplaced blame, of course. Before you do anything else when coding a
  website, you should reset the styling.” [Master Stylesheet: The Most Useful CSS Technique], [Ryan Parr]
  

  master.css
  @import url(”reset.css”);
  @import url(”global.css”);
  
  @import url(”flash.css”);
  @import url(”structure.css”);
  

  
  

  <style type="text/css" media="Screen">
  /**/@import url("css/master.css");/**/
  </style>
  

  
  
• Reset your CSS-styles first. “You can often
  eliminate the need to specify a value for a property by taking
  advantage of that property’s default value. Some people like doing a Global white space reset by zeroing both margin and padding for all elements at the top of their stylesheets. [Roger Johansson]
• Keep a library of helpful CSS classes. Useful for
  debugging, but should be avoided in the release version (separate
  markup and presentation). Since you can use multiple class names (i.e. <p class="floatLeft alignLeft width75">...</p>), make use of them debugging your markup. (updated) [Richard K. Miller]
  

  CSS:
  .width100 { width: 100%; }
  .width75 { width: 75%; }
  .width50 { width: 50%; }
  .floatLeft { float: left; }
  .floatRight { float: right; }
  .alignLeft { text-align: left; }
  .alignRight { text-align: right; }
  

  
  
• Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file.

1.2. Organize your CSS-code

• Organize your CSS-styles, using master style sheets.
  “Organizing your CSS helps with future maintainability of the site.
  Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css (if needed) and structure.css and on occasion a typography style sheet. Here is an example of a “master” style sheet and how it is embedded in the document:”
  

  h2 { }
  #snapshot_box h2 {
  	padding: 0 0 6px 0;
  	font: bold 14px/14px "Verdana", sans-serif; }
  #main_side h2 {
  	color: #444;
  	font: bold 14px/14px "Verdana", sans-serif; }
  .sidetagselection h2 {
  	color: #fff;
  	font: bold 14px/14px "Verdana", sans-serif; }
  

  
  
• Organize your CSS-styles, using flags. “Divide
  your stylesheet into specific sections: i.e. Global Styles – (body,
  paragraphs, lists, etc), Header, Page Structure, Headings, Text Styles,
  Navigation, Forms, Comments, Extras. [5 Tips for Organizing Your CSS]
  

  /* -----------------------------------*/
  /* ---------->>> GLOBAL <<<-----------*/
  /* -----------------------------------*/
  

  
  
• Organize your CSS-styles, making a table of contents.
  At the top of your CSS document, write out a table of contents. For
  example, you could outline the different areas that your CSS document
  is styling (header, main, footer etc). Then, use a large, obvious
  section break to separate the areas. [5 Steps to CSS Heaven]
• Organize your CSS-styles, ordering properties alphabetically.
  “I don’t know where I got the idea, but I have been alphabetizing my
  CSS properties for months now, and believe it or not, it makes specific
  properties much easier to find.” [Christian Montoya]
  

  body {
  	background: #fdfdfd;
  	color: #333;
  	font-size: 1em;
  	line-height: 1.4;
  	margin: 0;
  	padding: 0;
  }
  

  
  
• Separate code into blocks.. “This might be common
  sense to some of you but sometimes I look at CSS and it’s not broken
  down into “sections.” It’s easy to do an it makes working with code
  weeks, months, or years later much easier. You’ll have an easier time
  finding classes and elements that you need to change. Examples: /* Structure */, /* Typography */ etc.” [CSS Tips and Tricks]
• Hook, line, and sinker. Once you have your CSS and
  sections in place start considering where your selector “hooks” will
  live by using structural hooks in your mark up. This is your saving
  grace for future editing and maintenance of the site. This will also
  give you strength in your document.” [Ryan Parr]
• Break your style sheet in separate blocks. “I
  break down my style sheet into three separate blocks. The first is
  straight element declarations. Change the body, some links styles, some
  header styles, reset margins and padding on forms, and so on. […] After
  element declarations, I have my class declarations; things like classes
  for an error message or a callout would go here. [..] I start by
  declaring my main containers and then any styles for elements within
  those containers are indented. At a quick glance, I can see how my page
  is broken down and makes it easier to know where to look for things.
  I’ll also declare containers even if they don’t have any rules.” [Jonathan Snook]
  

1.3. Workflow: Handling IDs, Classes, Selectors, Properties

• Keep containers to a minimum. “Save your document
  from structural bloat. New developers will use many div’s similar to
  table cells to achieve layout. Take advantage of the many structural
  elements to achieve layout. Do not add more div’s. Consider all options
  before adding additional wrappers (div’s) to achieve an effect when
  using a little nifty CSS can get you that same desired effect.” [Ryan Parr]
• Keep properties to a minimum. “Work smarter, not
  harder with CSS. Under this rule, there are a number of subrules: if
  there isn’t a point to adding a CSS property, don’t add it; if you’re
  not sure why you’re adding a CSS property, don’t add; and if you feel
  like you’ve added the same property in lots of places, figure out how
  to add it in only one place.” [CSSing]
• Keep selectors to a minimum. “Avoid unnecessary
  selectors. Using less selectors will mean less selectors will be needed
  to override any particular style — that means it’s easier to
  troubleshoot.” [Jonathan Snook]
• Keep CSS hacks to a minimum. “Don’t use hacks
  unless its a known and documented bug. This is an important point as I
  too often see hacks employed to fix things that aren’t really broken in
  the first place. If you find that you are looking for a hack to fix a
  certain issue in your design then first do some research (Google is
  your friend here) and try to identify the issue you are having problems
  with. [10 Quick Tips for an easier CSS life]
• Use CSS Constants for faster development. “The
  concept of constants – fixed values that can be used through your code
  [is useful]. [..] One way to get round the lack of constants in CSS is
  to create some definitions at the top of your CSS file in comments, to
  define ‘constants’. A common use for this is to create a ‘color
  glossary’. This means that you have a quick reference to the colors
  used in the site to avoid using alternates by mistake and, if you need
  to change the colors, you have a quick list to go down and do a search
  and replace.” [Rachel Andrew]
  

  # /*
  # Dark grey (text): #333333
  # Dark Blue (headings, links) #000066
  # Mid Blue (header) #333399
  # Light blue (top navigation) #CCCCFF
  # Mid grey: #666666
  # */
  

  
  
• Use a common naming system. Having a naming system
  for id’s and classes saves you a lot of time when looking for bugs, or
  updating your document. Especially in large CSS documents, things can
  get a big confusing quickly if your names are all different. I
  recommend using a parent_child pattern. [10 CSS Tips]
• Name your classes and IDs properly, according to their semantics.
  “We want to avoid names that imply presentational aspects. Otherwise,
  if we name something right-col, it’s entirely possible that the CSS
  would change and our “right-col” would end up actually being displayed
  on the left side of our page. That could lead to some confusion in the
  future, so it’s best that we avoid these types of presentational naming
  schemes. [Garrett Dimon]
• Group selectors with common CSS declarations.
  “Group selectors. When several element types, classes, or id:s share
  some properties, you can group the selectors to avoid specifying the
  same properties several times. This will save space – potentially lots
  of it.” [Roger Johansson]
• Isolate single properties that you are likely to reuse a lot.
  “If you find yourself using a single property a lot, isolate it to save
  yourself repeating it over and over again and also enabling you to
  change the display of all parts of the site that use it.” [5 Steps to CSS Heaven]
• Move ids and class naming as far up the document tree as you can. Leverage contextual selectors
  as much as possible. Don’t be afraid to be verbose in your selectors.
  Longer selectors can make css documents easier to read while also
  cutting down the chances of developing class- or divitis. [Chric Casciano]
• Learn to exploit the cascading nature of CSS. “Say
  you have two similar boxes on your website with only minor differences
  - you could write out CSS to style each box, or you could write CSS to
  style both at the same time, then add extra properties below to make
  one look different.” [5 Steps to CSS heaven]
• Use Your Utility Tags: <small>, <em> and <strong>.
  “Many times you’ll have a section in your design that calls for various
  typographical weights/looks all on the same line, or very close to each
  other. drop in random divs and classes because I feel they’re not
  semantic and defeat the purpose of your nice XHTML everywhere else.”
  Instead, use semantic tags. [Mike Rundle’s 5 CSS Tips]

1.4. Workflow: Use shorthand notation

• Shorten hexadecimal colour notation. “In CSS, when
  you use hexadecimal colour notation and a colour is made up of three
  pairs of hexadecimal digits, you can write it in a more efficient way
  by omitting every second digit: #000 is the same as #000000, #369 is the same as #336699 [Roger Johansson]
• Define pseudo classes for links in the LoVe/HAte-order:
  Link, Visited, Hover, Active. “To ensure that you see your various link
  styles, you’re best off putting your styles in the order
  “link-visited-hover-active”, or “LVHA” for short. If you’re concerned
  about focus styles, they may go at the end– but wait until you’ve read
  this explanation before you decide.” [Eric Meyer]
  

  a:link { color: blue; }
  a:visited { color: purple; }
  a:hover { color: purple; }
  a:active { color: red; }
  

  
  
• Define element’s margin, padding or border in TRouBLed-order:
  Top, Right, Bottom, Left. “When using shorthand to specify an element’s
  margin, padding or border, do it clockwise from the top: Top, Right,
  Bottom, Left.” [Roger Johansson]
• You can use shorthand properties. “Using shorthand for margin, padding and border properties can save a lot of space.
  

  CSS:
  margin: top right bottom left;
  margin: 1em 0 2em 0.5em;
  (margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)
  

  
  

  CSS:
  border: width style color;
  border: 1px solid #000;
  

  
  

  CSS:
  background: color image repeat attachment position;
  background: #f00 url(background.gif) no-repeat fixed 0 0;
  

  
  

  CSS:
  font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
  font: italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;
  

  
  

1.5. Workflow: Setting Up Typography

• To work with EMs like with pxs, set font-size on the body-tag with 62.5%. Default-value of the font-size
  is 16px; applying the rule, you’ll get one Em standing for roughly ten
  pixels (16 x 62.5% = 10). “I tend to put a font-size on the body tag
  with value: 62.5%. This allows you to use EMs to specify sizes while
  thinking in PX terms, e.g. 1.3em is approximately 1.3px. ” [Jonathan Snook]
• Use universal character set for encoding. “[..]
  The answer is to use a single universal character set that’s able to
  cover most eventualities. Luckily one exists: UTF-8, which is based on
  Unicode. Unicode is an industry standard that’s designed to enable text
  and symbols from all languages to be consistently represented and
  manipulated by computers. UTF- 8 should be included in your web page’s
  head like this. [20 pro tips]
  

  <meta http-equiv="content-type" content="text/ html;charset=utf-8" />
  

  
  
• You can change capitalisation using CSS. If you
  need something written in capitals, such as a headline, rather than
  rewriting the copy, let CSS do the donkey work. The following code will
  transform all text with an h1 attribute into all capitals, regardless
  of format”. [20 pro tips]
  

  h1 {
  	text-transform: uppercase;
  }
  

  
  
• You can display text in small-caps automatically. The font-variant
  property is used to display text in a small-caps font, which means that
  all the lower case letters are converted to uppercase letters, but all
  the letters in the small-caps font have a smaller font-size compared to
  the rest of the text.
  

  h1 {
  	font-variant: small-caps;
  }
  

  
  
• Cover all the bases - define generic font-families.
  “When we declare a specific font to be used within our design, we are
  doing so in the hope that the user will have that font installed on
  their system. If they don’t have the font on their system, then they
  won’t see it, simple as that. What we need to do is reference fonts
  that the user will likely have on their machine, such as the ones in
  the font-family property below. It is important that we finish the list
  with a generic font type. [Getting into good coding habits]
  

  p {
  	font-family: Arial, Verdana, Helvetica, sans-serif;
  }
  

  
  
• Use 1.4em - 1.6em for line-height. “line-height:1.4”
  for readable lines, reasonable line-lengths that avoid lines much
  longer than 10 words, and colors that provide contrast without being too
  far apart. For example, pure black on pure white is often too strong
  for bright CRT displays, so I try to go with an off-white (#fafafa is a good one) and a dark gray (#333333, another good one).” [Christian Montoya]
• Set 100.01% for the html-element.
  This odd 100.01% value for the font size compensates for several
  browser bugs. First, setting a default body font size in percent
  (instead of em) eliminates an IE/Win problem with growing or shrinking
  fonts out of proportion if they are later set in ems in other elements.
  Additionally, some versions of Opera will draw a default font-size of
  100% too small compared to other browsers. Safari, on the other hand,
  has a problem with a font-size of 101%. The current “best” suggestion
  is to use the 100.01% value for this property.” [CSS: Getting into good habits]

1.6. Workflow: Debugging

• Add borders to identify containers. “Use plenty of test styles like extra borders or background colors when building your documents or debugging layout issues. div { border:1px red dashed; } works like a charm. There are also bookmarklets that apply borders and do other things for you.” You can also use * { border: 1px solid #ff0000; }. [Chric Casciano]. Adding a border to specific elements can help identify overlap and extra white space that might not otherwise be obvious. [CSS Crib Sheet]
  

  * { border: 1px solid #f00; }
  

  
  
• Check for closed elements first when debugging.
  “If you ever get frustrated because it seemed like you changed one
  minor thing, only to have your beautiful holy-grail layout break, it
  might be because of an unclosed element. [10 CSS Tips]

2.1. Technical Tips: IDs, Classes

• 1 ID per page, many classes per page. “Check your
  IDs: Only one element in a document can have a certain value for the id
  attribute, while any number of elements can share the same class name.
  [..] Class and id names can only consist of the characters [A-Za-z0-9]
  and hyphen (-), and they cannot start with a hyphen or a digit (see
  CSS2 syntax and basic data types).” [Roger Johansson]
• Element names in selectors are case sensitive.
  “Remember case sensitivity. When CSS is used with XHTML, element names
  in selectors are case sensitive. To avoid getting caught by this I
  recommend always using lowercase for element names in CSS selectors.
  Values of the class and id attributes are case sensitive in both HTML
  and XHTML, so avoid mixed case for class and id names.” [Roger Johansson]
• CSS classes and IDs must be valid. “I.e. beginning with a letter, not a number or an underscore. IDs must be unique. Their names should be generic, describe functionality rather than appearance.” [CSS Best Practices]
• You can assign multiple class names to a given element.
  “You can assign multiple class names to an element. This allows you to
  write several rules that define different properties, and only apply
  them as needed.” [Roger Johansson]

2.2. Technical Tips: Use the power of selectors

Roger Johansson has written an extremely useful series of articles about CSS 2.1 Selectors. These articles are highly recommended
to read - some useful aspects can be found in the list below. Note that
selectors ‘>’ and ‘+’ aren’t supported in IE6 and earlier versions
of Internet Explorer (updated).

• You can use child selectors. “A child selector
  targets an immediate child of a certain element. A child selector
  consists of two or more selectors separated by a greater than sign,
  “>”. The parent goes to the left of the “>”, and whitespace is
  allowed around the combinator. This rule will affect all strong
  elements that are children of a div element. [Roger Johansson]
  

  div > strong { color:#f00; }
  

  
  
• You can use adjacent sibling selectors. An
  adjacent sibling selector is made up of two simple selectors separated
  by a plus sign, “+”. Whitespace is allowed around the adjacent sibling
  combinator. The selector matches an element which is the next sibling
  to the first element. The elements must have the same parent and the
  first element must immediately precede the second element. [Roger Johansson]
  

  p + p { color:#f00; }
  

  
  
• You can use attribute selectors. Attribute
  selectors match elements based on the presence or value of attributes.
  There are four ways for an attribute selector to match:
  

  [att]
  Matches elements that have an att attribute, regardless of its value.
  [att=val]
  Matches elements that have an att attribute with a value of exactly “val”.
  [att~=val]
  Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces.
  [att|=val]
  Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc.
  

  
  
• The selector in the following rule matches all p elements that have a title attribute, regardless of which value it has:
  

  p[title] { color:#f00; }
  

  
  
• The selector matches all div elements that have a class attribute with the value error:
  

  div[class=error] { color:#f00; }
  

  
  
• Multiple attribute selectors can be used in the same selector. This
  makes it possible to match against several different attributes for the
  same element. The following rule would apply to all blockquote elements
  that have a class attribute whose value is exactly “quote”, and a cite
  attribute (regardless of its value):
  

  blockquote[class=quote][cite] { color:#f00; }
  

  
  
• You should use descendant selectors. “Descendant
  selectors can help you eliminate many class attributes from your markup
  and make your CSS selectors much more efficient. ” [Roger Johansson]

2.3. Technical Tips: Styling Links

• Be careful when styling links if you’re using anchors. “If you use a classic anchor in your code (<a name="anchor">) you’ll notice it picks up :hover and :active pseudo-classes. To avoid this, you’ll need to either use id for anchors instead, or style with a slightly more arcane syntax: :link:hover, :link:active” [Dave Shea]
• Define relationships for links. “The rel attribute is supposed to indicate a semantic link relationship from one resource to another.
  

  a[rel~="nofollow"]::after {
  	content: "2620";
  	color: #933;
  	font-size: x-small;
  }
  a[rel~="tag"]::after {
  	content: url(http://www.technorati.com/favicon.ico);
  }
  

  
  
• “These make use of the attribute selector for space separated lists
  of values. Any a element with a relationship containing those values
  will be matched. Links with the nofollow relationship will be followed
  by a dark red skull and crossbones (?) and those with the tag
  relationship will be followed by the Technocrati icon.” [Handy CSS]
• You can mark external links automatically. Many people make use of the non-standard rel="external"
  relationship to indicate a link to an external site. However, adding
  that to each and every link is time consuming and and unnecessary. This
  style rule will place an north east arrow after any link on your site
  to an external site. [Handy CSS]
  

  a[href^="http://"]:not([href*="smashingmagazine.com"])::after {
  	content: "2197";
  }
  

  
  
• You can remove dotted links with outline: none;. To remove dotted links use outline: none;


  a:focus {
  	outline: none;
  }
  

  
  

2.4. Technical Tips: CSS-Techniques

• You can specify body tag ID. “In most cases
  placing an ID in the body tag will allow you manipulate CSS
  presentational items and markup elements by page by page basis. Not
  only will you be able to organize your sections you will be able to
  create multiple CSS presentations without changing your markup from
  template to template or page to page.” [Ryan Parr, Invasion of Body Switchers]
• You can create columns with equal heights with CSS. Equal Height Technique: a method to make all columns appear to be the same height. But without the need for faux column style background images. Faux Columns: with background images.
• You can align vertically with CSS. “Say you have a
  navigation menu item whose height is assigned 2em. Solution: specify
  the line height to be the same as the height of the box itself in the
  CSS. In this instance, the box is 2em high, so we would insert
  line-height: 2em into the CSS rule and the text now floats in the
  middle of the box!” [Evolt.org]
• You can use pseudo-elements and classes to generate content dynamically. Pseudo-classes and pseudo-elements.
  Pseudo-classes and pseudo-elements can be used to format elements based
  on information that is not available in the document tree. For example,
  there is no element that refers to the first line of a paragraph or the
  first letter of an element’s text content. You can use :first-child,
  :hover, :active, :focus, :first-line, :first-letter, :before, :after
  and more.
• You can set <hr> to separate posts beautifully. “Restyling the horizontal rule (<hr>) with an image can be a beautiful addition to a web page. [CSS: Best Practices]
• You can use the same navigation (X)HTML-code on every page.
  “Most websites highlight the navigation item of the user’s location in
  the website. But it can be a pain as you’ll need to tweak the HTML code
  behind the navigation for each and every page. So can we have the best
  of both worlds?” [Ten More CSS Tricks you may not know]
  

  XHTML:
  <ul>
  <li><a href=”#” class=”home”>Home</a></li>
  <li><a href=”#” class=”about”>About us</a></li>
  
  <li><a href=”#” class=”contact”>Contact us</a></li>
  </ul>
  

  
  
• Insert an id into the <body> tag.
  The id should be representative of where users are in the site and
  should change when users move to a different site section.
  

  CSS:
  #home .home, #about .about, #contact .contact
  {
  	commands for highlighted navigation go here
  }
  

  
  
• You can use margin: 0 auto; to horizontally centre the layout. “To horizontally centre an element with CSS, you need to specify the element’s width and horizontal margins.” [Roger Johansson]
  

  XHTML:
  <div id=”wrap”>
  <!– Your layout goes here –>
  </div>
  

  
  

  CSS:
  #wrap {
  width:760px; /* Change this to the width of your layout */
  
  margin:0 auto;
  }
  

  
  
• You can add CSS-styling to RSS-feeds. “You can do
  a lot more with an XSL stylesheet (turn links into clickable links,
  etc), but CSS can make your feed look much less scary for the
  non-technical crowd. [Pete Freitag]
  

  <?xml version="1.0" ?>
  <?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>
  
  ...
  

  
  
• You can hide CSS from older browsers. “A common way of hiding CSS files from old browsers is to use the @import trick. [Roger Johansson]
  

  @import "main.css";
  

  
  
• Always declare margin and padding in block-level elements. [10 CSS Tips]
• Set a width OR margin and padding. “My rule of
  thumb is, if I set a width, I don’t set margin or padding. Likewise, if
  I’m setting a margin or padding, I don’t set a width. Dealing with the
  box model can be such a pain, especially if you’re dealing with
  percentages. Therefore, I set the width on the containers and then set
  margin and padding on the elements within them. Everything usually
  turns out swimmingly.” [Jonathan Snook]
• Avoid applying padding/borders and a fixed width to an element.
  “IE5 gets the box model wrong, which really makes a mess of things.
  There are ways around this, but it’s best to side-step the issue by
  applying the padding to the parent element instead of the child that
  gets a fixed-width. [CSS Crib Sheet]
• Provide print styles. “You can add a print stylesheet in exactly the same way that you would add a regular stylesheet to your page:
  

  <link rel="stylesheet" type="text/css" href="print.css" media="print">
  or
  <style type=”text/css” media=”print”> @import url(print.css); </style>
  

  
  
• This ensures that the CSS will only apply to printed output and not
  affect how the page looks on screen. With your new printed stylesheet
  you can ensure you have solid black text on a white background and
  remove extraneous features to maximise readability. More about CSS-based print-Layouts. [20 pro tips]

2.5. Technical Tips: IE Tweaks

• You can force IE to apply transparence to PNGs.
  “In theory, PNG files do support varied levels of transparency;
  however, an Internet Explorer 6 bug prevents this from working
  cross-browser.” [CSS Tips, Outer-Court.com]
  

  #regular_logo
  {
  	background: url('test.png'); width:150px; height:55px;
  }
  /*  */
  * html #regular_logo
  {
  	background:none;
  	float:left;
  	width:150px;
  	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');
  }
  /* */
  

  
  
• You can define min-width and max-width in IE. You can use Microsoft’s dynamic expressions to do that. [Ten More CSS Trick you may not know]
  

  #container
  {
  	min-width: 600px;
  	max-width: 1200px;
  	width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
  }
  

  
  
• You can use Conditional Comments for IE. “The safest way of taking care of IE/Win is to use conditional comments.
  It feels more future-proof than CSS hacks – is to use Microsoft’s
  proprietary conditional comments. You can use this to give IE/Win a
  separate stylesheet that contains all the rules that are needed to make
  it behave properly. ” [Roger Johansson]
  

  <!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie.css" />
  <![endif]-->
  

  
  

When you're first learning to build a Web site, you often don't
think much about style sheets, as you're too busy learning to tell a
<p> from a <br>. But once you've mastered the basics, CSS
is an obvious place to go to make your pages more user friendly and
manageable. These ten tips will get you up and running with CSS faster
than you might think.

1. The best way to learn CSS is in a free class.
   
   Luckily there is one offered on this site.
2. You can use CSS on more than just span and div tags.
   Make
   sure that you style everything that makes sense in your document, don't
   just limit yourself to span and div tags. I have seen many new CSS
   developers spend a lot of time trying to convert their sites to span
   and divs, when it's not necessary. You can style any tag you need to.
3. Know the difference between a style class and id.
   
   Classes can apply to multiple elements on the Web page, while IDs refer to only one element.
4. Make sure that you name your classes and ids correctly.
   
   CSS does not allow class and id names to start with a number or other non-alphabetical character.
5. Style the larger elements first.
   
   When you style a page, think about first the entire page (<html>
   and <body> and then the larger elements like <p> and so on.
6. In
   fact, you should consider giving all your pages the style of html,body
   { margin: 0px; padding: 0px; border: 0px; }. Then you have a standard
   palette to work from.
7. Learn how to style your body tag.
   
   Avoid having anything special in your <body> tag. That way you can have a more standards-compliant page.
8. Stay out of TRouBLe.
   
   Memorize that mnemonic to use borders and padding effectively with your CSS styles.
9. Do your best to understand CSS positioning before you attempt a layout.
10. And finally, if you want to read more Cascading Style Sheets tips, receive a tip a day for over 30 days with the About Web Design CSS Tips Newsletter

Question: I am looking to begin working from home as a freelancer. How difficult is it to break into this business? - K.P

Answer: I get asked this question all the time,
K.P., and for good reason: breaking into freelancing can be a bit
overwhelming. I know it was quite stressful and daunting for me when I
first started. Thankfully, as long as you know what to do, it’s not too
bad.

It’s all about deciding what you are good at and then rolling with
that. Are you strong grammatically? If so, you may find a lot of work
as a proofreader or maybe a writer. Are you an experienced programmer?
Then there are lots of programming-related work opportunities
available. How about web design? You could easily start selling your
services to others and designing web sites for them. There are
literally hundreds of different opportunities for you as a freelancer.

Next, when you decide what to do, you can begin exploring where to
find work in that area. Try free sites like Craigslist.org,
RentaCoder.com and ScriptLance. Often, you’ll be required to supply a
sample or two of your work–in which case, you should spend a little
time developing it, whether it’s a small web site or article. Even if
it isn’t required, showing your experience to perspective buyers is a
good idea as it shows that you have what it takes to complete their
projects.

Finally, make sure you have a spreadsheet in place to carefully keep
track of how much income you are receiving, expenses and also taxes.
One of the biggest mistakes I see is freelancers who forget about taxes
only to realize at the end of the year that they owe a bunch. Take the
time now to set aside 15.3% of your profit (after expenses) for the
self-employment tax. Also set aside enough to cover federal, state and
city taxes.

Good luck!

I have to admit that as a freelancer, I’ve hit a bit of a rough
spot. I’ve grown tired of writing articles on topics that don’t in the
least bit interest me for a small rate of $5 per 500 word article. I
had thought before that I HAD to do this in order to make enough money
to pay the bills. That was until I remembered a site that I have used a
little bit in the past: Associated Content.

Associated Content has been around a lot, and I have been using it
since 2007. I’ve had 18 published articles with only 2 rejections
(because the articles were too generic). My average offer was $4.70,
each article was around 400-500 words and each were on topics that I
actually enjoyed. I’ve made around $3-5 per month in performance
payments and have 10,000 page views. (see my content producer page here)
Most of these views came from an article I did on Guitar Hero III, a
game that greatly interested me at the time. Now, granted, $4.70 isn’t
a huge amount of money, but for an article on something that I like and
an article that takes a mere 10-15 minutes to write, that’s not bad. I
figure I can write 4-5 of these articles per hour, which adds up to
$18-$23 pay per hour, not a bad rate at all.

So I have made the decision to finish up my last couple freelance
projects for clients before doing what I like to call an AC experiment.
I will be working exclusively for AC for one month starting on May 8. I
will be writing 9-10 articles per day, which should take 2-2 and a half
hours. My goal is to make between $42.3-$47 a day, or $211-$235 per
week (which adds up to roughly $800-$900 a month). This is what I
consider to be “part-time”, which is all I want for right now, since I
am simply seeking to make some extra money this summer.

9-10 articles per day sounds like a lot, and it is for people who
have difficulties in coming up with topics or are used to having topics
given to them by clients, like I am. That’s why I’ve sat down and
plotted out two days worth of article ideas so that, when I go to write
my AC articles, I have all the ideas right in front of me.

If this experiment goes well, and I earn what I want to earn, I plan
on expanding to possibly as much as 20 articles per day, which would
make $1,800 a month and would take probably only 4 hours to produce. A
nice wage for what is still considered part-time work.

Since I know there is such an interest in AC and making money
writing for them, I’ve decided to post updates of the experiment
throughout the next month. Look for the first update next week, after I
hopefully receive payment.