SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 35

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Tulsa, OK
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why CSS? I don't get it!

    I've read quite a bit about CSS from different sources yet, I still can't see it's usefulness.

    I mean, it seems like a longer, more complicated way to do what I could already do in HTML. From what I've seen, I can't find a reason to use it.

    Sure, there are some cool tricks like changing the color of the scrollbar or a form field, but why else would I use it?

    For instance, if I want a certain tag to always mean a certain thing, I have now limited myself in the use of that tag, plus I've added to my workload by needing to remember which tag now does what!

    Is it really only useful for setting a location (I can use tables) and font colors and sizes (I can use other tags)?

    Can it REALLY help me change the look of my whole site more easily? I mean, if I do a complete redesign, can it be implemented just by changing the style info?

    I just don't understand why I should learn a whole new set of terms and mark-up info when I have done some pretty nice things without it.

    Any comments? It'll need to blow my mind before I go to all of the trouble.

    Confused

  2. #2
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps you would like them more if you were familiar with stylesheets in a page design program such as those from Adobe.

    Have you ever created a web page that you had to maintain afterwards? Can we see some of your web pages?

    I find CSS to be really, really great. However that's only because it is so very much more powerful than standard HTML markup and because it comes in handy when modifying and updating a web site.

    It's very easy to learn - all you have to do is stick a style="" tag into your HTML element. Also you're not changing the HTML elements themselves (that's not the purpose of HTML - if you want to create tags IE has technology to do that or you could jsut go to XML).

    Do you use the default font on every single web page that you create or do you specify a font? If you specify a font it's immediately easier to link to a single stylesheet file from every web page that you create rather than having to implement multiple <font> tags on the page.

  3. #3
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are a plethora of things that CSS is useful for, not the least of which is making you more efficient and productive.

    Let's say that you lay out a site that you plan on changing fairly often. Maybe it's a commerce site that needs to reflect the seasons. You decide that you want the text in the header to be green in the Spring, Red in the Summer, brown in the Fall and Blue in the Winter.

    Of course you could go in and change that all manually. But if your site starts getting larger and larger, your page count could get into the hundreds. That would take you hours to change it all.

    Enter stylesheets...With one change to your linked stylesheet all of your headers are the new color. 5 minutes MAYBE. How does it work?

    Simply define a style like so:

    <style type="text/css">
    <!--

    .header {font-family: verdana; font-size: 15pt; color:#ff0000; }

    -->
    </style>

    Then, in every place you wanted your header you said:

    <span class="header">Sweaters</span>

    How does it work? By defining the "class" header you are setting up a "style". You can then call that style from ANY HTML tag.

    <td class="header">some content</td>

    Would render the contents of that particular TD the same style as the SPAN tag.

    I agree with you that if you style a tag itself that you lose the usefulness of that tag. That is the beauty of "classes". If I wanted the header style to ONLY be accessible to a B tag then I could do this:

    b.header {font-family: verdana; font-size: 15pt; color:#ff0000; }

    Now, ONLY a B tag could use that style, but the B tag itself remains unchanged.

    Does that help? That's only a small portion of the power of CSS. Other things that it can do are:

    • Position elements on a page outside of the flow of normal HTML
    • Divorce content from presentation, allowing you to use the same content for PDA devices, WAP devices, web browsers and future devices that we don't know about yet.
    • dHTML would not dHTML without the use of stylesheet. All those funky dropdown menus? Unusable without CSS
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Tulsa, OK
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This sounds interesting:

    Divorce content from presentation, allowing you to use the same content for PDA devices, WAP devices, web browsers and future devices that we don't know about yet.
    Care to explain that further? Does it take the place of SSI or other dynamic page methods?

    I still can't see a situation in which I would need to use CSS. I think it would be easier to use a template header and footer and just change them as needed. No?

    And, how would I be able to position things outside of what HTML can do? I understand layers and such, but is it worth the extra effort?

    I am not trying to knock it or be difficult, I would just like to know more about it so if it will help me I will learn more.

    By the way, I use Dreamweaver 4. I know it is capable, but I haven't needed to use it.

    Thanks for the input!

  5. #5
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok...right now we (the design community) have created these elaborate methods of designing pages with TABLES and clear GIF's and marginwidth hacks.

    While I am guilty of this too, it's not what HTML was intended for. HTML was to be used to markup text documents so that they would have a clearly defined structure.

    H1
    H2
    H3
    H4

    and so on. Tables merely make it more complicated because they were not meant for layout, they were meant to be used for displaying tabular data. Now, using CSS you can position elements exactly where you want them on the page like so:

    div.center {position:absolute; top:100px; left:50%; width: 200px; }

    Then call it like so:

    <div class="center">some content</div>

    That would absolutely position a DIV 100 pixels from the top of the window and 50% from the left side. It works in both Netscape and IE. Just as an example, the same code sing tables would look like this:

    <table cellpadding="0" cellspacing="0" border="0" width="100%">
    <tr>
    <td colspan="2"><img src="clear.gif" height="100"></td>
    </tr>
    <tr>
    <td width="50%"><img src="clear.gif" height="100"></td>
    <td width="50%">
    some content here
    </td>
    </tr>
    </table>

    So, not only are creating smaller files, you are seperating your content from your markup as the DIV tag was MEANT to be used as a container for content. Now, when you add in the @media feature you can set up a superset of styles for different devices. It alows you to specify a set of styles for PDA's, one for normal browers and yet another for a cellphone.

    @media all { BODY { font-size: 10pt } }
    @media handheld { BODY { font-size: 12pt } }

    @import url("someStyle.css") all, handheld;

    I just set up one style for al devides and another for a handlheld such as a phone or a PDA.

    Now are you starting to see the value of CSS?

    As for using a header and footer, sure, that works. I use that method on every site I work on, BUT I merely include the styles declarations themselves. I STILL have to reference the styles on a staic page. That is where the power starts to come in. I can set up a slew of styles, changing color, font face, size borders and with one change to the stylesheet my ENTIRE site is changed. Something that would have taken days or even weeks just took me 1 hour, maybe less.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  6. #6
    Bimbo With A Brain! silver trophy Saz's Avatar
    Join Date
    Mar 2001
    Location
    Kent, United Kingdom
    Posts
    5,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heavy....

    I'm posting here as a complete newbie to CSS. I've just started to learn it and have only grasped the basics so far, but still find it to be an immense help.

    When I created the Postfive website, I had all fonts, colours, links etc. etc. defined individually within each page and it took me two, maybe 3 days to go in and remove all these tags so that my style sheet (even though a basic one) would take over - and my site is not that big yet. Now though, if I decide that I want to change it so that, for example, my headers are all one size bigger, or a slightly different colour, I just go into the style sheet, make the appropriate change, and the whole site is updated in minutes. If the style sheet wasn't there, I'd be looking at 2 to 3 days work to just make 1 or 2 changes. This is what Creole was getting at. Trust him. He knows what he's talking about.

    If you want to read up about it a little more, and haven't already been here, you could try W3 Schools Online This is what I used for my introduction to CSS, and I also ordered myself a book...... Cascading Style Sheets - Designing For The Web. It's published by Addison Wesley and is written by Hakon Wium Lie and Bert Bos....the creators of CSS. From a beginners point of view, I find the book comprehensive and easy to follow.

    At the end of the day, whether or not you decide to work with CSS or not is up to you, but if you make the break, I can guarantee you won't look back.
    Saz: Naturally Blonde, Naturally Dizzy!
    No longer Editor of the Community Crier.

    Don't mind me, I'm having a BLONDE moment!

  7. #7
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally I've never used CSS and DIVs as a replacement for tables. And with the page I'm working on now I think it'd be warranted. Where's a tutorial that'd teach me how to do it or a good example? I don't want to use absolute positioning for the DIVs, I want everything to be relative.

    Currently I have a complex table layout (without any spacers) for my page. I would like to replace it with CSS and have every cell become a DIV that 'floats' against the one to its left. However I have no idea how to do this. Any examples?

    In Dreamweaver the 'turn tables to DIVs' function seems to turn everything to an absolutly positioned DIV for me.

  8. #8
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Tulsa, OK
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm....

    I know that everything will be done with CSS in the near future, so on that basis I guess I will need to learn it.

    Maybe if I still coded my HTML by hand I could see things more clearly.

    Since using Dreamweaver, I feel I have it pretty easy already.

    If I want to change every page on a site, all I do is open the Dreamweaver template, make the changes, and presto, every other page is automatically updated. Then I just FTP them to my server. Five minutes MAX.

    Or, if I am using header and footer files, I just change the header and footer files and upload them, again, five minutes MAX.

    It just seems that I would be increasing the amount of planning and work that goes into a site because I would need to manage yet another page of code and come up with ways to use it.

    Having never used CSS, I probably have a lack of perspective. I'm sure with so many advocates it must be more than what I've seen explained by various websites and articles, or I'd see where I need it.

    Thanks all, but call me short sighted.

  9. #9
    ComDude CryingWolf's Avatar
    Join Date
    Dec 2000
    Location
    I don't know the cat drug it in!!!
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah CSS is in the future and in alot of cases it is now. The problem is that not all the browsers, read older ones here, support css and of the browsers that do they don't support all of the tages or codes. This can make it a little fustrating.

    As for learning CSS it doesn't have to be much harder then learning html in the first place. Plus there are a few programs to help ya out there when you need to code that css sheet.

    I had to agree with ya a few years ago when CSS first appeared, I kept thinking that's cool but what is it good for. Now I think "thank God I can get rid of all these damn font tags"

    And creole is right in that tables where never really designed to do layout, some nut figured out that you could use tables as a hack to do layout. Really CSS will be the only way to do layout in the near future. And tables will become what they are ment to be.

    Late
    body { background:#000000; color:#000000 }
    HEY, WHO TURNED OUT THE LIGHTS?!?
    Easy come easy go!!!
    CryingWolf

  10. #10
    Bimbo With A Brain! silver trophy Saz's Avatar
    Join Date
    Mar 2001
    Location
    Kent, United Kingdom
    Posts
    5,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah....layout with CSS is the next thing I have to learn. There just aren't enough hours in a day to do all that I need to, what with kids, husband, house etc etc! Arrggghhhh! I need to shut myself away somewhere with just a computer, a phone line and my books for company. Might get on a bit quicker then!
    Saz: Naturally Blonde, Naturally Dizzy!
    No longer Editor of the Community Crier.

    Don't mind me, I'm having a BLONDE moment!

  11. #11
    SitePoint Addict superbird's Avatar
    Join Date
    Aug 2000
    Location
    Swansea, UK
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heavy - I can totally see your point if you're using Dreamweaver. But bear in mind that for most of us (I would guess), if we suddenly decide "hey, my text would look better in Verdana" for example, without CSS we would have to change god knows how many font tags in each page. If we use a linked stylesheet however, we only have to change it once.
    ...KartLink...

  12. #12
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use Dreamwevaer, and I've never found the feature that you describe, heavy, very useful. I don't duplicate any code on my pages - everything is assembled on the fly from idsparate pages/databases through PHP scripts. CSS is *still* useful even then.

  13. #13
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Tulsa, OK
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all for your input.

    I'm reading quite a bit about CSS and see a few ways it may be handy. I'm sure as I learn more I'll see even more benefits.
    Come get 5,000 Full Color - High Gloss(front and back) business cards for only $270!
    www.diamondqueue.com

  14. #14
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well the new site I'm working on is completely CSS-abled, except tables are still used for layout (so sue me). For non-CSS browsers, the site has a Yahoo! effect, which is pretty cool too.

    Anyway, getting to my point, when I started the client did not have a logo yet. Now that we've seen the logo we had to change the temporary colour scheme completely, and that was easily done because I used CSS, I think it took only 3-4 hours. If CSS was not used I would probably have needed days.

  15. #15
    SitePoint Enthusiast
    Join Date
    May 2001
    Location
    Los Angeles, California
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by duckie
    Well the new site I'm working on is completely CSS-abled, except tables are still used for layout (so sue me). For non-CSS browsers, the site has a Yahoo! effect, which is pretty cool too.

    Im kinda new to CSS, what should you use instead of tables?
    www.iyeinteractive.com - Website Design and Programming
    www.totalnonsense.net - my site, Under Construction

  16. #16
    SitePoint Zealot Wilmot's Avatar
    Join Date
    Feb 2000
    Location
    Brisbane, Queensland, Australia
    Posts
    187
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A quick point on one of the most basic uses of CSS, setting the style, size, colour etc. of text.

    It seems no one has mentioned this so far, but the FONT tag, and other simmilar text altering tags, which you are most likely currently using for the above purposes have been deprecated in HTML 4. This means they are no longer part of HTML and the W3C wants us to stop using them.

    CSS can be used to do everything these old tags could do. You can make it as easy or hard for yourself as you like. If you want to take full advantage of the power of CSS, use External style sheets to specify the style of all your text in one file for all your pages. If you can't get away from the old way where you used the FONT tag wherever you wanted a change, use Local style sheets. But remember, you can use all three types of CSS External, Internal and Local together. Internal overriding External and Local overriding both (Another powerful feature of CSS).

    While it is unlikely browser vendors will stop supporting the FONT and simmilar tags, they have been deprecated from HTML 4 for a reason. Plus, you are severly limiting youself by sticking to the old ways.
    Brad Culbert
    SQL Server 2005 Books
    www.SQLServer2005Books.com - Reader-rated SQL Server 2005 Books

  17. #17
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wmk86 you can use the positioning rules introduced in CSS2.

    This link is pretty helpful:

    http://www.alistapart.com/stories/journey/

  18. #18
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm making a new site and I've decided to use Microsoft's DirectX transforms that are accessed via stylesheets. Not because they add anything to the layout (they don't) but simply because they look cool, technical and advanced.

    I used two types of gradients (one as a wipe, works in IE5.5+):
    http://rideau.prowsej.com/RHS/main/index.php?page=200
    Last edited by prowsej; Jun 15, 2001 at 13:51.

  19. #19
    SitePoint Enthusiast
    Join Date
    May 2001
    Location
    Los Angeles, California
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    duckie - thanks for the link , /me waves to you

    prowsej - I tried going to your site and all i get is error pages, not found, or is that what your trying to show us, the error pages?
    www.iyeinteractive.com - Website Design and Programming
    www.totalnonsense.net - my site, Under Construction

  20. #20
    SitePoint Member imalliques's Avatar
    Join Date
    Jun 2000
    Location
    Belgrade, Yugoslavia
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    maybe you already heard this but ...

    hi wmk86!
    you may be already heard this but i'll take this risk...
    css allows you freedom in webdesign and webdeveloping. you can position elements the way you want, hide them or display them as you wish and play around them the way you like. of course, it's just the top of the iceberg. the main advantage of css is that now you can easily made platform/browser and resolution independent site(s). for a past two months i intensive use css just because of things i mentioned above. great resorces are: a list apart (you heard about it before, don't you), also, here at wdvl.com and many others (webmonkey, glisho /or glicho, i can't remeber/, ...). the test page of my site are avaliable here .

    HTH
    Let the Source be with You!

  21. #21
    SitePoint Enthusiast
    Join Date
    Jun 2001
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now, CSS isn't the only way you can make design independent from content. A more backwards-compliant way to do it is in PHP(I bet you can do it in ASP too, as well as most any language). You do something like this..

    <font face="<?php echo $fontface1 ?>" color="<?php echo $fontcolor1 ?>">
    TEXT WALALA
    </font>



    Define the $fontface1, $fontcolor1 in a header php file(assuming you're using PHP for templates...why wouldn't you? ) which is included in all of your pages. Granted, the filesize is enlarged, but this enables two things:

    1. Your page will work properly in any browser.
    2. The ability to change these universal attributes through HTTP(without use of a Web-FTP script). For example, you can change the variables through a form. Not so with CSS.

    And of course, this isn't a replacement for CSS. As much as I wish you could, it's impossible to make links change colors when you hover over them with PHP, or add style to buttons and forms with PHP, or any other things you can do in CSS but not HTML.

  22. #22
    SitePoint Addict
    Join Date
    Jan 2001
    Location
    Ottawa ON
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by wmk86
    prowsej - I tried going to your site and all i get is error pages, not found, or is that what your trying to show us, the error pages?
    I had incorrectly written the URL, it's updated now:
    http://rideau.prowsej.com/RHS/main

    Any comments on the page are welcome.
    Last edited by prowsej; Jun 18, 2001 at 05:14.

  23. #23
    SitePoint Enthusiast Fitch's Avatar
    Join Date
    May 2001
    Location
    Portland, Oregon
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What about bloat?

    One thing that needs to be addressed is the ridiculous overhead all those FONT tags add to your file size.

    I have shrunk pages from 30k+ down to under 10k by replacing the font tags with a style sheet.

    Mr. Heavy, I like Dreamweaver too, and the templates are great. But that's a whole other issue. DW makes it super easy to link to an external style sheet, and it makes editing the style sheets a piece of cake too. No need to learn the CSS syntax, DW does it for you.

    Personally, I've had too many browser headaches with layers and DHTML. I still hide behind my tables. But the CSS font stuff causes no problems and it's SO much better, and it's pretty easy, just try it!
    Gratuitous sig URLs:
    Fitch&Fitch
    StarlightSite

  24. #24
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,123
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The only issue with dropping fonts and stuff is that "older" browsers (how many people use these older browsers we're so worried about?) won't see what you want them to see. However, by the same token they won't throw up errors (as in the case of non-standard js) so the question really is: do your users use css-ready browsers? If not, what do they see?

    HTML: structuring elements
    CSS: Style/layout
    XML: Data structure/flow
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  25. #25
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm..Good Question. Since others have already answered..
    First off, head over to www.w3.org and take a look at the 'future'.

    Now, using CSS, you cut down on tons of redundent coding.
    For example, you have a heading text on all of your pages. They share a common style, which could be bold, black in colour, font size...font family...etc.

    You set a style in your style sheet.
    like..

    span.heading { font-weight : bold; font : 12px Verdana, Arial, sans-serif; color : #000000; }

    done.
    now, specify it in your page.
    <span class="heading">Heading Text</span>

    Imagine doing this..

    <font face="Verdana, Arial, sans-serif" size="2" color="#000000"><b>Heading Text</b></font>
    to all of your pages.
    what if you have to modify one element. say....changing colour to white, cause your backgorund's going black.

    now..you have to open eveyr file and make the modifications. with css, just open the style sheet, change color : #FFFFFF and you're done! look at all the bytes you save too.

    css is the answer to header and footers of templates. =)


    the above example is just the more fundamental usage of css.
    how about page layout? if you look at css2 and css3, it also accounts towards accessibility.

    if you're worried about compatibility and its role, start with using font styles and colours.

    implement it on your site and as time goes, you'll realise how useful it is.
    Last edited by lynlimz; Jun 18, 2001 at 07:45.
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein


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
  •