goldenTwine blog

Creative CSS – An Introduction

Posted by: Subrato Paul on: December 20, 2009

Designing with CSS – An Introduction

This article is a small introduction to two new series about Cascading Style Sheets (CSS)

CSS Tips, Tricks and Techniques
CSS Snippets

With improvements in browsers’ compliance with W3C standards there is a widespread acceptance and usage of XHTML/XML along with Cascading Style Sheets (CSS) to style web document elements and objects.

The aim of this introductory article is to familiarize those who are totally new to CSS with some of the basics. To gain the most from these two series you are expected to be a web designer with elementary knowledge of XHTML and CSS. The idea is to provide web designers with the ability to create standards compliant, accessible web sites using XHTML and CSS. The CSS tips, tricks, techniques and snippets to be published on our blog would enrich and supplement your knowledge of CSS.

Purpose of CSS
The purpose of CSS is to provide web developers with a standard way to define, apply, and manage style characteristics, such as font, size, colour, and position, to the elements of XHTML documents. CSS provides these capabilities through a technical model based on parent/child hierarchy of the web document, the separation of style from content, and World Wide Web Consortium (W3C) created and documented set of standards.

Using Cascading Style Sheet
CSS information can be applied in different ways. CSS style information can be either attached as a separate document or embedded in the XHTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so that authors can tailor the presentation appropriately for each medium.

Cascading Order
What style will be used when there is more than one style specified for an XHTML element?
Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority:

Author Styles (style specified by the web page author)

There are three ways of specifying a style sheet:

Inline Style: inside an HTML element, specified using the “style” attribute.
Internal Style Sheet: embedded style in the head section of an HTML page.
External Style Sheet: a separate CSS-file referenced from the document.

User Style

a locally stored CSS-file specified by the user in the browser options, and acting as an override, to be applied to all documents.

User Agent Style (Browser default)

the default style sheet applied by the user agent, e.g. the browser’s default presentation of elements.

The style sheet with the highest priority gets used to display the content. Declarations that are not set in the highest priority source, will get passed on by a source of lower priority such as the user agent style. This process is called cascading.

So, an inline style (inside an XHTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

Caution:
If the link to the external style sheet is placed after the internal style sheet in XHTML document <head>, the external style sheet will override the internal style sheet!

Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Avoid using inline style!

To use inline styles you use the style attribute in the relevant element. The style attribute can contain any CSS property.

The example shows how I have changed the colour of header in this article from the original Albeo theme:

<h2 style="color:#0183ac;">Designing with CSS - An Introduction</h2>

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 of an XHTML page, by using the <style> tag.

Example:
In my main style sheet for my website with more than hundred pages, h1 and p elements are styled like this:

h1 {text-align:left;font-weight:bold;font-size:14px;color:blue;margin:5px 5px} p {text-align:justify;padding:0 5px;margin:5px 0}

But in one particular page I would like them to be different, so I use an internal style sheet on that page, as shown below:

<head> <style type="text/css">  </style> </head>

External Style Sheet
External style sheets are best as you have the most control over styles. 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 website by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the head section:

<head> <link rel="stylesheet" type="text/css" href="mystyle.css" media="screen" /> </head>

An external style sheet can be written in any text editor, and should be saved with a .css extension. The file should not contain any HTML tags. An example of a style sheet file is shown below:

body {font-family:verdana,arial,helvetica,sans-serif;font-size:11px;line-height:1.25;color:#18397c;background:url('../asset/main.png') no-repeat top center} h1 {text-align:center;font-weight:700;font-size:14px;color:#31659c;margin:0 0 5px} p {text-align:justify;padding:0 5px;margin:.5px 0}

Tips:
Even multiple external style sheets can be referenced inside a single XHTML document. On my website, I have different style sheets for layout, typography, navigation, and forms, etc. If a page doesn’t have a form then it need not have a link to style sheet for forms. I also avoid whitespace, and use shorthand to reduce the file size.

Multiple Styles Cascade into One
If some properties have been set for the same selector in different style sheets, the values will be inherited from the higher priority style sheet as explained before.

For example, the h2 selector has the following properties in different style sheets for a document:

External Style Sheet

h2 {text-align:center;font-weight:bold;font-size:13px;color:brown;background-color:lime;padding:2px 0;margin:5px 0}

Internal Style Sheet

h2 {text-align:left;padding:2px 5px}

Inline Style

<h2 style="font-size:15px;color:red;">Designing with CSS - An Introduction</h2>

The virtual style sheet for the h2 element on the page with an inline style and the internal style sheet and linked to the external style sheet will be:

h2 {text-align:left;font-weight:bold;font-size:15px;color:red;background-color:lime;padding:2px 5px;margin:5px 0}

The font-size and color are inherited from the inline style (highest priority), text-alignment from the internal style sheet, and the rest from the external style sheet (lowest priority). Interestingly, padding is modified as per the internal style sheet.

CSS Rules
CSS is a simple language. It is easy to read and write, and takes very little time to understand the basics and start building your own style sheets.

In CSS, a rule is a statement about one style aspect of one or more XHTML elements. A style sheet consists of one or more rules that apply to an XHTML document. A CSS rule is made up of a selector and a declaration. Each declaration itself consists of a property and a value.

Selectors are one of the most important aspects of CSS as they are used to “select” elements on an XHTML page so that they can be styled. The declaration tells a browser how to style any element on a document that is selected.

selector {property:value}

The selector is the link between the XHTML document and the style. It specifies which XHTML elements are affected by the declaration. The declaration is that part of the rule that sets forth what the effect will be. You can group selectors together that share a common declaration.

The property is a quality or characteristic of that element that you are choosing to style. CSS2 defines around 120 properties and you can assign values to all of them. The value is a precise specification of the property. You may specify more than one property for one selector.

Punctuation
Each selector in a group must be separated by a comma. A declaration is surrounded by curly braces. Property and value are separated by a colon. If the value is multiple words, put quotes around the value. You must separate multiple properties for one selector with a semicolon. Do not leave spaces between the property value and the units! “margin-left:10 px” (instead of “margin-left:10px”) will work in IE, but not in Firefox or Opera.

To make your CSS code more readable, you can put each property and its value on a line by itself. But this will increase the size of your style sheet.

Example:

p {font-family:Cambria,"Times New Roman",Times,serif;text-align:justify;padding:0 5px;margin:5px 0} p { font-family:Cambria,"Times New Roman",Times,serif; text-align:justify; padding:0 5px; margin:5px 0 } h1,h2,h3 {text-align:center;font-weight:700;font-size:14px;color:#31659c;margin:0 0 5px} h2 {font-size:13px} h3 {font-size:12px}

The curly braces and colon make it possible for the browser to distinguish between the selector, property, and value.

Type Selectors
A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree. Any XHTML element type can be used as a type selector. Type selectors are the simplest kind of selectors.

Example:
The following rule matches all h1 elements in the document and sets their font size to 14px:

h1 {font-size:14px}

id and class Selectors
In addition to setting a style for an XHTML element, CSS allows you to specify your own selectors called “id” and “class”.

id Selector
The id selector is used to specify a style for a single, unique element. You can use an id selector name only once in your XHTML document. The id selector uses the id attribute of the HTML element, and is defined with a “#”.

Example:

#wrapper {width:960px;min-height:100%;background-color:#f6f8fa;margin:0 auto}

The wrapper of my website is used only once in a page, so I use id selector for this outermost container.

<div id="wrapper"> ... content </div>

Caution:
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

class Selector
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector can be used as often as you need within your XHTML document. This allows you to set a particular style for any XHTML element with the same class. The class selector uses the XHTML class attribute, and is defined with a “.”

Example:

h2 {text-align:center;font-weight:bold;font-size:13px;color:brown;background-color:lime;padding:2px 0;margin:5px 0} p {text-align:justify;padding:0 5px;margin:.5px 0} .left {text-align:left}

Now, if I want, I may left-align my h2 element with a padding of 5px as follows:

<h2 class="left" style="padding-left:5px;">Designing with CSS - An Introduction</h2>

Similarly, any XHTML element with class name of “left” will be left-aligned.

<p class="left">This para is left-aligned, and not justified as defined in the external style sheet.</p>

Caution:
Do NOT start a class name with a number! This is only supported in Internet Explorer.

This article is not a tutorial, and there are other selectors like:
universal selector, descendant or contextual selectors, child and sibling selectors, attribute selectors, pseudo-elements and pseudo-classes.
I will explain these selectors as and when I use them in these two series.

Another thing that I haven’t discussed here is that you have an option of two different writing styles for your CSS rules: longhand and shorthand. I always prefer shorthand that allows you to condense your rules by assigning multiple properties and values in a single line, and create a smaller file which uploads faster.

CSS Comments
Comments are used to explain your code, and may help you when you edit your code at a later date. Comments are ignored by browsers. Comments may not be nested. CSS comments begin with characters “/*”, and end with characters “*/”.

Example:

/* Copyright 2009 GoldenTwine Informatics Style name: gti - main style web 2.0 W3C CSS Validator - Valid CSS! */ /* clearfix */ .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix {display:inline-block} /* Hides from IE-mac \*/ * html .clearfix {height:1%} .clearfix {display:block} /* End hide from IE-mac */

For a short guide to styling your Web pages, try Dave Raggett’s
Adding a touch of style.
It will show you how to use W3C’s Cascading Style Sheets language (CSS) as well as alternatives using HTML itself.

Further information:
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
Introduction to CSS 2.1
Syntax and basic data types
Selectors

With this brief introduction, get ready to share with us tips, tricks, techniques, and snippets which will enable you to design your web document with creative CSS. Your comments, suggestions, and contributions are warmly anticipated!

Small Business Website Design
Get a professionally designed special custom five-page website ideal for small business that need an online presence as well as personal sites or informational sites at an amazing price of only $125.
Visit our website to learn more!

Author: Subrato Paul lives in Kolkata, India. He’s the owner of GoldenTwine Informatics, which he founded in 2003. He is a website designer, Internet marketer, and provides social networking and bookmarking services. He writes in his official blog and as a guest writer about internet trends, computer issues, internet marketing, website design and development, and his website…

Social Networking
Join goldenTwine on Twitter, Facebook, MySpace and LinkedIn.

Did you like this article?
If you’re new to goldenTwine blog, you may want to
subscribe to our RSS feed | Permanent Link.
Thanks for visiting!

Tags: CSS, designing with CSS, snippets, techniques, tips, tricks

ContentMixi – Market Place for Digital Products

Posted by: Subrato Paul on: December 10, 2009

In: Blogging| Web Development| Website Design| Website Review
2 Comments

Buy and Sell Digital Products with ContentMixi

Review Introduction
As a social media blogger I enjoy reviewing websites, products and services that have relevance to my official website for the benefit of my community. My reviews are impartial and unbiased. As a web developer and designer I would like to share my views about ContentMixi, a market place for digital products, to help you buy or sell digital content from Company logos to full website templates.

What makes ContentMixi.com unique online marketplace is that you may buy one digital product and sell another. So you could be a buyer or seller at the same place for a vast range of digital products like high quality website templates, logos, content articles, ebooks, illustrations, and animations. So I can safely say that this is truly a community driven market place for digital content.

Digital Contents
The site is beautifully designed with separate galleries for various digital products. Each product is shown as a thumbnail with regular price tag, a link to view or read more about it, and a link to buy it. You may also make your favourite list or pass on to your friend.

Web Templates
Website templates including CSS, PSD and Joomla templates, even for full websites; WordPress themes for your blog; and templates for your Newsletter. The templates come under various categories from agriculture to web design. But I think the template view could be made much more clearer.
Logos
Corporate, casual, caricatures, and others.
Logos on display are very limited but the quality of work is good.
Content Articles
Business, technology, entertainment, education, health, reviews, fiction, and others.
The content section is not fully developed. You only see a brief summary, and you will have to communicate with them to get to know more.
E-Books
Business, technology, entertainment, education, health, tutorials, fiction, and others.
The E-Books section is pretty vague.
Illustration
They have not yet received any contribution to display.
Animation
This section also doesn’t have much to display.

The Company is still in Beta launch. The concept is very good. They have made a beginning in the right direction. There is a lot of scope to grow, and make it more fruitful. It is a community driven market place, so a lot depends on how Companies and freelancers contribute to its growth. The growth of the ContentMixi Market Place depends upon Sellers and Buyers.

Value Proposition for Sellers
Whether you are a small or big Company or an individual free lancer, you can upload your digital products at ContentMixi and start earning money from the sale of your products.
There is no fee for sellers to upload their products and commission is charged only when an actual sale happens, so sellers don’t have anything to lose.
ContentMixi is marketed aggressively via different marketing channels and also by a large network of affiliates, hence sellers will obviously get more visibility.
Sellers get an additional marketing channel apart from any other channel where they may be selling their products. Sellers may choose to sell their products exclusively at ContentMixi.com or sell their products (if it is a repeat sale product) at places other than ContentMixi. So ContentMixi will help the sellers in increasing their revenue.

Value Proposition for Buyers
Buyers get to see a large variety of products from different vendors at the same place, do the price and product comparisons and take a quicker buying decision.

There is an FAQ page which addresses the various issues of product owners, product buyers, as well as affiliates like price, commission, and sales support.

They have a blog which has not yet taken off. You may follow them on twitter, and become a fan on facebook.

Management
ContentMixi is owned and managed by three corporate people who have their deep footsteps on the Internet World for quite some time.

You can download some of their free products at:
Free Download

ContentMixi Affiliate Program
If you are a webmaster or an affiliate marketer, you can now promote ContentMixi and make money.

Some salient features of our affiliate program are:

20% Commission on LIFE-TIME VALUE of the customer.
Cookies never die. You earn on every sale. Every product. Every service.
You can send prospects to any page you like. Every page is landing page.
Dozens of banners to choose from.
Commission payout on first Friday of every month by PayPal.

Contest for Bloggers!
ContentMixi has launched a contest for bloggers. The bloggers are expected to review contentmixi.com on their blog and the top 3 reviews will win attractive prizes.
The last date of the submissions is December 10, 2009. The results of the contest will be announced on December 25, 2009 on their website.
Click here to view the contest details!

Social Networking
Join goldenTwine on , twitter, Facebook, MySpace and LinkedIn.

Did you like this article?
If you’re new to goldenTwine blog, you may want to
subscribe to our RSS feed | Permanent Link.
Thanks for visiting!

Tags: bloggers contest, contentmixi, digital products, logos, website templates

Tweet, twitter, Tweeter – Ad.ly

Posted by: Subrato Paul on: December 4, 2009

In-Stream Advertising on Twitter – Ad.ly

Twitter is a global phenomenon and one of the fastest growing sites with millions of users from around the world. Tweets are valuable pieces of content that require time and hard work to produce. There is a need for publishers to be compensated for the content they create on twitter. The most logical form of compensation for this content comes in the form of advertising.

In-Stream Advertising
In-Stream Advertising is displaying ads as tweets to your followers under your twitter profile to promote an advertiser’s product or service, and you will get paid money for showing that ad from the sponsor.

What is Ad.ly?
Ad.ly is an in-stream advertising platform that matches prominent and higher-value twitter users (celebrities, bloggers and regular Internet users) with top-tier advertisers. It helps you to get compensated for your hard work creating content on twitter.

Ad.ly for Advertisers
Ad.ly enables advertisers to reach the highly sought after twitter audience by connecting them with the most so-called influential and popular twitter members in the community.

Ad.ly for Publishers
Ad.ly enables twitter publishers to make money from the content they produce on twitter by sending one tweet every day from advertisers that they approve. In order to ensure authenticity, every Ad.ly tweet is explicitly approved by the twitter publisher. They are able to set the price they want advertisers to pay and can optionally donate part or all of their earnings to charity.

How to get started?
You may join Ad.ly in 3 simple steps.

Sign Up and create an account
Authorize your Twitter Account
You will have to authorize your twitter account to give Ad.ly secure access to your twitter account to automatically post ads that you approve in your feed.
Set Account Details
You set the price per tweet that advertisers pay, but Ad.ly will suggest a price for you if you’re not sure how much to ask. It includes Ad.ly’s platform fees. You can change your price anytime.

Welcome to Ad.ly!
After you have joined you will receive a welcome mail. But you may not have an advertiser immediately. You will have to sit back and wait till Ad.ly matches you with a sponsor. When Ad.ly connects you with an advertiser, you will receive a request from the advertiser, which you can approve or deny.

Are you serious?
Advertiser or Publisher can sign up today, and
Make money on Twitter with Ad.ly In-Stream Advertising

How does Ad.ly work?
Ad.ly automatically sends 1 advertisement message in your feed every day from advertisers that you approve. With Ad.ly, you approve every tweet/ad that is sent in your feed. The ad will show up in your stream at a randomized time for the day it was approved.

For the sake of disclosure, Ad.ly messages (except tweets for charity) are marked as ad.ly ads (Ad by http://Ad.ly). In order to ensure authenticity, every Ad.ly message has to be explicitly approved by the twitter publisher and is disclosed as an ad.

How do I tweet for charity?
With Ad.ly you can send part or all of your earning to charity. When you’re tweeting for charity, the end of the approved ads in your feed will be disclosed with (Ad 4 Charity).

Referral Program
Ad.ly has a referral program which allows you to earn 12% of everything your referrals make on Ad.ly.

Learn more about Ad.ly, visit website:
In-Stream Advertising on Twitter – Ad.ly

Ad.ly Race – Win a Macbook Pro!
Refer your friends to Ad.ly and make 12% of whatever they make, and with the Ad.ly Challenge, the person who gets most the most eligible twitters to sign up for Ad.ly wins a Free 13’ Macbook Pro (2nd and 3rd place will also get an iPod Touch). An eligible twitterer is someone you refer that has been a twitter user for at least 120 days and has at least 50 followers. The contest will start on Monday, November 16th at 12am PST and end on Sunday, December 13th at 12 PM PST (1 month).
Join the Ad.ly Race here

Social Media Marketing
Social media marketing is the process of promoting your site or business through social media channels.
Visit our website to learn more!

Follow goldenTwine
Join the social networking revolution, follow us on twitter and Facebook!

Did you like this article?
If you’re new to goldenTwine blog, you may want to
subscribe to our RSS feed | Permalink.
Thanks for visiting!

Tags: earn on twitter, in-stream advertising, monetize twitter, Social Media Marketing, twitter, twitter money making

Insider Secrets to Marketing Your Business on the Internet

Posted by: Subrato Paul on: November 30, 2009

30-Day Trials to the Insider Secrets eBusiness Start Up Program

Start Your Own Successful Internet Business From Square One, With a Proven A-Z Program for Making Money Online.

If you’d like to start making money on the Internet right away without any risk, but don’t have ANY business experience, technical skills, or ideas for what you should sell, take a look at Insider Secrets to Marketing Your Business on the Internet, a comprehensive, step-by-step roadmap that teaches anyone how to quickly and easily start a successful Internet business from scratch.

Insider Secrets has already helped thousands of people start their own profitable websites… earning six-figure incomes in many cases.

Created by the Internet Marketing Center, Insider Secrets reveals the exact process they themselves used to generate over $100 Million in online sales.

Using simple, easy-to-understand language, along with plenty of in-depth video and audio tutorials, Insider Secrets walks you through the six critical steps to building a successful Internet business from square one:

Find a lucrative niche market and decide what to sell…
Easily create your website, complete with winning sales copy
Attract your first eager visitors …
Take your first credit card payment
Ramp up sales and traffic quickly
Automate your business to be “hands free”

Then, once your website is live, and you’re getting your first visitors, you can take advantage of Insider Secret’s hundreds of ADVANCED strategies to improve your business, and drive your sales even higher!

And best of all, you can be successful with Insider Secrets even if you have no business experience, no computer skills of any kind, and no ideas for a business or even a product.

And because Insider Secrets is 100% online, they’re able to update it whenever there are new test results to add, or new techniques to try out, so it NEVER goes out of date!

Their latest update? They’ve just added a brand-new series of expert-led webinars that will show you how to make even MORE money with THREE hot new techniques, including Twitter and AdWords!

When you become an Insider Secrets member, you get:

Over 1,250 pages of detailed, moneymaking strategies and techniques carefully laid out in easy-to-follow steps
“Real time” updates with the latest and greatest online marketing strategies
Streaming videos to make your learning even easier
Content you can print out, or download to your iPod, so you can learn new techniques, even when you’re on the go, and away from your computer
A “private rolodex” of hundreds of Internet marketing tools and resources
A private 15-minute phone consultation with one of our marketing specialists
IMC’s exclusive Ebusiness Road Map System

Insider Secrets contains every last tip and technique you’ll need to start your money-making website. Thousands of other people have already used it to earn money online — six figures annually, in many cases — so you can be confident it will work for you, too!

It also comes with a 90-day, 100% money back guarantee, so there’s no risk in giving it a try! Within minutes of receiving an order, we’ll send out a personal username and password for access to the Insider Secrets private website.

If you want to make money online, you get access to this proven online business building program now.

To activate your no-obligation 30-Day trial, and see for yourself, just follow this link:

Internet Marketing
Internet Marketing, also referred to as i-marketing, web marketing, online marketing, or eMarketing, is the marketing of products or services over the Internet.
Visit our website to learn more!

Follow goldenTwine
Join the social networking revolution, follow us on twitter and Facebook!

Did you like this article?
If you’re new to goldenTwine blog, you may want to
subscribe to our RSS feed | Permalink.
Thanks for visiting!

Tags: business start up program, free trial, Insider Secrets, Internet Marketing Center, product review

Tweet, twitter, Tweeter – Tweet Adder

Posted by: Subrato Paul on: November 29, 2009

Tweet Adder – How to Get More Followers on Twitter

Twitter is an amazing micro-blogging and mini-social networking tool that allows you to build more traffic to your websites and blogs thus making more money. You can promote your marketing messages and links to an amazing community of people from around the world. Twitter can also be an excellent way to receive high-quality back link as it allows you to post a website link in the profile! If you are serious about your business, website, blog, or services and want to make a big dent in your popularity on Twitter overnight, then you will need to get your hands on the most powerful Twitter Friend Follower tool with the most advanced and up to date technology today ‘Tweet Adder‘!

Tweet Adder – Twitter Promotion & Marketing Tool

Tweet Adder is an amazing award-winning Networking Tool for internet marketers, business owners, and individuals to market their products and services to their target niche customers. This is an automated software program that allows you to get more targeted twitter followers and automate twitter posts.

Some key features of Tweet Adder:

Free Unlimited Software Updates and Support
No Monthly or Re-Occurring Fees
Multiple Twitter Account Management
Targeted Auto Follow, Auto Unfollow, Mass Tweeter, Twitter Search
Powerful Auto Tweet, Auto Reply Tweet, Auto Dm
VIP Safe List
Full Twitter Stats
Url Shortener
Full Automation for Set it and Forget It!

Runs Daily, Automatically and Much more…

Tweet Adder has every Twitter Feature imaginable!

Unfollow by #, follower to follow ratios, users who do not follow back with timeframes, create a list of twitter users to never unfollow. It automatically stops when Twitter follow limits are reached. It has a feature that enables users to search twitter profiles by keywords, location, twitter bio, followers following a user, users followed by another user for Laser Targeted Niche Network Building. Another benefit tweet adder offers is a mass/auto tweeter poster. You can schedule your follows, unfollows, tweets, and direct messages to every thirty minutes, hour, two hours etc.

It is very affordable and you can give it a try by downloading the FREE DEMO. Just visit their website for more information.

For more information, visit website: Tweet Adder

Suggestion: You can use Cligs to shorten your affiliate url in your tweets. Cligs is 100% search engine friendly.

Social Media Marketing
Social media marketing is the process of promoting your site or business through social media channels.
Visit our website to learn more!