???
i am new to using CSS to make a site. i use it to set fonts but never the lay out.
i was reading on <!-- w --><a class="postlink" href="http://www.sitepoint.com">www.sitepoint.com</a><!-- w --> this article and it seems very easy.
all i do is add <DIV ID="EXAMPLE">
then in the CSS file i add
#EXAMPLE {
background-color: #d5d5d5;
text-align: center;
}
ok i think i got that but (here comes the question... at last) what are the benefits of using CSS over tables and were can i find some good tutorials that explain this <DIV> tag stuff further.Ok, a couple of things I'd like to point out.
#1. <rant>Why is everything uppercase? In XHTML, all tags must be lowercase. In HTML4.01, the tags can be either upper or lowercase (I suppose it could be argued that they should be uppercase as that is how the entities are defined in the DTD, but I won't get into that now -- I personally use lowercase even for my HTML 4.01, for when I decide to upgrade to XHTML). The attributes should, however, probably be in lowercase, and I would also not use all uppercase for class or ID names. Maybe it's just me, but I think it looks much cleaner/more readable, even though all uppercase class/ID names is indeed valid HTML 4.01.</rant>
#2. Not to nit-pick, but the CSS in invalid. When you use a background-color, you must also specify a color, and vice-versa.
Now, on to the benefits of CSS...
One benefit of using CSS for layout is managability. Compare any (or nearly any) site layed out with CSS versus one layed out with tables, and you'll notice the difference. CSS also reduces your page weight, and thus can save bandwidth. I'm not one to say that you should never use tables... Sometimes a hybrid layout is just more feasable (if your site receives a large number of 4.x browsers, or if the layout you need can't be done with css [certain 3 column layouts, etc]). But, with valid CSS and HTML 4.01 Strict (or XHTML) you can be sure your page will be accessable to the largest number of users possible, including screen readers.
Another thing I should mention is that with CSS, we are getting closer to being able to separate our content from our layout. We can use (X)HTML to markup our documents, and CSS to lay them out. (X)HTML was never meant to be used as a design tool, but webmasters were forced to use it as such, as there was no alternative. CSS is that alternative. We should make sure our documents are well formed, and don't use excessive, redundant tags. Don't use <h1>, <h2> etc tags, just because you want text bigger. <h1>, <h2>, etc are meant to be headers, not larger text... That is just one example of not using (X)HMTL for layout, there are many more...
You may be interested in the following articles:
<!-- m --><a class="postlink" href="http://www.alistapart.com/stories/practicalcss/">http://www.alistapart.com/stories/practicalcss/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/stories/journey/The">http://www.alistapart.com/stories/journey/The</a><!-- m --> UPPERCASE xhtml was just to enfisize it.
the Background color in the CSS?.... what do i need to add?
thanks for the links... something to work on now.
Thank pyro!
AND SORRY FOR USING UPPERCASE TEXT..... lolIt appears that I may have been incorrect about needing to specify both a background color and a color. It makes more sense to just let the color/background color cascade, if you do not need to explicitly set it, and appears to validate.
Anyway, you might also be interested in some of these links for sample/prebuilt layouts in CSS:
<!-- m --><a class="postlink" href="http://glish.com/css/">http://glish.com/css/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.bluerobot.com/web/layouts/">http://www.bluerobot.com/web/layouts/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">http://www.thenoodleincident.com/tutori ... boxes.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://webhost.bridgew.edu/etribou/layouts/i">http://webhost.bridgew.edu/etribou/layouts/i</a><!-- m --> did not think i need to change the color
thanks 4 the linksYou bet...
Just finished reading this. Looks like a reasonably simple outline for setting up 3-column layouts in CSS, except that it uses javascript (Pyro, aren't you the one who keeps reminding us that 13% of users have js turned off, or whatever?). <!-- m --><a class="postlink" href="http://www.sitepoint.com/article/1213Yes">http://www.sitepoint.com/article/1213Yes</a><!-- m -->, I am one of the members who like to point out that JavaScript can often make your pages inaccessable. Do note, however, that JavaScript itself is not bad. It is only bad when it makes your pages inaccessable to those without. I didn't read the article you linked to, but if the site still works (ie, the content can be viewed and site navigated) for users without JavaScipt enabled, I don't see any problem.In this case it's used to determine the vertical dimensions of the left & right-side <div>s, so, while the site might still be accessible without the javascript, it might look like crap. 
I guess there are tradeoffs for everything...with this new found CSS intrest i have can i do this.
add the <HR> tag in the CSS code but replace the line with a graphics so when i put <div id="hr"> </div> it replaces the gray bar with the image.
if yes how do i do that?I have learned to never say "never," but I believe the answer to your question is No. The <hr> tag is what it is.
However, if you want to simply have a different-color line across the page, you could insert a <div> of 3px in height, for example, and 100% width, and give the background the color you want. I may not be explaining this well, and since I'm pretty new to CSS, also, I won't attempt to give you the coding, but I'm sure someone here can help with that (or correct me )you look at macromedia's site. on there right side box there HR lines at 2 1px line that are different.
but i can not find there CSS.Their CSS is on an external style sheet. You won't be able to see it.
Also, they aren't using the <hr> tag. They've created a <div> called 'hr' (the class name they gave it). This is what I was suggesting you do.
Maybe I AM beginnning to learn this stuff! (pats self on back)
You can get external .css files from your temp, by saving the page, or by typing the address into your location bar...so it is just a <div> tag set up, 3px high and 100% wide with a background color.WOW!! I am learning so much... Recently graduated with a web dev degree and I know (and knew then too) that the CSS was not taught or at least conveniently overlooked except for font, etc.. but not layout...
anyway.. the question is... besides websites... what is a good reference book you would recommend. I want a book on my desk that I can flip through for reference... thinking about oreilly's css, but not sure about it... any suggestions would be appreciated.If you are looking for a reference book, you might want to look into Core CSS (<!-- m --><a class="postlink" href="http://www.amazon.com/exec/obidos/tg/detail/-/0130092789/qid=1063379533/sr=1-1/ref=sr_1_1/103-3338550-2523851?v=glance&s=books">http://www.amazon.com/exec/obidos/tg/de ... ce&s=books</a><!-- m -->). I also have Eric Meyer on CSS (<!-- m --><a class="postlink" href="http://www.amazon.com/exec/obidos/ASIN/073571245X/qid%3D1063379583/sr%3D11-1/ref%3Dsr%5F11%5F1/103-3338550-2523851">http://www.amazon.com/exec/obidos/ASIN/ ... 50-2523851</a><!-- m -->), though haven't had time to read it yet. The later is more of a tutorial style book...I use the spec - <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/">http://www.w3.org/TR/CSS2/</a><!-- m --> to Download a copy. I keep the pdf in my my documents - you can skip the first 10 pages or so though!THANKS!! I'll check those out.
I looked at the Core CSS too. and Yes, more of a reference than a tutorial. I have the basics down, I just want something to help me expand my horizons.
The 2nd edition of Owen Briggs book is coming out next month.. CSS: Seperating Context from Presentation.. what do you think of it???I've not read it, nor seen any information on it (got a link?) but if it teaches what the title suggests, it would be a step in the right direction...<!-- m --><a class="postlink" href="http://www.amazon.com/exec/obidos/tg/detail/-/159059231X/qid=1063391363/sr=1-2/ref=sr_1_2/103-5555211-3151857?v=glance&s=books">http://www.amazon.com/exec/obidos/tg/de ... ce&s=books</a><!-- m -->
it's not released yet. amazon says january, barnes and noble says october....Ah, I was hoping they would at least have a write up on the book. Guess it's a bit hard to tell from that if the books looks like it might be good or not...
<!-- m --><a class="postlink" href="http://www.sitepoint.com/books/css1/">http://www.sitepoint.com/books/css1/</a><!-- m -->
I don't have it, but it looks like a good book.
i am new to using CSS to make a site. i use it to set fonts but never the lay out.
i was reading on <!-- w --><a class="postlink" href="http://www.sitepoint.com">www.sitepoint.com</a><!-- w --> this article and it seems very easy.
all i do is add <DIV ID="EXAMPLE">
then in the CSS file i add
#EXAMPLE {
background-color: #d5d5d5;
text-align: center;
}
ok i think i got that but (here comes the question... at last) what are the benefits of using CSS over tables and were can i find some good tutorials that explain this <DIV> tag stuff further.Ok, a couple of things I'd like to point out.
#1. <rant>Why is everything uppercase? In XHTML, all tags must be lowercase. In HTML4.01, the tags can be either upper or lowercase (I suppose it could be argued that they should be uppercase as that is how the entities are defined in the DTD, but I won't get into that now -- I personally use lowercase even for my HTML 4.01, for when I decide to upgrade to XHTML). The attributes should, however, probably be in lowercase, and I would also not use all uppercase for class or ID names. Maybe it's just me, but I think it looks much cleaner/more readable, even though all uppercase class/ID names is indeed valid HTML 4.01.</rant>
#2. Not to nit-pick, but the CSS in invalid. When you use a background-color, you must also specify a color, and vice-versa.
Now, on to the benefits of CSS...
One benefit of using CSS for layout is managability. Compare any (or nearly any) site layed out with CSS versus one layed out with tables, and you'll notice the difference. CSS also reduces your page weight, and thus can save bandwidth. I'm not one to say that you should never use tables... Sometimes a hybrid layout is just more feasable (if your site receives a large number of 4.x browsers, or if the layout you need can't be done with css [certain 3 column layouts, etc]). But, with valid CSS and HTML 4.01 Strict (or XHTML) you can be sure your page will be accessable to the largest number of users possible, including screen readers.
Another thing I should mention is that with CSS, we are getting closer to being able to separate our content from our layout. We can use (X)HTML to markup our documents, and CSS to lay them out. (X)HTML was never meant to be used as a design tool, but webmasters were forced to use it as such, as there was no alternative. CSS is that alternative. We should make sure our documents are well formed, and don't use excessive, redundant tags. Don't use <h1>, <h2> etc tags, just because you want text bigger. <h1>, <h2>, etc are meant to be headers, not larger text... That is just one example of not using (X)HMTL for layout, there are many more...
You may be interested in the following articles:
<!-- m --><a class="postlink" href="http://www.alistapart.com/stories/practicalcss/">http://www.alistapart.com/stories/practicalcss/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.alistapart.com/stories/journey/The">http://www.alistapart.com/stories/journey/The</a><!-- m --> UPPERCASE xhtml was just to enfisize it.
the Background color in the CSS?.... what do i need to add?
thanks for the links... something to work on now.
Thank pyro!
AND SORRY FOR USING UPPERCASE TEXT..... lolIt appears that I may have been incorrect about needing to specify both a background color and a color. It makes more sense to just let the color/background color cascade, if you do not need to explicitly set it, and appears to validate.
Anyway, you might also be interested in some of these links for sample/prebuilt layouts in CSS:
<!-- m --><a class="postlink" href="http://glish.com/css/">http://glish.com/css/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.bluerobot.com/web/layouts/">http://www.bluerobot.com/web/layouts/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">http://www.thenoodleincident.com/tutori ... boxes.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://webhost.bridgew.edu/etribou/layouts/i">http://webhost.bridgew.edu/etribou/layouts/i</a><!-- m --> did not think i need to change the color
thanks 4 the linksYou bet...
Just finished reading this. Looks like a reasonably simple outline for setting up 3-column layouts in CSS, except that it uses javascript (Pyro, aren't you the one who keeps reminding us that 13% of users have js turned off, or whatever?). <!-- m --><a class="postlink" href="http://www.sitepoint.com/article/1213Yes">http://www.sitepoint.com/article/1213Yes</a><!-- m -->, I am one of the members who like to point out that JavaScript can often make your pages inaccessable. Do note, however, that JavaScript itself is not bad. It is only bad when it makes your pages inaccessable to those without. I didn't read the article you linked to, but if the site still works (ie, the content can be viewed and site navigated) for users without JavaScipt enabled, I don't see any problem.In this case it's used to determine the vertical dimensions of the left & right-side <div>s, so, while the site might still be accessible without the javascript, it might look like crap. I guess there are tradeoffs for everything...with this new found CSS intrest i have can i do this.
add the <HR> tag in the CSS code but replace the line with a graphics so when i put <div id="hr"> </div> it replaces the gray bar with the image.
if yes how do i do that?I have learned to never say "never," but I believe the answer to your question is No. The <hr> tag is what it is.
However, if you want to simply have a different-color line across the page, you could insert a <div> of 3px in height, for example, and 100% width, and give the background the color you want. I may not be explaining this well, and since I'm pretty new to CSS, also, I won't attempt to give you the coding, but I'm sure someone here can help with that (or correct me
)you look at macromedia's site. on there right side box there HR lines at 2 1px line that are different.but i can not find there CSS.Their CSS is on an external style sheet. You won't be able to see it.
Also, they aren't using the <hr> tag. They've created a <div> called 'hr' (the class name they gave it). This is what I was suggesting you do.
Maybe I AM beginnning to learn this stuff! (pats self on back)
You can get external .css files from your temp, by saving the page, or by typing the address into your location bar...so it is just a <div> tag set up, 3px high and 100% wide with a background color.WOW!! I am learning so much... Recently graduated with a web dev degree and I know (and knew then too) that the CSS was not taught or at least conveniently overlooked except for font, etc.. but not layout... anyway.. the question is... besides websites... what is a good reference book you would recommend. I want a book on my desk that I can flip through for reference... thinking about oreilly's css, but not sure about it... any suggestions would be appreciated.If you are looking for a reference book, you might want to look into Core CSS (<!-- m --><a class="postlink" href="http://www.amazon.com/exec/obidos/tg/detail/-/0130092789/qid=1063379533/sr=1-1/ref=sr_1_1/103-3338550-2523851?v=glance&s=books">http://www.amazon.com/exec/obidos/tg/de ... ce&s=books</a><!-- m -->). I also have Eric Meyer on CSS (<!-- m --><a class="postlink" href="http://www.amazon.com/exec/obidos/ASIN/073571245X/qid%3D1063379583/sr%3D11-1/ref%3Dsr%5F11%5F1/103-3338550-2523851">http://www.amazon.com/exec/obidos/ASIN/ ... 50-2523851</a><!-- m -->), though haven't had time to read it yet. The later is more of a tutorial style book...I use the spec - <!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS2/">http://www.w3.org/TR/CSS2/</a><!-- m --> to Download a copy. I keep the pdf in my my documents - you can skip the first 10 pages or so though!THANKS!! I'll check those out.
I looked at the Core CSS too. and Yes, more of a reference than a tutorial. I have the basics down, I just want something to help me expand my horizons.
The 2nd edition of Owen Briggs book is coming out next month.. CSS: Seperating Context from Presentation.. what do you think of it???I've not read it, nor seen any information on it (got a link?) but if it teaches what the title suggests, it would be a step in the right direction...
<!-- m --><a class="postlink" href="http://www.amazon.com/exec/obidos/tg/detail/-/159059231X/qid=1063391363/sr=1-2/ref=sr_1_2/103-5555211-3151857?v=glance&s=books">http://www.amazon.com/exec/obidos/tg/de ... ce&s=books</a><!-- m -->it's not released yet. amazon says january, barnes and noble says october....Ah, I was hoping they would at least have a write up on the book. Guess it's a bit hard to tell from that if the books looks like it might be good or not...
<!-- m --><a class="postlink" href="http://www.sitepoint.com/books/css1/">http://www.sitepoint.com/books/css1/</a><!-- m -->I don't have it, but it looks like a good book.