Results 1 to 17 of 17
  1. #1
    Lite On The Do, Heavy On The Nuts Donuts's Avatar
    Join Date
    January 18th, 2005
    Location
    Winter Park, FL
    Posts
    6,930
    If you want to start learning CSS...
    CSS saves me time (faster to build new pages, less maintenance when I change things), gets me better rankings (can use tags like h1 and still be VERY readable), makes my pages load faster (my html pages are almost half the size they used to be pre-CSS) and makes my pages look great / consistent!

    If CSS is new to you, here's a nice beginner's tutorial I recently tripped across: http://www.wpdfd.com/editorial/basics/index.html

    There's others of course, but this one is very basic and seems very clear to me.

    Earlier this year I converted all of my sites over to CSS - if you've been putting it off, know that it has improved many aspects of my sites and was well worth the time to learn and experiment to get it down reasonably well.

  2. #2
    Moderator MichaelColey's Avatar
    Join Date
    January 18th, 2005
    Location
    Mansfield, TX
    Posts
    16,232
    Thanks! CSS is something I plan to use going forward, and perhaps go back and update my old sites with one day. I know it's incredibly powerful and can really help make code simpler and more readable.
    Michael Coley
    Amazing-Bargains.com
     Affiliate Tips | Merchant Best Practices | Affiliate Friendly? | Couponing | CPA Networks? | ABW Tips | Activating Affiliates
    "Education is the most powerful weapon which you can use to change the world." Nelson Mandela

  3. #3
    Full Member c4's Avatar
    Join Date
    January 18th, 2005
    Posts
    488
    I like the one at
    http://www.w3schools.com/css/default.asp

    They also have a lot of other tutorials worth reading!
    [URL=http://www.hesk.com]Help desk software[/URL]

  4. #4
    Internet Cowboy
    Join Date
    January 18th, 2005
    Posts
    4,662
    Thanks Donuts! I need to start using that as well.


  5. #5
    ABW Ambassador Andy's Avatar
    Join Date
    January 18th, 2005
    Posts
    4,178
    Donuts,

    Thanks for the link - seems to be very well written. I have several sites that need to be retrofitted with CSS. One of them has different fonts for different sections, so it will need about 4 or 5 separate CSS files to make it work. Ugh! The worst part is spending the time to set them up properly, as there are a lot of variables, and it's best to do them all at the same time, while the image of what you want your pages to look like is fresh in your mind. I just have a hard time sitting there working on them for that long.

    Thanks again for the link!

  6. #6
    Lite On The Do, Heavy On The Nuts Donuts's Avatar
    Join Date
    January 18th, 2005
    Location
    Winter Park, FL
    Posts
    6,930
    Quote Originally Posted by Andy
    One of them has different fonts for different sections, so it will need about 4 or 5 separate CSS files to make it work. Ugh!
    Once you learn CSS, you'll also learn that separate CSS files are usually not necessary. Ahhhh, the power of classes! In one CSS file, it's possible (and normal) to have multiple classes defined - in this case, one for each of your different sections - and then just tag each section with class="classname" and all the styling elements are defined from then forward via CSS.

    It is a pain to retrofit no doubt, but not as hard as you might think. And I'll help you out if you decide to go this way.

  7. #7
    Lite On The Do, Heavy On The Nuts Donuts's Avatar
    Join Date
    January 18th, 2005
    Location
    Winter Park, FL
    Posts
    6,930
    Tell you what Andy, I'll create one CSS file for you and convert one page of yours for you as well - sometimes a little jumpstart like that can save truckloads of time. Once your main CSS styles are defined, it's easy to extend them to the rest of your pages.

    And, with CSS, you can convert just 1 page in a site and leave the rest alone - completely unaffected. Then play with the css file and that one page until it feels right. Then roll it to your other pages.

    Once in place, it becomes SO easy to change your whole site in seconds when style or layout updates are needed.

  8. #8
    Lite On The Do, Heavy On The Nuts Donuts's Avatar
    Join Date
    January 18th, 2005
    Location
    Winter Park, FL
    Posts
    6,930
    Right click on this page - this page we're on at ABestWeb - click "View Source" and look at the code here... very near the top you'll see:

    body {
    background-color: #FFFFFF;
    color: #000000;
    font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    margin: 5px 10px 10px 10px;
    padding: 0px;
    }

    That CSS makes this page's body look like it does. I strongly recommend external style sheets - where the HTML points to an external file (usually something like style.css). Here, in Haiko's software, the CSS is internal - meaning the CSS statement are in the HTML coding (versus separate external file) so updating isn't as easy. Of course Haiko's site likely has an admin panel and a ton of programmed features for it to be updated easily by him... but a normal affiliate site didn't come in a box and include an admin panel... so go with external CSS so you update the body's background color within the style.css file instead of editing every html page in your site.

    Now that's I've been using CSS for a little while, new sites are easier to build also - I just take a css file from one of my existing sites and edit a few things to make it look as different as it needs to be.

  9. #9
    Defender of Truth, Justice and the Affiliate Way
    Join Date
    January 18th, 2005
    Location
    The Swamp
    Posts
    7,503
    CSS rocks! It's right up there with SSI for me. Donuts is right Andy, you don't need separate CSS files because of different styles for different areas of your sites. I've never had more than one style sheet for a domain.

    One thing that is helpful when you have mutltiple types of style on a web site is to put some thought into the naming of your classes. Be sure to name them something that is intuitive. This is a huge time saver when assigning a class to a particular area of your site.

    I need to take the time to learn the more advanced CSS coding that can be done. You can do some really cool things that you can't do with HTML. I've seen logos and the such that look like graphics but are really CSS. Definite SEO benefits there. You can also do layout stuff with CSS that breaks through restrictions you get with tables. CSS is also great for doing things like table colors and borders.

    I use DW for coding. DW's CSS wizard is pretty good. I've actually learned some CSS by just ticking off different choices and seeing what I get. I've come up with some pretty cool things doing that.

  10. #10
    Lite On The Do, Heavy On The Nuts Donuts's Avatar
    Join Date
    January 18th, 2005
    Location
    Winter Park, FL
    Posts
    6,930
    Quote Originally Posted by Kellie aka Ms. B
    One thing that is helpful when you have mutltiple types of style on a web site is to put some thought into the naming of your classes. Be sure to name them something that is intuitive. This is a huge time saver when assigning a class to a particular area of your site.
    Kellie speaks from experience!!!! This is SOOOO true!!!

    Don't name a class "bluebold" for example - the class name should be something like "header", "navbar", "content", "footer", "calendarbox", "bottomnavbar", "copyrightnotice" - use name of what they are, NOT what they look like. If you use the name "bluebold" - and later decide to change that section to look red and not bold, well then the name "bluebold" sucks!

  11. #11
    Lite On The Do, Heavy On The Nuts Donuts's Avatar
    Join Date
    January 18th, 2005
    Location
    Winter Park, FL
    Posts
    6,930
    And you know how you can leave notes to yourself within your html files like...
    <!-- This section is my header -->

    Do the same thing within your style.css file like...
    /* -- navbar -- */

    The syntax for CSS notes (old programmers call this REM'ing out a line of code) is explained at the bottom of the page here: http://www.w3schools.com/css/css_syntax.asp

  12. #12
    Defender of Truth, Justice and the Affiliate Way
    Join Date
    January 18th, 2005
    Location
    The Swamp
    Posts
    7,503
    I call it learning the hard way.

    Donuts gives some good examples. If you have an exisiting site you are planning on converting over, even with some of those you want to plan ahead a bit. Using Andy's situation let's say he has 5 different areas to his site with different styles (lets say they are different niches). I probably wouldn't want to go with just 'footer' or even 'footer1', 'footer2'.... I'd go with 'footerniche1', 'footerniche2',.....

    Another example is let's say my current page layout has a navbar on the left and one on the top. Naming them 'navbar' and 'navbartop' can cause cause confusion down the road if you decide to later change your layout to have the top navbar on the right or bottom. 'navbarmain' (meaning your primary navigation no matter where you wind up putting it) and 'navbarsecond' (or something indicative of what is distinguishing in that current top navbar) is helpful for when the real value of CSS comes in....updating your site globally by just changing that one class. I have style sheets that end up being rather lenghty and it sure makes it easier when I've managed to name my classes well to begin with.

    Also be careful of class names that are standard to CSS coding to begin. There are a few of them. DW let's me know if I'm going there, but if you are hand coding or using different software it may not.

  13. #13
    Full Member Tech Evangelist's Avatar
    Join Date
    March 16th, 2005
    Location
    Mesa, AZ
    Posts
    374
    Donuts is right about the importance of using CSS. Your pages will load much more efficiently if you eliminate all of the obsolete font tags and other HTML garbage from your pages. Plus, with an external style sheet you can change the colors, fonts and other page elements throughout a site and do it from a change to a single file.

    I've been using CSS for about four years and learned it from the W3Schools.com site. Once you understand how it works, you will never go back to the old ways of doing things.

    As you learn CSS, make sure that you understand the difference between an id and a class. Technically speaking, they are not interchangeable, although most browsers do treat them as if they were. An id should only be used once on a page and is used to define elements within a container, such as a header table or cell, footer table or cell, or elements contained within a div statement. A single class can be used multiple times on a page. You will find situations where a class works, but an id will not--and vice versa. If something does not work as expected, it's probably due to the way you are using it.
    There's good, fast and cheap. Pick any two.
    [url=http://www.topranksolutions.com]Phoenix SEO[/url] :: [url=http://www.tech-evangelist.com/category/affiliate-marketing/]Affiliate Marketing Tutorials[/url]

  14. #14
    Full Member
    Join Date
    January 18th, 2005
    Location
    UK
    Posts
    273
    To see the real power of CSS visit
    http://www.csszengarden.com/

    There is one standard set of conent for the site and you can select various different CSS schemes to see it displayed in different ways.
    If you are really wizzy at CSS you can even submit your own.

    To change the look and feel just find the section headed "Select a design" and clik on one of the links.

    Currently "pinups", "zen city morning" and "blackcomb*75" provide very differening views of the same basic content.

    Les

  15. #15
    Full Member
    Join Date
    January 18th, 2005
    Location
    UK
    Posts
    273
    CSSZengarden is not really for beginners but this one is ...
    http://www.bluerobot.com/web/layouts/

    I have used some of the Layout Reservoir samples at bluerobot o build some sites that use CSS in stead of tables to control layout and the samples are reasonably easy to follow if you have a good grasp of hmtl and have a done a tutorial on CSS.

    Les

  16. #16
    Member SeanW's Avatar
    Join Date
    July 28th, 2005
    Posts
    69
    I think layout is the hardest part of css, so learning the class selectors and stuff first at least gives you some measure of success.

    For layout, I usually go around to other sites and see how they do it, and there are some sites out there that have tutorials on specific layouts.

    The webmaster toolbar in FireFox also allows you to edit the CSS in a separate window and have it be immediately reflected in the display. You can also identify your elements and a bunch of other cool hacks.

    Sean

  17. #17
    ABW Ambassador buy_online's Avatar
    Join Date
    January 18th, 2005
    Location
    Richmond, VA
    Posts
    3,234
    Imagine having your c*ntent at the top of your code, while having an ad or navigation at the top-left of the page your site visitors see. Welcome to the world of CSS. It's not like having to learn a new programming language either.

    Fred

  18. Newsletter Signup

+ Reply to Thread

Similar Threads

  1. Can you do this with CSS?
    By Cagles Mill in forum Programming / Datafeeds / Tools
    Replies: 3
    Last Post: October 12th, 2006, 05:44 PM
  2. Need some CSS help
    By suzie250 in forum Programming / Datafeeds / Tools
    Replies: 4
    Last Post: August 18th, 2005, 09:02 AM
  3. Help With CSS Please
    By Doug247 in forum Programming / Datafeeds / Tools
    Replies: 3
    Last Post: March 24th, 2005, 08:51 AM
  4. Replies: 8
    Last Post: August 22nd, 2002, 08:07 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •