CSS Tutorial Recommendations

Discuss general web development questions. Help others and get help from others.

Moderator: kfury77

CSS Tutorial Recommendations

Postby Mot » Wed Oct 31, 2007 4:53 pm

We all have to start with CSS somewhere.

As someone who's just building his first couple of sites using CSS, I'm finding it pretty frustrating and it's not always clear where to turn for help.

I've found several tutorials that I've used to kickstart my CSS developing adventure, but I often question whether I'm seeing as clear a picture as I can about how this is supposed to be done. Seeing how badly it has all gone wrong for me while working with a couple of sites would probably give you quite a laugh! lol.

So, if you would, please post your favorite CSS Tutorial link here so we can all benefit from better knowledge of CSS and learn additional tricks.

Thanks, and here's a few of the ones I've found so far:

Tizag's CSS Tutorial
HTML Dog's Beginner and Advanced CSS Tutorials
Advanced CSS Layouts: Step by Step
BrainJar: Experiments in Web Programming
CSSPlay
User avatar
Mot
 
Posts: 28
Joined: Tue Oct 09, 2007 4:13 am

Postby daredare » Wed Jan 02, 2008 9:11 pm

i could suggest you this: http://www.w3schools.com/css/default.asp
havent done it myself but their tuts are a good starting then if you have questions i would suggest you the coding forums: http://www.codingforums.com/
daredare
 
Posts: 125
Joined: Sun Sep 09, 2007 1:40 pm

Postby Cary » Thu Jan 03, 2008 12:56 am

Cary
 
Posts: 82
Joined: Mon May 28, 2007 10:41 pm

Postby chrisjlocke » Sat Jan 05, 2008 3:30 pm

I was going to suggest HTML Dog, but thats already on your list. Found that extremely helpful when I first started out with CSS.
User avatar
chrisjlocke
Top Contributor
 
Posts: 966
Joined: Mon Aug 01, 2005 4:12 pm
Location: Essex, UK

Postby MaxD » Wed Jan 09, 2008 3:46 pm

Nothing wrong with a good book. Sit with HtmlPad in front, whilst searching the index for a clue, then test it out. All guides are like a dictionary in the end, you have to string the words together to make a story. :wink:

A good reference is: CSS in easysteps by: Mike McGrath ISBN 1-84078-301-X
User avatar
MaxD
 
Posts: 127
Joined: Mon Dec 18, 2006 10:05 pm
Location: UK

Postby multifarious » Tue Feb 05, 2008 5:07 pm

ever wondered why certain stylerules take precedence over other rules? this is due to specificity.. (yes, that's a word ;))

get your info from:
http://www.stuffandnonsense.co.uk/archi ... _wars.html
http://www.rebelinblue.com/specificity.php
multifarious
 
Posts: 32
Joined: Tue Feb 05, 2008 4:40 pm
Location: Amsterdam

Re: CSS Tutorial Recommendations

Postby kramsart1 » Thu Jun 11, 2009 10:42 am

:? Hi I'm totally new to web design. Can you please advise a sure process for me I'm not getting any younger. What do I really need to learn. Ive been getting books from the lybrary on HTML and CSS basics I plan to build a web site for myself ( an artist ) with a light box or some kind of gallery etc I dont need to be a rocket scientist but want to try and stay almost current. Any advise would be appricated
kramsart1
 
Posts: 1
Joined: Thu Jun 11, 2009 10:28 am

Re: CSS Tutorial Recommendations

Postby syrupcore » Fri Jun 12, 2009 10:07 pm

kramsart1 wrote::? Hi I'm totally new to web design. Can you please advise a sure process for me I'm not getting any younger. What do I really need to learn. Ive been getting books from the lybrary on HTML and CSS basics I plan to build a web site for myself ( an artist ) with a light box or some kind of gallery etc I dont need to be a rocket scientist but want to try and stay almost current. Any advise would be appricated



Write good HTML and worry about the CSS after. If you have good HTML you can gradually improve the design over time. If you have bad HTML, you'll be constantly dealing with the HTML instead of the CSS.

Use as little HTML as possible (but no less) and name things (like IDs and classes) as what they are - not how they look. div id="maincontent" instead of div id="left-column" because in a year, who knows what your design will be.

Then avoid position: absolute; like the plague until you've been at it a while. It's a bitter tempting devil and will bite you!
User avatar
syrupcore
Top Contributor
 
Posts: 917
Joined: Thu Jul 21, 2005 12:58 am
Location: Portland, Oregon, usa

Re: CSS Tutorial Recommendations

Postby chrisjlocke » Sat Jun 13, 2009 5:58 pm

As listed in post #1, I'd recommend the HTML Dog tutorials. They start out very basic and guide you very gently on what HTML tags are and when to use them. The major "selling point" of that site as well is to teach you the proper standards, which the site owner is very keen on. Thats a gooooood thing.

http://htmldog.com/
.
User avatar
chrisjlocke
Top Contributor
 
Posts: 966
Joined: Mon Aug 01, 2005 4:12 pm
Location: Essex, UK

Re: CSS Tutorial Recommendations

Postby MaxD » Wed Jun 17, 2009 10:49 am

syrupcore wrote:
Write good HTML and worry about the CSS after. If you have good HTML you can gradually improve the design over time. If you have bad HTML, you'll be constantly dealing with the HTML instead of the CSS.



Here is some html:

<div id="bigbox">
<div id="mediumbox">
<div id="smallbox"></div>
</div>
</div>

Not much without the css describing position, size, color, bg image, z-index, border etc etc

How about an example :?:
Amateur web design now dabbling with php and jquery
User avatar
MaxD
 
Posts: 127
Joined: Mon Dec 18, 2006 10:05 pm
Location: UK

Re: CSS Tutorial Recommendations

Postby syrupcore » Thu Jun 18, 2009 1:13 am

MaxD wrote:
Here is some html:

<div id="bigbox">
<div id="mediumbox">
<div id="smallbox"></div>
</div>
</div>

Not much without the css describing position, size, color, bg image, z-index, border etc etc

How about an example :?:


guess it depends on what you're marking up. Since there's no content it's hard for me to do anything except say "yup, that's html." What sort of example are you looking for?

here's a common example (I think) of good markup vs bad markup: the ever present horizontal nav menu.

Good:
Code: Select all
<ul class="nav">
   <li><a href="#">nav 1</a></li>
   <li><a href="#">nav 2</a></li>
   <li><a href="#">nav 3</a></li>
   <li><a href="#">nav 4</a></li>
   <li><a href="#">nav 5</a></li>
</ul><!-- /nav -->


Bad:
Code: Select all
<table class="nav">
   <tr>
      <td><a href="#">nav 1</a></td>
      <td><a href="#">nav 2</a></td>
      <td><a href="#">nav 3</a></td>
      <td><a href="#">nav 4</a></td>
      <td><a href="#">nav 5</a></td>
   </tr>
</table><!-- /nav -->


The second one (in a table) will work just fine but what happens when you (or your client) decides you want the nav to be vertical? By marking it up with something meaningful (a list of links) as opposed to something presentational (a table will get the links to display horizontally) the code becomes easier to maintain. Mind, that's a mighty clean table in this example and more often than not you see goofy stuff like:

Code: Select all
<table class="nav">
   <tr>
      <td class="menu-item"><a class="menu-link" href="#">nav 1</a></td>
      <td class="menu-item"><a class="menu-link" href="#">nav 2</a></td>
      <td class="menu-item"><a class="menu-link" href="#">nav 3</a></td>
      <td class="menu-item"><a class="menu-link" href="#">nav 4</a></td>
      <td class="menu-item"><a class="menu-link" href="#">nav 5</a></td>
   </tr>
</table><!-- /nav -->




with a ton of extra useless classnames and general html bloat (another row added for spacing...). Unless you're writing a "skinnable" CMS template or forum software (view source here), classing everything is just a waste of time and bandwidth (bad html). All of that stuff could be handled with descendant selectors ala

Code: Select all
.nav a {color: red}
vs
.menu-link {color: red}


they both work but one is easier to maintain.

For another good a/b example, look at an old version of PHPBB (perhaps http://messageboard.tapeop.com/viewtopic.php?t=64410) and look at a modern one (like this very forum). First look at the total amount of HTML involved and then consider what it would take you to redesign each codebase if you had to. Blumentals could be completely changed (style and layout) from a CSS doc alone where as the tapeop site would require a total rewrite of both the HTML and CSS.

hope this is what you were asking about. CSS is all about styling HTML. Starting with good (semantic, lean, accessible) HTML makes writing CSS a lot easier.


Will
User avatar
syrupcore
Top Contributor
 
Posts: 917
Joined: Thu Jul 21, 2005 12:58 am
Location: Portland, Oregon, usa

Re: CSS Tutorial Recommendations

Postby MaxD » Thu Jun 18, 2009 9:42 pm

So you were talking about tables, and the troubles they can cause? Generally I don't try to use tables at all, unless its a script I'm using which uses tables, and I have to make it work as best.

Coincidentally I had an email from Sitepoint who add me to their mailing if I download their samples, then tell me I'm already listed :)

It's about object orientated css. Here is a video. Haven't checked it but I'd imagine its useful:
http://wiki.github.com/stubbornella/oocss
Amateur web design now dabbling with php and jquery
User avatar
MaxD
 
Posts: 127
Joined: Mon Dec 18, 2006 10:05 pm
Location: UK

Re: CSS Tutorial Recommendations

Postby syrupcore » Fri Jun 19, 2009 5:42 am

MaxD wrote:So you were talking about tables, and the troubles they can cause?


Not really - just an example.

<div id="navHome"><a href="#">Home</a></div>
<div id="navProducts"><a href="#">Products</a></div>
<div id="navAbout"><a href="#">About</a></div>

<p class="blueHeadline"><strong>my headline</strong></p>

<p class="list"><img src="bullet" /> list item</p>
<p class="list"><img src="bullet" /> list item</p>
<p class="list"><img src="bullet" /> list item</p>
<p class="list"><img src="bullet" /> list item</p>

or worse
<img src="bullet" /> list item <br />
<img src="bullet" /> list item <br />
<img src="bullet" /> list item <br />
<img src="bullet" /> list item <br />

are all common ways people make using CSS hard.

I'll have a look at the oop css. I've seen attempts before but it mostly seems like a neat way to get people to let you speak at conferences. :)
User avatar
syrupcore
Top Contributor
 
Posts: 917
Joined: Thu Jul 21, 2005 12:58 am
Location: Portland, Oregon, usa

Re: CSS Tutorial Recommendations

Postby MaxD » Fri Jun 19, 2009 8:56 am

They're pretty good examples of poor styling of elements. Looks like that kind of author is still using inline styles. Had a look at the forum code too, and that is a real mess.
Amateur web design now dabbling with php and jquery
User avatar
MaxD
 
Posts: 127
Joined: Mon Dec 18, 2006 10:05 pm
Location: UK

Re: CSS Tutorial Recommendations

Postby syrupcore » Fri Jun 19, 2009 5:45 pm

MaxD wrote:It's about object orientated css. Here is a video. Haven't checked it but I'd imagine its useful:
http://wiki.github.com/stubbornella/oocss


Just had a chance to look through her slides. Seems pretty spot on for bigger sites and general best practices. It's pretty much how we get stuff done at work (isitedesign.com). "object oriented" is a bit of a stretch but hey, if it gets people to pay attention, rock on. :)

For sure, that method would fall on it's face without using good, minimal, semantic HTML.
User avatar
syrupcore
Top Contributor
 
Posts: 917
Joined: Thu Jul 21, 2005 12:58 am
Location: Portland, Oregon, usa

Next

Return to Web Developer Talk

Who is online

Users browsing this forum: Bing [Bot] and 1 guest

cron