CSS or Cascading Style Sheets is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to be used in HTML and XHTML respectively. It can also be used in XML.

Uses

CSS can be used to define colors, fonts, layout, and other aspects of document presentation in a web page. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control presentation characteristics, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. CSS also allows authors to move much of that information to a separatestylesheet resulting in considerably simpler HTML markup.

Sources

How to Insert a Style Sheet

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section:

href="mystyle.css" />

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

This is a paragraph

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector:

h3
{
color: red;
text-align: left;
font-size: 8pt
}

Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color: black}

To make the style definitions more readable, you can describe one property on each line, like this:

p
{
text-align: center;
color: black;
font-family: arial
}

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6
{
color: green
}

With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align: right}
p.center {text-align: center}

You can also define styles for HTML elements with the id selector. The id selector is defined as a #. The style rule below will match the element that has an id attribute with a value of "green":

#green {color: green}

A full definition of CSS can be found here.

CSS bug fixing

This is one of the things that a good web designer has to go through each time he or she codes a page using CSS for layout. Following Web Standards is the way to go and it should be an obvious choice when you take your job serious. Today I want to share some of my thinking process and the steps I usually go through when I'm at this phase of the
process. But before jumping on the bandwagon to fix things consider these criteria...

Make sure your markup is well structured

Make sure your markup is well structured, in other words use the appropriate markup for the appropriate content. Use headings for titles, paragraphs for blocks of text, ordered and unordered lists to sum things up in list form or for your navigation, fieldsets in combination with legend and label elements for forms... Last but not least, use tables only for
what they're meant for, tabular data.

Fixing for IE

Ok, your code is well structured and your page validates. The page looks fine in browsers that follow the standards like Firefox and Safari, but you still need to fix a few things for IE. How do you proceed? Here are the steps I usually follow. It comes down to analyzing and trying to isolate the problem...

Isolate the problem via XHTML

You can try to disable certain blocks of code in your XHTML. Use comment tags and put certain blocks of XHTML coding in comments. View the page and see if the problem is still there. Do this block by block starting with the bigger ones: left column, right column, content, header etc. At a certain point chances are you see your problem disappear.
If you commented out a big block of content, uncomment smaller nested blocks of content now to isolate the problem until you have as less code in comment as possible.

Isolate the problem via CSS

Isolating the problem via XHTML is not always an option and so you can also try to disable certain properties of styles or certain styles all together to see what happens. Some styles might interfere with other styles. Some styles need to be more specified before they have effect because they've been overwritten by another style etc. Everybody has his or her own method to try to solve things and we all have our favorite tools. Mine is Adobe Dreamweaver and even a notepad has done wonders for me. There are also a number of plugins for Mozilla Firefox that you can use to debug your css like CSS Viewer, FireBug and Web Developer Tool.

In general, CSS is a great way to present your web page. SEO will also benefit on your CSS use, it will no longer need to crawl unwanted codes like because you wont be using tables unless there is a tabular data to present. SEO will be so efficient on your web page. So i urge every web designer out there to use CSS every time they design web pages. After all it is the road to enlightenment.

Every now and then, as a web or graphic designer, you hit a low point or slump in your creativity. A stage where you start to question yourself and sometimes question your skills.

The slump can bring about frustration about a project, and now, with quite a number of years in the web design game, I thought I would share my experiences with slumps and techniques I use to overcome them.

remember the good times

I think all designers feel that energy and buzz when we crack that bit of code, get that mark-up to validate or finish a mock-up for a client. It really is a buzz to enjoy your work and get paid for doing this... life is pretty spectacular!

sleep on it

It honestly is that simple sometimes. Just go to bed and try and forget about it. Have a good sleep and believe it or not, nine times out of ten the solution will wake up with you. I have done this loads of times, I have also not done this loads of times and sat there until the early hours of the morning sipping coffee and eating to keep myself awake hoping that my worn out mind and tired body can muster a solution.

look for inspiration

I guess this is the proactive way of dealing with the web/graphic design slump and probably one of the best ways to find a new idea. I am not talking about website galleries - they have their uses.

But I prefer looking away from the web, maybe a magazine or book related to the subject. Photography and art galleries will have you brimming with ideas but I personally find a non-visual inspiration the most effective. Sit down with your eyes closed and listen to a good album. I have done this many a time and found that the music somehow has colors and patterns associated with it.

For instance, I make very different websites when I listen to John Mayer then when I listen to Led Zepplin and sometimes I end up going in a completley different direction due to a song I have listened to and will revise my design.

plan your time

I think a big part of losing your creativity is often worrying that your not going to meet a deadline or your nerves kick in about the end product not being good enough. I have found that the best way to combat this is to plan your time.

Then take this target date and list all the tasks that have to be completed to enable that task to be achieved. Split those tasks up over the days you have until your design target date and presto... you have a plan. Once you have completed your tasks for the day, you must stop. By ticking a task off throughout your day, you will feel like you are making progress.

Hope this helps...

One of the hardest parts of graphic design whilst creating a website is the logo design. It is often very hard to create an image that truly represents a company, but if we keep certain factors in mind graphic designers can normally create a suitable design.

Symbolism: Is there a symbol that represents the companies core trade? Like a house for real estate agents or a flower for a florists?

Abstraction: An abstract shape could represent the companies core trade. Like a real estate agent could use a block shape to signal stability or a florist could use a circular shape that represents a friendlier signal.

Colour: Colours can be used to signal emotional responses. For instance, the colour red is associated with fertility, birth, danger, strengh, love and passion. The colour green is asociated with nature, health, cheerfulness, environment, money. Lighter shades of colours can be used to draw the eye away and brighter colours to draw the eye in.

Minimalism: Less is most certainly more when designing a logo as the most successful logos are simple and, most importantly, easy to remember. Think of Nike, McDonald's, Coca-Cola.

Typography: The fonts used for any lettering should also represent the brand. For instance, serif fonts signal a more traditional feel, whilst san serif fonts have a modern feel. A unique font can also make you stand out from the crowd. For instance, the Coca Cola font or IBM.

Texture: Add some dynamism by adding a texture. For instance, a wood grain for a health product or a scratched and rough stone effect for a builder. Adding another dimension to your logo can give it an edge and bring it out of the web page, a 3d edge adds an angle and is often used to infuse a modern connatation.

1. Splash Page

I’ve seen this mistake many times, where people put up a big banner image and a link "Click here to enter" on their homepage. The worst case — the "enter" link is embedded in the Flash object, which makes it impossible for the search engine spiders to follow the link.

This is fine if you don’t care about what a search engine knows about your site; otherwise you’re making a BIG mistake. Your homepage is most likely your website’s highest ranking page, thus is crawled most frequently by spiders. Your internal pages will not appear in the search engine index without the proper linking structure to internal pages for the spider to follow. Your homepage should include (at minimum) target keywords and links to important pages.

2. Non-spiderable Flash Menus

Many designers make this mistake by using Flash menus such as those fade-in and animated menus. They might look cool to you but they can’t be seen by the search engines; and thus the links in the Flash menu will not be followed.

3. Image and Flash Content

Web spiders are like a text-based browser; they can’t read the text embedded in the graphic image or Flash. Most designers make this mistake by embedding the important content (such as target keywords) in Flash and image.

4. Overuse of Ajax

A lot of developers are trying to impress their visitor by implementing massive Ajax features (particularly for navigation purposes). But did you know that this is a big SEO mistake? Because Ajax content is loaded dynamically, therefore it is not spiderable or indexable by search engines.

Another disadvantage of Ajax — since the address URL doesn’t reload, your visitor can not send the current page to their friends.

5. Versioning of Theme Design

For some reason, some designers love to version their theme design into sub level folders (ie. domain.com/v2, v3, v4) and redirect to the new folder. Constantly changing the main root location may cause you to lose backlink counts and ranking.

6. “Click Here” Link Anchor Text

You probably see this a lot where people use "Click here" or "Learn more" as the linking text. This is great if you want to be ranked high for "Click Here". But if you want to tell the search engine that your page is important for a topic, than use that topic/keyword in your link anchor text. It’s much more descriptive (and relevant) to say “learn more about {keyword topic}”.

Warning: Don’t use the EXACT same anchor text everywhere on your website. This can sometimes be seen as search engine spam too.

7. Common Title Tag Mistakes

Same or similar title text:

Every page on your site should have a unique tag with the target keywords in it. Many developers make the mistake of having the same or similar title tags throughout the entire site. That’s like telling the search engine that EVERY page on your site refers to the same topic and one isn’t any more unique than the other.

One good example of bad Title Tag use would be the default WordPress theme. In case you didn’t know, the title tag of the default WordPress theme isn’t that useful: Site Name > Blog Archive > Post Title.

Why isn’t this search engine friendly? Because every single blog post will have the same text "Site Name > Blog Archive >" at the beginning of the title tag. If you really want to include the site name in the title tag, it should be at the end: Post Title | Site Name.

Exceeding the 65 character limit:

Many bloggers write very long post titles. So what? In search engine result pages, your title tag is used as the link heading. You have about 65 characters (including spaces) to get your message across or risk it getting cutoff.

Keyword stuffing the title:

Another common mistake people tend to make is overfilling the title tag with keywords. Saying the same thing 3 times doesn’t make you more relevant. Keyword stuffing in the Title Tag is looked at as search engine spam (not good). But it might be smart to repeat the same word in different ways:

"Photo Tips & Photography Techniques for Great Pictures"

“Photo” and “Photography” are the same word repeated twice but in different ways because your audience might use either one when performing a search query.

8. Empty Image Alt Attribute

You should always describe your image in the alt attribute. The alt attribute is what describes your image to a blind web user. Guess what? Search engines can’t see images so your alt attribute is a factor in illustrating what your page is relevant for.

Hint: Properly describing your images can help your ranking in the image search results. For example, Google image search brings me hundreds of referrals everyday for the search terms "abstract" and "dj".

9. Unfriendly URLs

Most blog or CMS platforms have a friendly URL feature built-in, however, not every blogger is taking advantage of this. Friendly URL’s are good for both your human audience and the search engines. The URL is also an important spot where your keywords should appear.

Example of Friendly URL: domain.com/page-title
Example of Dynamic URL: domain.com/?p=12356

Most online readers don’t read line by line; instead they scan from one point to another. For this reason, designers create typographic contrast and flow by emphasising certain text. Contrast is important because not all content within a page have the same value; some have greater significance than others.

By creating contrast, you can direct the reader’s attention to the important messages, and at the same time enhance the visual appearance of a certain website.

Here are seven basic methods on how to create typographic contrast:

1. SIZE

Larger font size indicates higher priority because it draws a reader’s attention. This method is therefore commonly applied to headings. On the other hand, you can de-emphasise by using smaller font size.

2. TYPEFACE / CLASSIFICATION

Contrast can be achieved by mixing different typeface classifications. However, due to limited web safe fonts, there are only two main classifications commonly used: serif and sans-serif. Generally, to create a contrast between the headings and the body text, designers use serif font for the headings and sans-serif font for the body, or vice versa.

If you want to go beyond the web safe fonts, there are two more options:

   1. CSS image replacement, that is to use CSS to hide the text and replace with a background image.
      [css + bg image = static graphic img]
   2. sIFR (Flash replacement), that is to use Javascript and Flash technology to replace the text with the embedded font.
      [Javascript+Flash = any font dynamically]

Note: CSS image replacement or sIFR is not practical for long paragraph, so they are normally used for headings.

3. COLOUR

Colour contrast is a common way to distinguish between navigation, headings, links, and body text. You can use faded color to indicate that something is disabled or unavailable. Sometimes you don’t need to make something bigger to get more attention, therefore you can create emphasis by using a brighter color, such as red.

You can also use color to distinguish individual words within a group of text. When small font size combined with lighter tone color, the importance of the text is further de-emphasised.

4. CASES

When the same typeface is used for the headings and body text, contrast can be established by changing the case. Uppercase tends to get more attention than lowercase, therefore it is more suitable for headings. The CSS property to transform text to uppercase is text-transform: uppercase.

Tips: avoid using uppercase in the body text or in long sentence because it will reduce readability.

5. STYLE AND DECORATION

One of the common mistakes made by most editors (particularly Microsoft Word users), is the tendency to use the underline decoration to emphasise certain text. This is a big mistake in web typography. Readers will misinterpret the underlined text as a link because the browser underlines the link by default. So, do NOT underline any text that is not a link when posting on the web. Instead, you can use italic font style.

6. WEIGHT

Making certain text a heavier weight (bold or strong) can also create emphasis. Another common mistake is that people tend to bold the entire line of text. By doing so, the emphasis/contrast of the text is lost.

7. SPACE

Space plays the most important part in maintaining flow of your design. Good use of space will tell the reader where to start, when to pause, where it ends, and what to do next. There are various ways to create space:

    * Block break (padding or margin) is the space in between the block elements.

    * Paragraph break (padding or margin) is the space created after the element.

    * Tracking (letter-spacing) is the space in between the characters.

    * Leading (line-height) is the space in between the lines.

    * Indentation (padding or margin) is commonly used for blockquote and list elements.