|
CSS: The Basics - ID's and Classes ... Correct
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 >
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
Eric McArdle
More Articles
Web Designer's Guide to Search Engine Optimization - Sitecritic Net
From a search engine point of view, the perfect webpage has no
graphics, no scripting, no tables...etc but just alot of normal,
plain readable text. You can just take it that plain text is the
food for search engine spiders. Therefore, the more...
Web Design Mistakes - Text and Fonts - Breal Web Design
This article may be published electronically or in print, free of charge, without alteration to any content and the resource box at the end of the article is included in it's entirety without alteration. A courtesy copy of your publication would be...
Mistakes when using Macromedia Flash - PrimeVector
My own mistakes when using Macromedia Flash
I have used Macromedia Flash for all the wrong reasons in the
past and i would like to take some time to warn you, so you
don't have to make the same mistakes i have. Quite some time ago
now i...
Design vs. SEO: Can My Site Look Good and Rank Well? - John Krycek
Do you have to sacrifice all of the creative and artistic
elements of your web site to rank in the search engines? Later
in this article I'll show you a real case scenario and the
design and SEO approach used.
Thanks to the birth of...
Using QuickSub To Make It Easier For Your Visitors To Subscribe To Your Feed - Allan Burns
You can make it easier for your visitors to subscribe to your RSS feed. With a free and easy to install javascript function you can add the QuickSub feed button to your webpage in just a few minutes. Let me show you just how easy it is.
...
Understanding HTML - Lee Asher
HTML is a relatively simple language, in some places it is
almost completely readable and understandable but that doesn't
stop people from having problems with it. Why is that? It's
mainly because, while the HTML tags themselves are...
Some Places to Go For More Information - Lee Asher
If you feel like you know quite a bit about web design now, but
you'd really like to explore the details a bit more, then this
is the article for you. As web designers are, by their nature,
very likely to be web users and website owners, there's...
Learning HTML & HTML Editors - Colleen Chard
Learning HTML & HTML Editors by Kalina of Affordable Web Design
I hold a firm belief that all webmasters should practice validating their code, so all advice I give in this site will be centered around that belief.
If you'd like to...
SEO Benefits Of CSS - Steve Chittenden
This article is most useful if you are somewhat familiar with HTML and CSS. I explain the concepts well enough that you do not have to be an expert, but I want to provide material that will introduce you to more advanced design in ways you can...
Designing for Search Engines - Lee Asher
When you design a website, it's easy to focus on what your
visitors are going to see. What you have to realise, though, is
that you're going to have another kind of visitor with a
completely different agenda: they're not going to be looking...
Codes and Scripts at your Fingertips - Tom Takihi
Creating beautiful websites is no longer the monopoly of techies. Now, with web designing codes made available through the Internet, anyone can dabble into the exciting world of web development and web design.
During the early...
Advantages for Using FrontPage (Part I) - Robin Nobles and Dave Barry
Ever since I've been doing SEO work, I've always griped and complained about FrontPage and all the extraneous code it puts in the section of the page, etc. Then recently, I had the opportunity to visit with a group of advanced search engine...
|
