ArticlesReader.com Menu
Newest Articles
Most Viewed Articles
ArticlesReader.com RSS
Submit Article
Login
Signup
Search the 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.

Enter your name

Enter your email

Syndicate

















Related Products
Home::CSS

CSS: The Basics - ID's and Classes ... Correct

Author : Eric McArdle

Css

Cascading Style Sheets

Two types of style sheets: Internal and External

Internal - You insert your style code right into your html code.
These stylesheets should only be used if you are intending to
create a specific page with a specific style. If you want to be
able to make global changes to your website using only one style
sheet, you have to use....

External Stylesheets - Instead of putting all the style code
into your html code, you can create a single document with your
css code and link to it within your webpages code. It would look
something like this

{head} {title}Webpage title{ itle} {link rel="stylesheet"
type="text/css" href="http://www.yourdomain.com/css"} {/head}

If you decide to use an internal stylesheet, you have to put
your css style wihin the following tags:

{style type="text/css"} {/style}

All css or links to the external stylesheets have to go in
between the {head} tags

Now about Css Classes vs. ID's

The one major difference between a class and an id is that
classes can be used multiple times within the same page while an
Id can only be used once per page.

Example:

ID - The global navigation of your site, or a navigation bar. A
footer, header, etc. Only items that appear in only one place
per page.

Class - Anything that you would use multiple times in your page,
such as titles, subtitles, headlines, and the like.

Creating ID 's

To create an Id in your css, you would start with the number
sign (#) and then your label of the id. Here's an example

#navigation { float:left; }

To insert the id in your html, you would do something like this

{div id="navigation"} {/div}

You can also insert an id within another one like this

{div id="navigation"} {div id="left}

{/div} {/div}

Remember to close the id's in order.

Now, onto css classes.

Creating Classes

To create a class in your css, use this

.subtitle { color: #000000; }

To insert the class into your html, do this

{p class="subtitle"} {/p}

Now, you can use the same class repeatedly in the same page
unlike Id's.

I also want to tell you something about link attributes. You
should always keep them in this order:

a { color: #006699; text-decoration: none; font-size: 100%; }

a:link { color: #006699; text-decoration: none; }

a:visited { color: #006699; text-decoration: none; }

a:hover { color: #0000FF; text-decoration: underline; }

a:active { color: #FF0000 }

Of course, you can change the colors and text-decorations. This
is just something I cut out of my code!

Okay, these are the basics. What I highly recommend is to go and
download Topstyle Lite by going here:

http://www.bradsoft.com opstyle slite/index.asp

It's free and is a very helpful css editor. It not only color
codes and organizes your code, but it provides you with tons of
attributes that you can add to your class and id elements with
just a click. They also provide a screen at the bottom to view
your css code as you create it. Very useful for a free edition
and I'm looking to buy the pro version soon.

Now, this was just a very very brief explanation of the vital
elements needed when structuring your css. I have a good feeling
that when you download top style lite, you will learn how to use
the hundreds of attributes in your classes and id's

Good Luck in Your Web Designing Efforts!

P.S Change { and } to < and >

Spam emails More free articles

Related articles


  1. Introduction To Cascading Style Sheets
  2. CSS: The Basics - ID's and Classes
  3. CSS: The Basics - ID's and Classes ... Correct
  4. CSS - Maximum benefits
  5. Using CCS to Eliminate Tables
  6. CSS Print Media Tutorial
  7. Teach yourself CSS the easy way
  8. Starting Cascading Style Sheets
  9. SEO Benefits Of CSS
  10. 7 Reasons Why Using CSS is a Must
  11. Font Organizers Review, Part I
  12. CSS in Flash the return of crisp and legible fonts.
  13. CSS Browser Detection - The complete guide
  14. Cascading Stylesheets: 5 Reasons To Use CSS
  15. The Power of CSS
  16. Cross Browser Compatibility
  17. Using CSS with Tables
More related feeds
Colour Swapper in Wordpress
These four styles are in my core CSS file so that my swappers always have access to correct classes for them. What this means is that regardless of what CSS file is imported, the swapper tiles will always look the same. ...

Use the Flickr API and jQuery to show your personal photos
Now that we have our basic HTML done, we need to use the Flickr API works quite simple, we send a REST-request to Flickr and the API returns an XML-file with all the data we need. If you have a Yahoo! ID, login to flickr.com and apply ...

CSS: The Basics - ID’s and Classes … Correct
css style wihin the following tags: {style type=”text/css”} {/style} All css or links to the external stylesheets have to go in between the {head} tags Now about Css Classes vs. ID’s The one major difference between a class and an id is ...

jQuery & CSS Example - Dropdown Menu
With our semantic HTML and link structure written out, we can proceed to apply some basic hover techniques that are included in CSS. The :hover pseudo-class is invoked when the mouse is placed over the list item. ...

Tutorial:Get Started With Prototype
Using CSS classes can make your code simpler. For one, there aren't as many IDs floating around. This one requires the double dollar sign function. The syntax is similar to CSS, where we put a period in front of the class name. ...

How to Disassemble a Free WordPress Theme Part 2
The first line checks to see if the commenter is an author by checking to see if its user id is equal to 1. If it is then it adds the class “comments_author” to the tag so it can be styled differently from the other comments. ...

[CSS]Top CSS Tutorial, CSS Reference Sites for Learning ...
CSS Basics provides 18 chapters which cover necessary CSS skills (including CSS Class, CSS IDs, CSS Position, CSS Fonts and so on) for web designer. You can read and learn chapters on the website or you can download all chapters as PDF ...

Tips and hacks for creating your own Wordpress theme
” id=”comment… Thanks to Matt Cutts for this hack. ...

FileMaker® API for PHP Tutorial
Inside the header tags, notice the (link) tag which tells the web browser to apply the style.css formatting. When using the tag, be sure to supply the correct path or href to your CSS page. ...

Tutorial:Get Started With MooTools
Selecting by ID is useful, but perhaps more useful is being able to select by CSS class. In this case, we're selecting more than one item. We use the double dollar sign function. The syntax is similar to CSS, where we put a period in ...

 

 

2007 articlesreader.com - All Rights Reserved