Menu

Newest Articles
Top Articles
RSS Feed
Submit Article
Login
Signup
Article Count : 223339

Search Articles

Articles Main Categories

Advice
Animals
Automobiles
Business
Career
Communications
Computer Programming
Computers
Entertainment
Environment
Family
Fashion
Finance
Food
Health & Medical
Home & Garden
Humor
Internet Business
Internet Marketing
Legal
Leisure & Recreation
Marketing
Other
Politics
Reference & Education
Religion
Self Improvement
Sports
Technology & Science
Travel
Writing

Subscribe

Receive alert message from us when new articles submitted to our site for free.

Syndicate

Bookmark Us

StatCounter

Our Partners

Free Articles

Home::All

CSS or Tables?

Author : Shabda Raaj
Views : 86

The 30 minute CSS tutorial.

What is CSS?

CSS is the technology used to make the layout for webpages.
They are Cascading Style Sheets, used to style your HTML
documents. They are slowly replacing tables as the preferred
medium to layout your pages. They free your content (the HTML
document) from the layout (the CSS file), so you may change your
website look and feel easily.

CSS basics.

With HTML, you would define the attributes as you write the
HTML. With CSS, you first define the style. Then as you are
writing the HTML, you apply the required style. So the first
step to write CSS document is defining your styles. There are
two ways to apply your CSS to your file. You may either include
it in your HTML file by placing your stylesheet in head of your
HTML as,

... , The Selectors.

After you write your style, the computer needs to know where to
apply that style. This can be done using the selectors. The
selectors are of three types. 1. HTML tag selector: If you want
to change the look of any of your html tags, you will use this
type of selector. You may decide that all of your h2 elements
must have red text. It is trivially easy with CSS. 2. Class
selector: you would like particular parts of your webpage to
have a style, but that part is not always in same html tag. Not
to worry, you can enclose that part with a div tag and apply
your style. 3. ID selectors: If some element occurs only once it
is styled using id selectors.

Your First Stylesheet.

With your first stylesheet, you will modify the page to look
yellow with a blue foreground.

Page title some text The HTML part
is simple, so let's look at the CSS part. body{
background-color:yellow; color:blue; }

We wanted to modify the body so we used the body tag selector.
This basically said to the computer that this style needs to be
applied to whole body of html document. Then we used the
background-color property to set the background and the color
property to set the foreground. What if you wanted to set all
the text to bold? Oh that's simple too, you just add this line
inside the body selector. font-weight: bold;

Getting something useful.

The last css though simple was not very useful. Let us design a
useful CSS which might be used on a site. Before that you must
learn positioning elements using CSS. We would like to have a
three column layout. So I will use three selectors(Id selectors)
named sidebar, content and rightsidebar. Theses lines of codes
declare our selectors. #sidebar #content #rightsidebar. Then we
will tell how these should look like. I want my sidebar and
rightsidebar to have aqua colored background. This is done using
background: Aqua;

Next we add borders to all our selectors and add a top margin of
20 pixels. We would like the contents to be bolder, so we add
font-weight: bold; to content. After that we decide to spice up
our links by making them of a different color and removing the
underlines, by getting a color:#c60; text-decoration:none; To
give the user a visual indication of the link when she moves her
mouse, we swap the link colors. This is done by changing the
style in a:hover.

So this is what our finished page looks like.

Preview

content
a link

rightsidebar

, What! Do I have to learn all these tags and
attributes?

No. But you must remember the more important ones. Also the
attributes have very common sense names. What should you do to
change the background color of your webpage. Yeah this.

body{ background:Aqua; } , That's all. SO if you are going to
use CSS for any length of time, you will get to remember the
tags. A css editor like TopStyle lite can be really useful when
you are learning css. , Thats all for today. Hope you learnt
something useful from this tutorial.

Popular Articles

Latest Articles

· John Wayne’s Death and the 1954 movie 'The Conqueror'
· "People Are Making Upwards of $11,000 a Month as an Affiliate for My Net - Marketing Center!"
· Bill Consolidation Loans - Quick Debt Elimination
· Your Best Guitar Practice Routine
· The Twenty Percent Rule!
· The Man Poet
· Online Survey - Will help you to automate the online data collection and ensures complete accuracy
· How to Dial Up a Recycling Solution for Your Cell Phone
· Motorcycle Face and Eye Apparel - A Hoax or Coax
· Tennis Champions: Are They Born? Or Made?
· 2006 * AVN Award Nominations * ( Adult Video News ) * Announced 11-23-2005
· What Should You Sell on eBay?
· The Impact of Police Podcasts on Law Enforcement
· Why hire an SEO Content writer
· 2 Most Important Facts about Motorcycle Helmets
· Premises Liability: Who is to Blame?
· Green Giant Arborvitae - A Plant Superstar
· Elizabeth Bathory - Fact and Fiction
· EL TÉCNICO ESTRENA EL BANQUILLO DEL DECANO CON PRU, Marceli
· The Four Horsemen of the Apocalypse.
· Cool Tattoos
· Have a Delightful Merry Christmas in Malcesine!
· Top 10 Questions and Answers on Atkins Diet
· "Confessions Of A Zine-O-Holic"
· "I Built a Better Mousetrap"-- Advice on Protecting Your Cre
· 10 Tips to SPEED Up Your PC
· How to Receive Government Grants For Farms
· 11 Proven Methods For Maximizing Your Business By Using The Magic Of Autoresponders
· Bathtub Repairs FAQ
· CARS4CHARITIES SENDS ONE MILLION DOLLARS TO CHARITIES!
· Are Corporate Awards and Corporate Gifts beneficial in the workplace?
· "How to become more creative in three easy steps
· Reglazing Bathtubs for a Whole New Experience
· The Champs Elysees Avenue In Paris
· Caring for Tattoos
· Emerald Green Arborvitae for Lahaska Pa.
· A Few Daylily Facts: Makes Growing Daylilies A Snap!
· GO GREEN! RECYCLE YOUR OLD CAR!
· " 8 Simple Ways to Defend Yourself Against Evil Doers Both O
· Great Plains Sales Order Processing and Invoicing Modules – Tips For Consultants
· Keys to Project Success - Using Audits and Reviews as a Best Project Management Practice
· A little exercise is a healthy Weight Loss Plan
· Walk Your Way To A Fitter Body - Do The Treadmill Workout Now!
· Fantasy Baseball - Why Traditional 5x5 leagues are outdated.
· Quiz: Are You Ready for a Roommate?
· Emergency First Aid and CPR
· DUAL PANE WINDOW GLASS REPAIR
· "Beatles for Dummies"
· Buying a Home with Bad Credit - How to Buy with Past Credit Problems
· El Celta tiene a todos listos para enfrentarse al, LA RECUPERACIÓN DE OUBIÑA

· Council house exchange services
· Importance of Yahoo Store Design, Development
· Importance of Yahoo Store Design, Development
· Web promotion A new terminology for marketing.
· Online Internet Marketing is the Big Source to Achieve Your Web Promotion Goals.
· Access online shopping sites and save your valuable time and money.
· Get the best Bodybuilding Supplement at the best price.
· Cyberoam UTM Introduces On-Appliance SSL VPN
· How To Find Foreclosure Properties
· GPT Sites - Find The Legit One
· Web Application Development
· Cross Selling and Up-Selling-BPO Key Marketing Strategy
· Appointment Setting: A Keystone For Call Centre Business
· Health Insurance Plans
· Solutions to insurance problems
· Web Designing - Online Brand
· All the things you have to know regarding seo hosting and how it could prove to be beneficial and ca
· Tips For Getting Government Personal Grants
· How to Receive Government Grants For Farms
· How To Receive Government Grants For Small Businesses
· Quickly Receive Government Grant Loans
· How To Receive Government Grants For Senior Women in Business
· How To Get Government Grants For Housing
· Government Grants For Insulation
· How To Receive Government Grants For Minorities
· Student Loans Vs Government Student Grants
· Receive Free Government Grant Money You Never Have to Repay Back!
· Romantic Games - Bring A New Level of Passion
· For Those Who Live The Sinless Lifestyle
· Queens landlord ventures into Nassau
· Life Insurance: Policy to secure the future of your loved ones
· Not Just Another TV Show About Ghosts
· How to find fake watches
· Tips to Get Repeat Web Traffic
· International Corporate Relocation: Quality control and its role
· International Relocation � The expert move
· Christian logo design - The importance of a logo
· Choosing the Right One for you- jewellery costume
· Carpet Cleaning
· Digital Video Recording- The Advanced Feature Of Satellite TV
· Getting The Most When Shopping Online
· Home Loan Interest Rates
· Mutual Funds Industry In India
· Children's Educational Planning/Educational Planning
· Flagsforyou.com Announces Flags For All Seasons And Special Holiday Coupon
· Window Blinds � Beautiful Veil for the Windows
· A one-size fits-all solution for an enterprise E-commerce solution
· Online Shopping-Price vs.Quality
· What is the advantage of Replica watches
· Guide for Buying a Replica Watch

Related Feeds

Table-less Web Designing: by Pseudo Technology | MoSo Technology Blog
The Web Design site on About (and all About sites) is built using tables, and until browsers that support CSS Positioning are more widely used, will be for the foreseeable future. The most important function of table-less web designs is ...

Query performance and table variables - CSS SQL Server Engineers ...
Table variables were introduced in SQL Server 2000 with intention to reduce recompiles. Over time, it gained popularity. Many users use to to populate large number of rows and then join with other tables. ...

CSS vs. Tables - InsideRIA
Last time I talked about CSS on this blog, I got a lot of feedback, and let me tell you, I'm all about the attention, so I thought I'd give my take on the CSS vs. tables debate. I've...

CodeCanyon - CSS Pricing Tables » SCRiPTMAFiA.ORG | Full Nulled ...
CodeCanyon - CSS Pricing Tables CodeCanyon - CSS Pricing Tables This Pricing Table Features Multi-browswer support, easy customization via PSD , Animation support in Webkit based bro.

Css Layouts Vs. Table Layouts: Which One Is Better? | TechnoForum
A debate arises on which is better to use in web designing. One side seems to prefer table layouts because of its browser compatibility and.

Think Vitamin » Tables: The Next Evolution in CSS Layout
If CSS layout code were as easy to write as HTML tables, making the leap would be a no-brainer; designers would flock to CSS willingly. Instead, we must drag them kicking and screaming, because the tools that CSS provides are not suited ...

iStylr - Proffessional Online CSS and Web Design Kit | Go4webapps ...
Istylr is aweb application that helps in making simple CSS designs ( without tables) .With this application one can not only create but share and edit them and collaborate without many complications. Anyone who has worked with CSS ...

Creating Forms: Pure CSS vs Table Based
An objective discussion concerning using Pure CSS vs Table Based forms.

Zebra-striping rows and columns — CSS Wizardry—CSS, Web Standards ...
Zebra-striping tables is certainly not a new thing; it has been done and discussed for years. They (allegedly) aid usability in reading tabular data by offering the user a coloured means of separating and differentiating rows from one ...

Understanding the K2-Lite Theme, fonts, tables, remove image ...
In addition, Firebug lets you try out changes to the CSS and see the results immediately. It also shows the HTML on the left, and the CSS on the right, so you can easily see the relationships and get to the selectors easily. ...

CSS or Tables?

Related articles