SitePoint Sponsor

User Tag List

Results 1 to 16 of 16

Thread: Learning CSS

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Learning CSS

    Hi, I have managed to work out how to use HTML and CSS thanks to the Sitepoint book and made a website - http://www.ubereadoolische.com/.

    However, how would I go about learning how to create something slightly more modern looking - like http://csszengarden.com/?cssfile=/208/208.css&page=0 for example?

    I am a rather confused beginner as to how I go about extending my CSS knowledge.

    Thanks
    James

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Hi James,

    There are lots of ways to answer this, but my favored approach is to find sites you really like and study them closely. You can look in detail at the CSS they have used, the methods of placing images, the techniques of placing elements on the page etc. Most of what I have gleaned has come from doing this. I have a whole folder of sites bookmarked that I return to regularly for inspiration and instruction.

    But there are also lots of good books that give formal guidance on issues like this too—which include issues of typography and so on. There are some SitePoint books that might provide a nice start, such as The Principles of Beautiful Web Design and Sexy Web Design.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks - I've always found books a very good way for me to learn and as I am very much a beginner I think this would be the case.

    Downloading the CSS code from a website would mean nothing to me, or very little anyway, as I am still very unsure as to what relates to what.

    Are you aware of anywhere that has a preview of the books before I purchased one?

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,771
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    There are lots of ways to answer this, but my favored approach is to find sites you really like and study them closely. You can look in detail at the CSS they have used, the methods of placing images, the techniques of placing elements on the page etc. Most of what I have gleaned has come from doing this.
    Quote Originally Posted by jamesthemonkeh View Post
    Downloading the CSS code from a website would mean nothing to me, or very little anyway, as I am still very unsure as to what relates to what.
    jamesthemonkeh, if you haven't already, I suggest you use a browser development tool to examine websites you like and see how they work.

    I use the Opera web browser and it has a terrific developer tool built-in called Dragonfly. Opera is a great web browser to begin with, but Dragonfly has been an invaluable learning tool for me.

    With Dragonfly, you can inspect every element of a web page and see what CSS applies to it, what background images it uses, and much more. Click on something in a webpage and it will take you to the HTML and CSS behind it. You can also make real-time changes and see those changes applied to the webpage. If you want to see what the page would look like with a box moved, you can move it. Want to see what something would look like with borders, you can add it on-the-fly. Change colors with a pop-up color picker.

    In addition to inspecting HTML and CSS, Dragonfly has a great Javascript debugger. I found Dragonfly to be much better than the Firebug add-on for Firefox. But I haven't used Firebug in a while. Firebug is another developer tool you can look at. It has its fans as well. Internet Explorer has a developer tool, too, but I have never used it.

    You can look at HTML and CSS all day long and if the site is complicated, it can be difficult to understand what does what, what overrides something else. Something like Dragonfly will help you understand how a site works.

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    I second ralph's recommendations highly, they are both excellent books for taking your CSS to the next level.

    Also, I really like Chrome's Inspector, it's a life saver.

    I think the easiest way is to just play around with them.

    The most important properties which you should really master are:
    background, font, width, height, float, clear, position, border, padding, margin, color

    Those elements will likely be used many many times throughout your site. Others will be used, but not nearly as frequently.

    Also, CSS can be a bit finicky and has a lot of "special case" which can throw you at first. That's why it's important to just study other people's CSS as well as play with your own. For example, one that still occassionally throws me for a loop is Collapsing Margins: http://reference.sitepoint.com/css/collapsingmargins

    Some things play better with others, so it's eventually just becomes a matter of figuring out what you want to do, then figuring out the best way to accomplish that (which comes from experience).

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by jamesthemonkeh View Post
    Downloading the CSS code from a website would mean nothing to me, or very little anyway, as I am still very unsure as to what relates to what.
    Indeed. As others have said above, there are simple tools that allow you to look under the hood while looking at the site, and you can look at each HTML element and see what CSS rules apply to it, which is fabulous. As said above, there is Dragonfly for Opera, inbuilt dev tools for Chrome and Safari (just right-click on any element and choose Inspect Element, and a box will open at the bottom of the screen showing you the HTML and CSS involved. For Firefox, there is an addon called Firebug, which is still my favorite tool. (Firefox 10 has introduced native dev tools, but they will take a long while to catch up with Firebug, I expect).

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    To be honest, I just went to forums and just read threads. Pages upon pages of threads. I got to see the issue code and the direct fix. It was really helpful. I highly recommend it if you have time.

    The good thing also is that most of the time, the OP of the thread gives you code to replicate the issue yourself.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the advice. I have bought the book on beautiful web design and will be using the inspect element on google much more!

    The plan is to learn enough to be doing this full time in 3 years professionally...not sure if I am dreaming but that is the plan.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by jamesthemonkeh View Post
    The plan is to learn enough to be doing this full time in 3 years professionally...not sure if I am dreaming but that is the plan.
    To be honest, I think you could be up and running in a much shorter time than that. The basics of HTML and CSS are not hard at all, and they give you the tools to produce a nice, usable site in a short time. You will continue to learn new techniques as you go. I see a lot of stunning websites, and you often find that the designer has only been in the business 3 or 4 years!

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jamesthemonkeh View Post
    Thanks for all the advice. I have bought the book on beautiful web design and will be using the inspect element on google much more!

    The plan is to learn enough to be doing this full time in 3 years professionally...not sure if I am dreaming but that is the plan.
    I bet within a year of good work you could know as much as anyone else in these forums. Once you realize what most issues are caused by, or a logical fix (or illogical) then it's really not hard to guess possible fixes.

    This is just talking from personal experience .

    I personally like the firebug tool to help debug. I find it better than Chrome but that may just be me.

    Even if you don't turn out to be as good as you think, you always have these forums to help .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #11
    SitePoint Enthusiast Albablue89's Avatar
    Join Date
    Jul 2005
    Location
    Scotland
    Posts
    98
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I like to play around and test things in a CSS Sandbox @ cssdesk.com

  12. #12
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    That's a pretty awesome site I've never seen before. -bookmarks-

    Thanks.

    When it comes to anything computer science related, experimentation is hands down the best way to learn (that "science" word isn't in there just for fun and giggles =p).

  13. #13
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    To be honest, I think you could be up and running in a much shorter time than that. The basics of HTML and CSS are not hard at all, and they give you the tools to produce a nice, usable site in a short time. You will continue to learn new techniques as you go. I see a lot of stunning websites, and you often find that the designer has only been in the business 3 or 4 years!
    Probably not realistically because with work and so many other commitments I cannot really work out how I will find more than an hour or two each week. Annoying that it was only going back to work after a period of unemployment which has given me the kick up the ass to do this!

  14. #14
    SitePoint Enthusiast
    Join Date
    Oct 2011
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jamesthemonkeh View Post
    Thanks for all the advice. I have bought the book on beautiful web design and will be using the inspect element on google much more!

    The plan is to learn enough to be doing this full time in 3 years professionally...not sure if I am dreaming but that is the plan.
    I have bought the book though I am not sure it is what I am looking for as I was hoping for a book which would teach me more CSS examples, but it does look a good read, and will be good company for my train journeys.

  15. #15
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Yes, Beautiful web design is only a design book, not a coding one.
    There's a few good options but I've always thought Dan Cederholm's Bulletproof web design is great. It was the first book to get me interested in coding to standards and dealing with the fluidity of the web.

    It's written by the author of http://pea.rs/

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Also you should note that any book written by Paul O'B is sure to be a goldmine.

    The Ultimate HTML and CSS references are amazing. It's not so good for learning per say because all the data is just there, but if you need to cement it in, or you don't know some exotic features, you should get it . Also it's created by Sitepoint so you'd be helping out this website.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

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