Since many of you are trying to learn CSS, I figured I'd share some links that were helpful to me.

Basics... (Yes, I know this looks like it's for kids, bear with me)
:: What does a style sheet look like?
:: How do I make my own style sheet?
:: How do I link to an external style sheet?
:: How do I validate my style sheet?
:: How do I get rid of the underline on my links?
:: How do I make my links change color on mouseover?
:: How do I change colors of individual links?

More Basics...
:: Text (changing the appearance of fonts, etc)
:: Styling Links
:: Heading Tags (for SEO)
:: How to override the underlining of hyperlinks
:: Removing Image Borders
:: Mouse Cursors

A little more advanced...
:: Rounded Table Corners
:: Simple CSS Drop Shadows
:: CSS Driven Tabs

Accessibility Stuff
:: Font Size Intervals
:: Depreciated HTML tags & their CSS equivalents

Worth taking a looking at...
http://csszengarden.com/ (make sure you choose a design to change them - it's on the right)

Live Examples that you can try at w3schools.com
http://www.w3schools.com/css/css_examples.asp

Find out if your CSS file has any errors:
http://jigsaw.w3.org/css-validator/

WOW!

Thank you so much.

I want to do my site in another way but my hands were too tight just using the control panel ...

;-)

Alright now, I downloaded the css file from my site and a few example sites. I open them in FP 2002, and can not view them. What am I doing wrong? I can see the css sheet code, but I want to view what it looks like so when I change something on the sheet I can tell what I did. Can you not open it up in the browser and look at it like you do a regular html page?

Any info appreciated,

You need to open an HTML document, and link to the stylesheet you want to see in the page header in order to view the styles.

I would suggest going to your home page, and then saving the entire page into a folder locally. Then, go into FP and open the HTML file. The CSS files will already be linked and should be editable within FP. I use DW, so I am not positive about FP, but it should work.

I found a good program that will allow you to import a .CSS file and view an example of what the applied styles would look like. Oh and did I mention it was free? -

Simple CSS
http://www.hostm.com/css/

jGirly,

This is great information. A lot to thread through, but very useful and we (me) can only get better by learning hot to apply it.

Thanks Again

Doug

I posted this a couple of months ago. It is a really good tool. The best I've tried, next to Dreamweaver of course.

James,

Great tool! It really helps to see if what you are doing is actually working.

Thank You

Doug

Thank you soooo much for sharing these!!

As soon as life calms down I am rolling up the sleeves and learning to use .css

What's the name of 's CSS file? I want to look at some of the new Checkout styles and I can't remember the name and haven't had any success searching the forums.

Thanks in advance.

style.css (software generated)
custom.css (your tweaks)

Located in the root directory in your file manager.

You're welcome Post back if you get stuck!

Me too.

Uh, life will calm down?

Thanks, I knew it was something simple.

I'd really like to see this thread "pinned".

Thanks Jgirl!

Well, I am stumped. I can see my custom.css file, robot.tx and a few other files but no style.css file.

Any more clues?

Doug

Ok maybe you cannot see style.css in the file manager.

You can also get to them by going to:
http://www.yourdomain.com/style.css
http://www.yourdomain.com/custom.css

I assume style.css isn't showing up in the file manager because you really shouldn't be overwriting it.

I plan on doing the same. If life calms down

Agreed! Very nice set of tutorials. I think we could also move it into the MonsterWebDesign section, if no one objects? Perhaps under this link -
http://forums.monstersmallbusiness.com/ind...hp?showforum=21
- since that is more topical.

And while we are at it, here are a few more CSS links that I've found over time. Obviously, this is just a taste of what is available out there, but I hope that this will be a great start and should give everyone enough familiarity with Cascading Style Sheets to accomplish a lot.

Enjoy:

CSS Panic Guide
a guide for the unglued

Real World Style
css layouts, tips, tricks, and techniques

css-discuss.org
Mailing list devoted to talking about CSS and ways to use it in the real world; in other words, practical uses and applications

Macromedia - Developer Center : Tutorials and Samples for Designers and Developers
"Keep an eye on this site for tutorials, specifically about using XHTML and CSS with Dreamweaver. There are whole sections devoted to CSS and accessibility." - ASP Web Development with Dreamweaver MX 2004 by Andrew & Turnball

NYPL: Style Guide
This Style Guide for the Branch Libraries of the New York Public Library explains the markup and design requirements for all Branch Libraries web projects, along with various standards and best practices.

The Web Standards Project
Grassroots coalition fighting for standards that ensure simple, affordable access to web technologies for all.

Ten more CSS tricks you may not know
More CSS magic

CSS Cursors - CSS tutorial
Add Cursors to your page

Real-time HTML Editor
Welcome to the real-time HTML editor! Test out inline CSS.

Thanks to jGirly for starting this thread.

You're all welcome.

I hope that you'll find these links useful, and take the time to learn CSS. You will not regret it! ESPECIALLY those of you who are having trouble with the Advanced Product Display. I created my entire product layout using CSS, so tweaking and making changes is literally a snap. I don't even have to touch the HTML, and there are NO TABLES, which is supposedly better for SEO.

PS - This one is a little advanced, so I would definitely make sure you are comfortable with the easy stuff first, but it is an AWESOME compilation of tips. James, thank you for sharing.

With CSS, the important thing to learn first is that there are three ways to apply CSS to elements on your page. The first and simplest is to add the style as part of the specific tag.

Inline style Example:This is the easiest to start and learn with, but is the most difficult to update later, as you have to find and update each and every instance of it.

The second way to implement CSS is to use Classes and style information within the page, but in a separate place usually near the top.

Internal style Example:This is a little easier to change because you would only have to edit the one location and the rest of the page would follow. The problem here comes when you start to have lots and LOTS of style code within the page, it overshadows the actual page content, causing it to download slower and watering down your search engine results (search engines see the style content as text on the page).

The third way to implement CSS is to use separate CSS files, such as 'style.css' or 'custom.css', that load congruently with the page and apply their rules to the page. This is done by linking these text files to the page in the <head /> with the following code.

External style Example:If you take a look at the full source or your store, you will see that our software automatically adds these two files to every page. The first one listed - style.css - is updated every time you make a change and click save within your admin panel Site Layout menu. The second file - custom.css - can be downloaded from the file manager and updated manually. The browser loads and applies the first file first, but if there are any rules in the second file they apply in addition to OR override previous rules in the first file with the same class.

Once you become familiar with these methods, you can then move on to using ID selectors - <div id="navigation"> - and other more advanced methods to really make your site pop. Here (again?) is my favorite CSS tutorial site -
http://www.w3schools.com/css/
- where a large portion of my knowledge comes from. I hope this helps.