Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Learning CSS

Mal

Mal

macrumors 603
Original poster
Jan 6, 2002
6,253
30
Orlando
Ok, I taught myself HTML 8-10 years ago, and made several websites entirely by hand while still in middle school and high school. Now, however, I see the potential in CSS and DHTML, but I can't seem to shake off the old mentality of how websites are designed. I want to be able to create websites that are strictly content in the html file, and design entirely by CSS, after having seen the sites that can do that and change design for an entire site with one simple edit. So, I need to relearn how to create the site, but I can't find any good online resources that actually show the very basics of putting together such a website. I need the same perspective as someone who's never made a website before in their life, it seems, since I have no clue where to begin with this. Any suggestions?

jW
 
Yes, that's the site the sparked my interest, but unless I'm missing something, it doesn't really have a tutorial or anything to explain the how, though I've downloaded the source and looked through it. It's still not quite making sense to me.

jW
 
skywalker said:
Yes, that's the site the sparked my interest, but unless I'm missing something, it doesn't really have a tutorial or anything to explain the how, though I've downloaded the source and looked through it. It's still not quite making sense to me.

jW
Click to expand...

I think the best option is to get a solid HTML book and get yourself refreshed on that, and then work on the CSS.

I can't relate to code at all, especially relational stuff like CSS. If you find any better sites, I'd love to check them out.
 
Maybe I wasn't clear, but I don't need to relearn the HTML. I still use it actively. What I'm looking for is a resource to learn the CSS. I still don't know how to do any more than simple style attributes and such.

jW
 
I don't think you mean DHTML I think you mean XHTML. Which does mean you will need to relearn your html a little bit.

A List Apart - is a good resource.

As Is this guide

But like a couple people have mentioned, you really just need to start looking at some code.

Validator is a good resource too. Never publish a page that hasn't passed. The errors it gives you are informative and can help you learn as you go along.

good tutorial section at CSS Pointers

Another list of tutorials
 
I've just borrowed the latest version of Web Design in a Nutshell - A Desktop Quick Reference (this is one of those "small" 800 pages references ;)). And that book seems solid. I might have to buy that one when I have to return it...

It has a whole part dedicated to CSS (one of the two main parts, the other one covers XHTML), and has the complete specification for CSS2.1 (and XHTML) in the Appendixes.
 
As an Amazon Associate, MacRumors earns a commission from qualifying purchases made through links in this post.
AmbitiousLemon said:
I don't think you mean DHTML I think you mean XHTML. Which does mean you will need to relearn your html a little bit.
[/URL]
Click to expand...
DHTML stands for dynamic html, which consists of xhtml, css, and javascript. IMHO, java is the hardest of these to learn, so getting a java book may be the best. From my experiences, getting a book from your local library or bookshop is always the best method to learn about things. A bookstore will have more recent offerings, so I reccomend going to borders or barnes and noble and getting this book:
http://search.barnesandnoble.com/booksearch/isbnInquiry.asp?z=y&isbn=0321199588&itm=1
 
wmmk said:
DHTML stands for dynamic html, which consists of xhtml, css, and javascript.
Click to expand...

Correct but the way the OP used DHTML wasn't correct. It sounded like he was referring to XHTML. Either way, the OP was suggesting that since he learned HTML 8-10 years ago he didn't need to learn XHTML. I was informing him that html has changed a bit and that he will need to learn xhtml as well as css.
 
AmbitiousLemon said:
Correct but the way the OP used DHTML wasn't correct. It sounded like he was referring to XHTML. Either way, the OP was suggesting that since he learned HTML 8-10 years ago he didn't need to learn XHTML. I was informing him that html has changed a bit and that he will need to learn xhtml as well as css.
Click to expand...
very true. i stand corrected.
 
Yeah, you're both right. I do understand the difference between DHTML and XHTML, although I was using the term wrong. Also, I've kept up with them mostly, though I guess I could stand a bit of updating on some of the new techniques. I've been experimenting a bit though, and I took a web design class that had us validate everything as XHTML, so I'm in pretty good shape for the most part. I think I'll be taking some time to look over some sites, mostly from that Zen Garden page, and figuring out how to put it into effect with the designs I like. I'll look at most of the links ya'll posted too, though, they all seem pretty good. Thanks a bunch!

jW
 
wmmk said:
DHTML stands for dynamic html, which consists of xhtml, css, and javascript. IMHO, java is the hardest of these to learn, so getting a java book may be the best.
Click to expand...


just a little nit-picking but, java and javascript are totally different. Learning javascript isn't too bad if you have experience with other languages. With xhtml and javascript knowledge you are ready for ajax. anywho, just thought i would straighten that out for everyone not "in the know".

edit: you are right about java being a difficult little turd.
 
Thanks, guys, I made a sample replacement page for the site I'm working on, and I'm having a few problems I can't identify. I used the template from the Zen Garden, but it's way too wide for some reason, and I want to figure out what I need to do to if I want to break up the top image and have the text left aligned and the Fuji pic aligned evenly with the end of the repeating background. Any other suggestions would be awesome. I'm posting the css and html files here in addition to the link.

http://www.japancpi.com/index2.html

jW
 

Attachments

  • cssattempt.zip
    3.7 KB · Views: 126
i'd suggest starting from scratch so you understand your own code.

the too wide issue is this:

#container {
width: 80%;
background-color: pink;
border: 1px solid gray;
padding: 0px 175px 0px 110px; /* This line is creating padding on the sides of your container that make it wider than the page */
margin: 10px auto;
line-height: 130%;
}

include the images and i'll play with your header issue a bit.
 
Hey, thanks. I think I'll be able to get the header, but I'll post the images tomorrow anyways, at least if I haven't got it by then (unlikely, I have to work). I did do a bunch of what's there more or less from scratch, but that was one of the areas I didn't bother with. Heh, it's not a long file and I scanned through it basically looking for numbers that were too big, but I somehow missed that, probably cause I still didn't know quite what I was looking for. My intention is to use this for practice, then create the real code from scratch laid out exactly how I want it, not simply copied from others. This is how I'm learning though, and I want to thank ya'll for helping me out.

jW
 
When trying to figure out code its often a good idea to set vibrant background colors or borders to differentiate the different things you are styling. This lets you more easily see what is responsible for errors than if its styled normally.
 
Don't start down the path of traditional dom scripting. Check out the Dojo Toolkit (http://www.dojotoolkit.org) and use the event system and all of the other goodies it provides. It's nice to know how it all works however but a lot of the way things used to be done are really on the way out.. and attaching onClick events to dom nodes is one of those.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back