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">
<!--
h1 {text-align:center;font-weight:bold;font-size:18px;color:red;margin:10px 5px 15px}
p {text-align:center}
-->
</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!
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!
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…
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!
Build Your New eBusiness in 5 Steps!
Posted by: Subrato Paul on: November 10, 2009
Product Review: BeBiz Business Building Tool!
If you ask me what the quickest, easiest way to start a moneymaking online business is, and I’m never sure what to tell you.
The truth is, there’s never been an easy solution to start making money online, without first putting in a reasonable amount of time and effort.
However, not anymore!
If you are struggling on your own to find viable niche markets, source hot-selling products, design professional websites, write winning sales copy, or find highly targeted traffic, I’m reviewing in this post a business building tool that’s designed just for you!
Internet Marketing Center (IMC) has just released in October the next generation of a simple, all-in-one automated business building tool that will have you earning money on the Internet faster than you ever thought possible. It’s called “BeBiz”. An improved and completely updated BeBiz is now even FASTER and EASIER to use to build a complete website from square one than ever before!
Click Here to See the BeBiz Internet Business Building Tool for Yourself
I’ve never seen another all-in-one tool like this on the internet that can help you build a money making Internet business so easily.
You don’t need business experience, technical skills, or even an idea for what to sell online to make money. If you can check your email, you have what it takes to get started with this tool TODAY, and “point and click” your way to your first sales on the Internet, in just a few days!
How BeBiz Works
BeBiz is a wizard driven one-of-a-kind tool that guides you through creating your very own Internet business in five essential steps you MUST follow; from starting with your market research to accepting payments for orders.
Step 1: Identify profitable markets eager to buy whateveryou offer them.
Step 2: Find hot products to sell on your website that your market will LOVE.
Step 3: Instantly create a professional looking website that’s designed to sell.
Step 4: Easily create compelling sales copy that will turn the maximum number of visitors into paying customers.
Step 5: Start accepting payments on your website instantly.
Once your site is live, and you’re getting traffic and making sales, you can continue to use BeBiz to manage your online business, virtually on autopilot!
IMC has put up a free video to demonstrate exactly how this tool walks you, step by step, through the five simple stages of creating a new site, from finding a lucrative niche market to getting qualified traffic.
Following the video, you’ll have the chance to download this one-of-a-kind business building tool, and use it for the next 30 days to start your own website from scratch.
I strongly recommend you at least give this tool a try. It’ll make the difference between struggling on your own to make money online (but never seeing results), and having a complete, professional Internet business earning hands-free income.
To watch the video demonstration, and download your free trial, just follow this link:
Note: Trial copies of this tool are only available for a limited time, so you’ll need to go and download yours right away!
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…
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!
Let’s GetSocial – Social Bookmarking Tool
Posted by: Subrato Paul on: October 21, 2009
Social Bookmarking
- from Wikipedia
Sharing your blog – WordPress[dot]com bloggers should also GetSocial!
You may have seen in the footer of any post a request from the author –
If you enjoyed this post, share it
…and you will see social bookmarking options.
But the bad news is if you are blogging on free wordpress[dot]com like millions of other users, it is not free from limitations. You can’t integrate social bookmarking options directly in your blog posts, as the JavaScript code needed to do so is stripped by them for security reasons.
Users are not allowed to post JavaScript on WordPress[dot]com blogs. JavaScript can be used for malicious purposes.Getsocial – Social Bookmarking for wordpress[dot]com bloggers
Fortunately, there are ways to get Social Bookmarking buttons in your posts easily (see footer of posts in this blog). You have to put the links manually under each post. I am using GetSocial which is absolutely free social bookmarking tool made especially for WordPress[dot]com bloggers. It automatically generates script less social bookmarking buttons for each one of your posts.
You can also use GetSocial to add 3rd party buttons to your blog post (such as AddThis, AddToAny, Email to a Friend and more).
How to download GetSocial?
If you are interested then
After you download GetSocial, Extract and run GetSocial.exe (No Installation is needed).
How to Add GetSocial Bookmark Icons to Your Post
Write a new post and publish it without the social bookmarking button. But I always prefer to save the draft, and get the permalink of my post, rather than publish my incomplete post.
With GetSocial wizard interface which is very friendly, fast and easy to use, you can add social bookmarking icons to your new post in 3 steps. You may also implement 3rd Party (like AddThis or AddToAny) Buttons in your blog.
Step 1. Post Information
You will need to enter the title of your post and a permalink to your post (web address of your post).
Post Title: Let’s Get Social – Social Bookmarking Tool
Post Permalink: http://wp.me/pEzXT-28 (I always use the shortlink)
Step 2. Select the appearance of your GetSocial button
You have five options:
- Classic (300×27)
- Mini (200×18)
- Design (400×36)
- Design Mini (300×27)
- Text Links
As you select, you see the buttons in a preview window.
This is how they look:
Add to: Facebook | Digg | Del.icio.us | Stumbleupon | Reddit | Blinklist | Twitter | Technorati | Yahoo Buzz | Newsvine
3rd Party (like AddThis or AddToAny) Buttons
Step 3. Get your code
Copy the WordPress.com friendly code, and Paste it to your post (while in HTML Edit mode).
Preview your post, and publish it.
Before I End…
GetSocial is a Windows application built with Visual Basic. Even though it was made specifically for the WordPpress[dot]com platform, GetSocial will also work like a charm on most other blogs and websites. If you use/like it, consider donating 5.00 USD to the author of the software.
Hillel Stoler is the creator of GetSocial
System Requirements: Most Windows systems will run GetSocial without any additional installations. If you get error (0xc0000135) or a message that says .net Framework 2.0 is required you need to install the Redistributable Package. Use Windows Update, or download it directly from the Microsoft download center.
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, online marketing, website design and development, and his website…
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!
Tips, Tricks, Techniques You Should Know
Posted by: Subrato Paul on: October 20, 2009
Welcome to Tips, Tricks, Techniques section of goldenTwine blog
The Internet is certainly the most valuable source of information. The Internet is used by over 800 million people in all walks of life everyday. Whether you are only a netizen, or an online community builder, or a blogger, or a web designer and developer, you always look for tips, tricks, tactics, tools, trends and techniques to improve your online environment and get the most out of Internet. Obviously, one article is simply not enough. In this Tips, Tricks, Techniques series we will have many posts not only from us, but also from Internet experts, and our esteem readers. Some of these tips, tricks and techniques you are bound to use as a web user or a web developer. This series would help especially those who would sometimes wish that they could also do what someone else has done elsewhere!
Tips, Tricks, Techniques
Let’s Get Social – Social Bookmarking Tool
and much more…
Coming up…
How could you make your passwords strong yet remember them all without jotting down on a notebook?
Are you a web designer? Check out if you knew these CSS tips and tricks!
Are your security questions and answers always secured? How could you make them more secured!
Would you like to contribute…
We welcome your contribution. You may offer any tips, tricks and techniques that you would like to share with your fellow netizens.
Click here to submit your article:
Article Submission Form
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, online marketing, website design and development, and his website…
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!
Creative GoldenTwine Blog
Keeps you up to date with our website, eMagazine and newsletter...
Search
Subscribe to RSS Feed
If you enjoy reading our blog, make sure you subscribe to our RSS feed.
Subscribe in a reader
Subscribe by email
valid RSS feed
Open Feed Directory
Featured Blogs
Registered & Protected Blog
goldenTwine blog by Subrato Paul is licensed under a Creative Commons Attribution-Non-Commercial-No Derivative Works 2.5 India License.
Category: Blog
MCN: B6LJ9-K98BW-XFWXN
Counters
