Jump to content

  • Log in with Facebook Log in with Twitter Log In with Google      Sign In   
  • Create Account

Subscribe to HRA Now!

 



Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE! 

 



 

 www.CustomReportSharing.com 

From the folks who brought you High Rankings!



Photo
- - - - -

In Need Of Css Tutorial


This topic has been archived. This means that you cannot reply to this topic.
26 replies to this topic

#1 deborah2002

deborah2002

    HR 4

  • Active Members
  • PipPipPipPip
  • 244 posts

Posted 04 August 2003 - 01:17 PM

Hi everyone!
I am in the process of learning CSS...I am unsure where/how to start. Can anyone help point me in the right direction? I have a site in the 100 page range and its in need of some help.
I know HTML but honestly I am a little intimidated by the idea of how to implement this new code (although it has been pointed out that I need to do so RIGHT NOW! :) ).
Any links ya'll have or BASIC from-scratch tutorials would be really appreciated. Thanks, ya'll......wish me luck!

deb :cheers:

#2 Drew-z

Drew-z

    HR 3

  • Active Members
  • PipPipPip
  • 83 posts

Posted 04 August 2003 - 02:00 PM

Hey Deborah,

Learning CSS will be the best move you ever made in web design.

The evangelical CSS guru is Eric Meyer. He has a site MeyerWeb which has lots of goodies. Make sure to check out CSS/Edge and CSS info links.

Also, you should join the CSS discussion list. It's an email newsletter with the smartest minds in CSS. The objective is to help beginners, but there is such a thing as a dumb question, so ask wisely. Just reading the email will teach you a lot, and it helped me a ton when I hit roadblocks. Actually, Jill you should have a CSS questions section (maybe you already do? I just got here?)

The best thing you can do is get moving with CSS. The great thing about it is that you can do something easy (like format font-family or H1's) immediately. Then once you feel the power, you'll want more.

What I did in the beginning is worked off of other stylesheets and copied what they did.

For example: look at the code on this page and the check out the stylesheet for the site. You can copy any of these very easily and then add your own colors, format, etc.

This Javascript can be added to your favorites to pull up stylesheets off any page http://www.gazingus.org/js/?id=102. It will become your greatest asset.

Good luck
:cheers:

#3 deborah2002

deborah2002

    HR 4

  • Active Members
  • PipPipPipPip
  • 244 posts

Posted 04 August 2003 - 02:18 PM

Hey DrewZ,
Thanks for the quick reply! You've given me a good head start, although the part about there being a dumb question is a little scary--I don't really need someone calling me a dumba$$ on the internet so I'll back off that one.
I'm gonna check the links you gave...thanks again.

Hey Jill, could ya'll give some thought to some CSS/HTML threads around here? Or if there's a better place for me to ask some "dumb" questions on this forum, could you let me know?


Thanks Again! :cheers:

#4 Mel

Mel

    HR 5

  • Active Members
  • PipPipPipPipPip
  • 353 posts

Posted 05 August 2003 - 12:05 AM

Hi Deborah:
No need for CSS to be intimidating at all. In a nutshell what css does is allow you to set up a formatting for a particular situation, put that in your css stylsheet as a class (perhaps.bodytext) then whenever you need that formatting all you need to do is declare that class instead of all the alignment, font, color, size, spacing etc etc tags you would use in straight html.

The stylesheet is in text format and can be constructed in Notepad or you can use one of the free stylesheet editors, or if you use Dreamweaver, you can construct and edit your stylesheets there.

For instance you could decide that the entire table that your body text was in would use the .bodytext class in which case <table.bodytext> or <table class="bodytext"> will format everything inside that table just as you have specified with no addtional code necessary. If you want to make one particular part of that table, say a cell, in the bold style you have declared you just make it <td.bold> and that element will be formatted that way. Individual words or paragraphs can use <span class="bold"> Put your content here </span>.

The really big advantages are that you save lots of code, and you can make sitewide changes simply by changing one line in the stylesheet.
When you then save the stylesheet to an external file and refer to it on each page you save lots of code, time and effort.

There are lots of good css tutorials on the web, just google for css tutorials for lots of how to info.

Hope this helps

#5 Bill Slawski

Bill Slawski

    HR 4

  • Active Members
  • PipPipPipPip
  • 117 posts

Posted 05 August 2003 - 01:04 AM

Hi Deb,

You've given me a good head start, although the part about there being a dumb question is a little scary--I don't really need someone calling me a dumba$$ on the internet so I'll back off that one.


I've been getting the emails from that listserv in digest form for the last three or four months. That means I might get one or two emails a day from the list. I read them most days, but not everyday. I haven't asked any questions, or made any posts, but I feel like I'm learning a lot from the discussions, and from the suggestions that are made to help other people with their sites.

As Drew-z stated, many of the people who answer questions on that list are the experts on CSS. It's a good place to see excellent solutions to problems being suggested.

Will I ever post there? Maybe someday, when I feel like I know as much as some of the other people answering questions. Until then, I'm just pretending to be a sponge and soaking up as much as I can.

No pressure, and no one calling me dumb. :lol:


As Mel stated, there are lots of tutorials for CSS on the web.

Here are some tutorials and some articles that you might like:

CSS Tutorial
http://www.w3schools.com/css/

BIG BAER Explains CSS Font-Size
http://www.bigbaer.c...s_font_size.htm

CSS Design: Taming Lists
http://www.alistapar...es/taminglists/


Keep in mind a couple of things about CSS:

1. Not all browsers support CSS the same, and some of the older browsers have troubles with a lot of CSS

2. It really can make your work easier.

#6 Jill

Jill

    Recovering SEO

  • Admin
  • 33,005 posts

Posted 05 August 2003 - 08:00 AM

My friend, Shirley Kaiser, has a site called WebsiteTips.com which lists tons of CSS resources.

As to where to place CSS threads, well, it's a design issue, so it seems to me they fit nicely into our Design category. In fact, I'm going to move this one there, asap!

Jill

#7 dragonlady7

dragonlady7

    HR 6

  • Active Members
  • PipPipPipPipPipPip
  • 618 posts

Posted 05 August 2003 - 08:01 AM

>someone calling me a dumba$$ on the internet

Welcome to my life. :rofl:

I'm trying to learn CSS for positioning, and I've made it out to be much harder than it is in my own mind. But I've found the best place to ask semi-dumb questions is actually over in the CSS forum at webmasterworld. It's a big and active site and full of all kinds of scary people, but the CSS guys are full of benevolent missionary zeal and love answering even somewhat dumb questions. They recently lost their awesome moderator, but I think someone else good may be taking his place. It might be worth a look once you've done enough to have some good questions.
They may well add a CSS section here, though, so I'll keep watching for it. Maybe by then I'll have absorbed enough knowledge to be supplying intelligent answers instead of asking dumb questions. Wouldn't that be nice?

I found it helpful to read the CSS spec at http://www.w3.org -- helpful, that is, but mostly overwhelming. *shrug*
Good luck and happy hunting.

#8 dragonlady7

dragonlady7

    HR 6

  • Active Members
  • PipPipPipPipPipPip
  • 618 posts

Posted 05 August 2003 - 08:03 AM

<offtopic> Whoa! That was cool! I hit "submit" and got an error because Jill just moved the thread, and it had automatically saved my post data so that I could copy it and hit "back", "refresh" to the new page, and paste it into the box. The box hadn't been cleared so it wasn't necessary, but there it was just in case. What a great feature!!
Not like those are pearls of wisdom that must at all costs be saved, but... :rofl: Awesome!
</offtopic>

#9 deborah2002

deborah2002

    HR 4

  • Active Members
  • PipPipPipPip
  • 244 posts

Posted 05 August 2003 - 09:00 AM

If ya'll won't mind a warm and fuzzy moment, I've gotta say this forum has given me more in 1 week than others have in months.
Thanks to all who have helped me here, Dragonlady, Jill, Mel, Bradadoccio, and Drew-z.
The input has given me some places to go and things to do! I truly appreciate all your help..... :rofl:

deb

#10 Scottie

Scottie

    Psycho Mom

  • Admin
  • 6,294 posts

Posted 05 August 2003 - 09:01 AM

I will put in a plug for the CSS guys at webmasterworld too- they have been very helpful helping me to troubleshoot some positioning code.

:thumbsup:

#11 dragonlady7

dragonlady7

    HR 6

  • Active Members
  • PipPipPipPipPipPip
  • 618 posts

Posted 05 August 2003 - 09:18 AM

*awww* It's so nice to have a warm fuzzy moment.
No really, I forgot my sweater and it's cold in here, and the coffee machine's broken. I'll take any warmth I can get.

#12 deborah2002

deborah2002

    HR 4

  • Active Members
  • PipPipPipPip
  • 244 posts

Posted 05 August 2003 - 09:27 AM

Dragonlady, I'm not sure where you're from, but here in Orlando it's about 80 degrees by 9am--we are always warm and fuzzy!
Coffee is a must--regardless of temp--I switched to decaf a coupla weeks ago and I SWEAR I lost IQ points. That was a bad decision so I decided I NEED my vices--they keep me perky! :dance:

deb

#13 deborah2002

deborah2002

    HR 4

  • Active Members
  • PipPipPipPip
  • 244 posts

Posted 05 August 2003 - 12:47 PM

Appluase, Applause, Applause.....

Well, as a follow up to all the great links ya'll gave, I am well on my way to the World of CSS! Admittadly, I had to read the same paragraph about 14 times til I got it, but nonetheless am making headway!

Just 1 last thanks to all who helped!


deb

#14 websage

websage

    WebSage

  • Active Members
  • PipPipPipPipPip
  • 362 posts

Posted 05 August 2003 - 01:37 PM

I happen to be one of the zeals for CSS at the Zeal directory, so here are some more links for good tutorials:

I would start with this tutorial:

http://www.brainjar.com/css/using/

Another tutorial:

http://css-tutorial.8m.com/

A good tutorial explaining the basics of the box model which along with the idea of cascading forms the foundation of using CSS for positioning:

http://www.brainjar....ss/positioning/

Great FAQ about anything CSS:

http://www.mako4css.com/

A list of free templates for CSS-based layout:

http://www.saila.com/usage/layouts/

Another great site with cross-browser CSS-layout templates:

http://www.bluerobot.com/web/layouts/


Last but not least, if you are a Dreamweaver user, you might try this tutorial:
http://www.projectse...css_t/index.htm

Hope this helps!

Mitko @ WebSage

#15 Mel

Mel

    HR 5

  • Active Members
  • PipPipPipPipPip
  • 353 posts

Posted 05 August 2003 - 01:48 PM

Nice Links Mitko,
you can also find some nice free Dreamweaver extensions at project seven including one to set up a css file for you, and others to make some of the more complex tasks more or less automatic.




SPAM FREE FORUM!
 
If you are just registering to spam,
don't bother. You will be wasting your
time as your spam will never see the
light of day!