A Flash Developer Resource Site

Page 1 of 3 123 LastLast
Results 1 to 20 of 55

Thread: Learning CSS

  1. #1
    New Wave Visionray's Avatar
    Join Date
    May 2001
    Location
    X
    Posts
    544

    Learning CSS

    Well it's time for me to start applying for new jobs. I've been at the same job for awhile now and my web skills are very rusty. Most jobs that I'm looking at are calling for proficiency in CSS and I really don't have a clue. Does anyone know of any good books or online resources for CSS? I'm sure I can find some but was just curious to get other opinions on what are the best. Thanks.

  2. #2
    Flash Kit Moderator Genesis F5's Avatar
    Join Date
    Jan 2002
    Location
    Unallocated memory
    Posts
    1,845
    www.w3schools.com. Great place to start. CSS is EXTREMELY easy, but implementation for many is not so. It's easy to get carried away in a hurry.

    Visit CSS zen garden for some inspiration.

    Basics:

    • Direct object manipulation (like font / text areas), IDs, and Classes.
    • Everything (except brackets) needs to end with a semicolon (think C/C++). CSS isn't as forgiving as JS. Without the proper closing semicolon, anything after that won't be parsed correctly. If you ever have a design disaster, start by checking for missing semicolons.
    • Every style needs to be enclosed in brackets (ie: font{font-size:10pt;})
    • Like JS, you can (and most commonly) store data in external CSS files to create libraries of sorts. You can give it parse it in the HTML file with "style" header/footers (<style></style>) and you can also apply styles directly with " <font style="font{font-size:10pt;}"></font> "
    Last edited by Genesis F5; 07-13-2006 at 02:45 AM.

  3. #3
    supervillain gerbick's Avatar
    Join Date
    Jul 2000
    Location
    undecided.
    Posts
    18,979
    http://www.alistapart.com
    http://www.stylegala.com
    http://www.zeldman.com

    I'm using those to learn CSS among other things right now my damn self right now.

    hurry up VR, get a job, become the manager, hire me.

    [ Hello ] | [ gerbick ] | [ Ω ]

  4. #4
    poet and narcisist argonauta's Avatar
    Join Date
    Nov 2001
    Location
    Under the bed
    Posts
    2,080
    i think the basics of css is as easy to understand as the logic of xml. You can learn in 10 minutes. Then, it's just messing around, learning what properties each tag has, etc....the worst comes when you see the results in both firefox and IE and everything looks different. I guess that's hardly covered in books, better covered in blogs about css (start with a list apart). There's a lot of information about css in blogs, much more than any book I can think of about the same topic.

    anyway: http://zenetide.com/sabrosus/tag/css there you have my personal bookmarks for css
    Last edited by argonauta; 07-13-2006 at 03:10 AM.
    my blog: blog.innocuo
    Sponsored by your mom.

  5. #5
    New Wave Visionray's Avatar
    Join Date
    May 2001
    Location
    X
    Posts
    544
    awesome thanks guys, this is a great start.

    Yeah Gerbick I just lost my contract after 5 years. Apparently the DOD doesn't have any money to continue funding...ha! Do you have yahoo chat? If so PM me your name I have a question for you. I don't have msn anymore.

  6. #6
    New Wave Visionray's Avatar
    Join Date
    May 2001
    Location
    X
    Posts
    544
    I really am out of the loop when it comes to web design nowadays. I had an interview yesterday and the guy asked me what kind of wireframing experience I had. I was totally dumbfounded and couldn't even BS my way through it.

  7. #7
    Flash Kit Moderator Genesis F5's Avatar
    Join Date
    Jan 2002
    Location
    Unallocated memory
    Posts
    1,845
    Quote Originally Posted by argonauta
    The worst comes when you see the results in both firefox and IE and everything looks different.
    Bingo. That's an important point Argonauta brings up. I like to load them up locally and check in on them every now and then just to make sure everything's peachy. It sure beats having to backtrack.

    CSS is a lot of fun just because of the control you have. I just recently had a project where I had to put the scrollbar on the left side of the screen, but still maintain a left-to-right orientation. That was something fun to learn (direction:rtl; or direction:ltr;)

    Don't put too much emphasis on actually learning all of the properties right away. Just make yourself a handy reference sheet or something. You'll learn them eventually as you work with them more and more. Fortunately, they all basically make use of common properties (color / orientation / placement / scale.)

  8. #8
    supervillain gerbick's Avatar
    Join Date
    Jul 2000
    Location
    undecided.
    Posts
    18,979
    Quote Originally Posted by Visionray
    Yeah Gerbick I just lost my contract after 5 years. Apparently the DOD doesn't have any money to continue funding...ha! Do you have yahoo chat? If so PM me your name I have a question for you. I don't have msn anymore.
    pm sent.

    lol... 5 years seems to be the magic number... I lasted for 5 years basically - '99 to '04.

    Seriously... finding new contracts that aren't going to be out of funding shortly has been a problem lately for me too.

    [ Hello ] | [ gerbick ] | [ Ω ]

  9. #9
    Flash Kit Moderator Genesis F5's Avatar
    Join Date
    Jan 2002
    Location
    Unallocated memory
    Posts
    1,845
    Quote Originally Posted by Visionray
    I had an interview yesterday and the guy asked me what kind of wireframing experience I had.
    I had to look that one up too: link At least, now we know.

  10. #10
    Senior Member catbert303's Avatar
    Join Date
    Aug 2001
    Location
    uk
    Posts
    11,222
    Some of the documents in the specifications can be really helpful (there are lots of little examples dotted throughout) - if you can't remember what value a property could have you'll find it fastest here.

    http://www.w3.org/TR/CSS1
    http://www.w3.org/TR/CSS21/

    Some other places that might be useful...

    http://css-discuss.incutio.com/
    http://www.positioniseverything.net/
    http://css.maxdesign.com.au/listamatic/

    There are a bunch of useful tools for working with CSS - most browsers have a developer toolbar available e.g. http://chrispederick.com/work/webdeveloper/ I also wrote my own tool to help debugging CSS layouts (should work in Opera 8+ and Firefox with the Greasemonkey extension)

    Also - not really useful for learning CSS, but quite interesting anyway - there is some good stuff about the evolution of CSS here - http://people.opera.com/howcome/2006/phd/

  11. #11
    FK's Official Mac Hater jasonsplace's Avatar
    Join Date
    Mar 2002
    Location
    Provo, Utah
    Posts
    2,245
    I agree with www.w3schools.com. I visit there on nearly a daily basis. Also, the book "Eric Meyer on CSS" is very good.

    To help with cross browser compatibility, check out CSSVista. It's a free program and for anyone who has ever used the Edit CSS feature in Firefox it's a lifesaver. It allows you to edit a pages CSS and have a live preview in IE and FF at the same time. It doesn't let you save your CSS but at least you can tweak and test easily and then copy and paste.
    Last edited by jasonsplace; 07-13-2006 at 09:27 AM.
    Jason L. Wright
    I'm not that hard to imitate. Just make some random negative claim at Apple or anything else for that matter and then have nothing to back it up.

  12. #12
    Running Plodding & Limping SpockBert's Avatar
    Join Date
    Jun 2002
    Location
    London
    Posts
    593
    Agree with the other posts in here, its simple to learn (I've also heavily relied on that excellent w3schools site) but then tweaking it and learning workarounds so it looks the same FF and IE is a huge pain, something that still bugs me now.

    You'll code your page, make it neat, congratulate yourself on getting away from nasty tables then just as a formality you'll check the page in IE.........

    ...then your stomach will churn as you realise it treats borders, padding, margin, alignment and just about everything different and your once fine looking page will look like a dog's breakfast!

  13. #13
    2008 Man of the Year JWin's Avatar
    Join Date
    Aug 2005
    Location
    here
    Posts
    768
    Quote Originally Posted by SpockBert
    ...then your stomach will churn as you realise it treats borders, padding, margin, alignment and just about everything different and your once fine looking page will look like a dog's breakfast!
    It's not that bad, I usually get away with just a couple margin hacks. Actually my biggest headache recently was IE's wonderful 1 pixel rounding issue when centering things, which as of IE7 beta 2 was still not fixed.

    SAMedia Blog (general bs) :: jwinmedia (my music site)
    "Think of an advertisement where the product you're marketing is Jesus!"
    -From a work for hire ad

  14. #14
    FK's Geezer Mod Ask The Geezer's Avatar
    Join Date
    Jul 2002
    Location
    Out In The Pasture
    Posts
    20,490
    I find books easier to learn from. I recently bought these two;

    101 Essential Tips, Tricks and Hacks, published by Sitepoint. And Designing Without Tables Using CSS, also by Sitepoint.

    Very handy for reference. But, as CSS is changing so fast, any book is going to be out of date fast too.

  15. #15
    FK's Official Mac Hater jasonsplace's Avatar
    Join Date
    Mar 2002
    Location
    Provo, Utah
    Posts
    2,245
    Quote Originally Posted by Ask The Geezer
    But, as CSS is changing so fast, any book is going to be out of date fast too.
    It isn't changing all that much. CSS 3 is going to be cool but it can only change as fast as the browsers that support it and I don't see IE supporting the changes anytime soon.
    Jason L. Wright
    I'm not that hard to imitate. Just make some random negative claim at Apple or anything else for that matter and then have nothing to back it up.

  16. #16
    Senior Member random25's Avatar
    Join Date
    Apr 2002
    Posts
    566
    Quote Originally Posted by Genesis F5
    I had to look that one up too: link At least, now we know.
    Wireframing...
    Oooh...
    I've never heard it called that,
    Now i have a fancy new term to spring on people.

    If you want to make an apple pie from scratch, you must first create the universe. Carl Sagan

  17. #17
    Flash Kit Moderator Genesis F5's Avatar
    Join Date
    Jan 2002
    Location
    Unallocated memory
    Posts
    1,845
    Yeah, I'd call something like that a "working mockup." Good to know the technical jargon, though. Initially, I thought wireframing would be similar to a flow chart, which it is, I suppose. Just, there's actual pages involved, but it's the same principle.

  18. #18
    FK's Geezer Mod Ask The Geezer's Avatar
    Join Date
    Jul 2002
    Location
    Out In The Pasture
    Posts
    20,490
    Yeah, I'd call something like that a "working mockup."
    I still call it storyboarding.

  19. #19
    associate admedia's Avatar
    Join Date
    Oct 2001
    Location
    is
    Posts
    1,347
    If I was asked if I had any wireframing experience, I would probably answer... "no, 3-D rendering isn't really one of my strong points."

  20. #20
    Flash Kit Moderator Genesis F5's Avatar
    Join Date
    Jan 2002
    Location
    Unallocated memory
    Posts
    1,845
    I don't know, ATG. Whenever I think of a storyboard, I think of the project as a whole, fleshed out on paper with a little more detail. There's contextual clues as well as graphical representation.

    Hahaha, Admedia. This is another reason why words with multiple meanings aren't a good thing.

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center