Search

 

 

Informative Articles

7 Benefits of HTML Validation
You may not bother with html validation or writing simple and clean code when designing your web site. Later you may find your site is slow loading, appears incorrectly in the main browsers and does not rank well for the major search engines. ...
GSM Cell Phones - What You Wanted To Ask But Always Slipped Out Of Your Mind...
GSM stands for Global System for Mobile communication. GSM cell phones come with integrated voice mail, high-speed data, fax, paging and Short Messaging Services. Excellent sound quality, International Roaming facility with state of the art...
The OTHER Acronym for HTML - How To Make Laughs?
Or what about CSS - Comic Sheer Stupidity? How to make a successful online magazine from nothing and with nothing, particularly the first clue about computer language. I am a website designer and web magazine editor. In fact, I prefer to...
Web Accessibility Myths
With more and more countries around the world passing laws about blind and disabled access to the Internet (including the Disability Discrimination Act in the UK), web accessibility has been thrown into the spotlight of the online community. This...
WHY DESIGN IS AS IMPORTANT AS PROMOTION
We have all heard that there's no use having the best site in the world if you don't promote it, and submit it to the search engines. Well the opposite is also true. There is no point in promoting your site unless it is well designed and going to...
 
CSS: The Basics - ID's and Classes

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


Webpage title< itle>
href="http://www.yourdomain.com/css">


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



All css or links to the external stylesheets have to go in
between the 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




You can also insert an id within another one like this







Remember to close the id's in order.

Now, onto css classes.

Creating Classes

To create a class in your css, use this

.subtitle


Ex-Lacrosse Player Guilty Of 2nd-Degree Murder
Former University of Virginia lacrosse player George Huguely V was convicted Wednesday in the May 2010 slaying of his ex-girlfriend, who also played lacrosse for the university. Jurors rejected a first-degree murder verdict and possible life sentence, instead finding him guilty of second-degree murder, and recommending a 25-year term.

Virginia House Revises Controversial Abortion Bill
The amended bill requires women seeking abortions to undergo an external ultrasound, not a more invasive procedure. The state's Republican governor came out against requiring the more invasive procedure after the proposal drew national outrage. The amended bill now returns to the Senate, where it will likely be killed.

Is A Lie Just Free Speech, Or Is It A Crime?
The Supreme Court heard oral arguments Wednesday over the constitutionality of a law that makes it a crime to lie about having received a military medal. But the questions posed by the justices ranged far beyond that from deceptive advertising to lying on a date.


{
color: #000000;
}

To insert the class into your html, do this


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!

ABOUT THE AUTHOR
Eric McArdle is the publisher of the TrafficaZine Online
Marketing Newsletter which is a publication designed to
assist the online marketing and/or web designing
entrepreneur with the basic tools and resources that will
greatly assist them in taking further steps into bettering
their online business. http://www.trafficazine.com