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 : 94

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'
· Caring for Tattoos
· Choosing A Domain Name Effectively
· Cool Tattoos
· Emerald Green Arborvitae for Lahaska Pa.
· Online Survey - Will help you to automate the online data collection and ensures complete accuracy
· "I Built a Better Mousetrap"-- Advice on Protecting Your Cre
· Save Money By Giving Flower Seeds As Wedding Favors
· Top 10 Questions and Answers on Atkins Diet
· Green Giant Arborvitae - A Plant Superstar
· The Twenty Percent Rule!
· Does Your Resume Sell You?
· "Confessions Of A Zine-O-Holic"
· 2 Most Important Facts about Motorcycle Helmets
· " 8 Simple Ways to Defend Yourself Against Evil Doers Both O
· "People Are Making Upwards of $11,000 a Month as an Affiliate for My Net - Marketing Center!"
· "Good & Not So Good Advice From Our Moms (UK)"
· Fantasy Baseball - Why Traditional 5x5 leagues are outdated.
· GO GREEN! RECYCLE YOUR OLD CAR!
· The Four Horsemen of the Apocalypse.
· How Much Rent is Too Much Rent?
· What Should You Sell on eBay?
· Elizabeth Bathory - Fact and Fiction
· Motorcycle Face and Eye Apparel - A Hoax or Coax
· Are Corporate Awards and Corporate Gifts beneficial in the workplace?
· Your Best Guitar Practice Routine
· The importance of Elearning
· The Impact of Police Podcasts on Law Enforcement
· 11 Proven Methods For Maximizing Your Business By Using The Magic Of Autoresponders
· A Space Junk and Meteorite Hunting Site
· "Are You Doing It on a Regular Basis?"
· Reglazing Bathtubs for a Whole New Experience
· The Man Poet
· What Truck Lifts can do to your Trucks
· Emergency First Aid and CPR
· El Celta tiene a todos listos para enfrentarse al, LA RECUPERACIÓN DE OUBIÑA
· The Champs Elysees Avenue In Paris
· Tennis Champions: Are They Born? Or Made?
· How to Dial Up a Recycling Solution for Your Cell Phone
· Bathtub Repairs FAQ
· Transcription - Making Your Life Easier
· A little exercise is a healthy Weight Loss Plan
· Premises Liability: Who is to Blame?
· DUAL PANE WINDOW GLASS REPAIR
· Great Plains Sales Order Processing and Invoicing Modules – Tips For Consultants
· "8 Key Actions for Protecting Your Privacy Online"
· CSS or Tables?
· Easy Credentialing due to Teacher Shortage
· Every Business Should Invest In A PUNCHING Bag!
· 10 Tips to SPEED Up Your PC

· 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

Help with HTML/CSS – need to put a table underneath a table? « Css ...
ok, so let me explain my problem, im sure there is an easy fix but im new to HTML and need some help, im designing a website for me to design websites lol (well…

Site HTML Conversion (CSS & Part Tables) | Projects for Freelancers
Please, post bids for new project: Site HTML Conversion (CSS & Part Tables)

Tables, forms or I dont know. - Web Design Forums
Tables, forms or I dont know. HTML and CSS Help. ... Tables, forms or I dont know. This thread was started by tinksdude and has been viewed 128 times, and contains 4 replies, with the last reply made by tinksdude. ...

CSS or Tables Which Would be Best for Web Design? « Css Html ...
Tables design is the web design which uses HTML tables to design a page layout and control processes. Instead of tables then emerged a new style sheet…

50 CSS Layouts, Visual Effects and Forms Coding
Tables are evil, right? Yes and no. For tabular data, they're not, of course. That's what tables are for in the first place. CSS can do an excellent job of styling a properly formatted table, and the table structure provides good ...

CSS Labs: Joins using HQL
DOCTYPE hibernate - mapping PUBLIC "-//Hibernate /Hibernate Mapping DTD 3.0//EN" "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd" >> ...

HTML e-mails with CSS « Css Html Design Articles « Articles « Fast ...
General Do's and Don't's for HTML/CSS Emails. To wrap up, here are some do's and don't's: Do … Use inline style declarations for the most important styles. Declare styles in a style tag when they're not absolutely necessary. Use table ...

Coding a Simple CSS Table : Website & Graphic Design Blog
A skilled designer/developer should (hopefully) know when it is appropriate to use a CSS based table model in their design (this does not mean that the actual web design layout should consist of a CSS based table, rather, it means that ...

Should You Change Table Based Design with CSS?
Which one is better, CSS or Table? It is such a dilemma to judge which on is better than another. To figure it out, let's go further to what CSS and Table are about. Many web designers prefer table and non standard compliant code for ...

185+ Very Useful and Categorized CSS Tools, Tutorials, Cheat ...
Yields a three column layout without using any Tables. This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the ...

CSS or Tables?

Related articles