SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: What is CSS?

  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    VC
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What is CSS?

    Is it a new type of language because I know HTML, but this CSS looks completly different, and I am very lost.
    I have been away from the HTML web design scene for a few years, and I have no idea what this is.
    Can anyone explain what this is, and how do I use it.
    Do I organize it like tables, but with different code, and than use HTML inside the cells or something?
    THanks

  2. #2
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No you don't organize it like tables. Basically in a beginner sense CSS is a way to separate structure from presentational elements. CSS has much more power than HTML ever did or was even designed for. It can be used in conjunction with XHTML.

    Basically, CSS is defined by rules such as:
    Code:
    <style type="text/css">
    h3{font-family:Arial, sans-serif;
    }
    </style>
    Where the above is a embedded style within the <head></head> tags of your html document. The rule above says give all heading three's a font family of Arial, or if that doesn't work, give it a default sans-serif font. CSS rules are defined by this:

    property:value

    where in the above example font-family is the property and Arial is the value

    This is a very brief intro. Here are some useful links to get you started.

    Very good stuff
    http://projectseven.com/tutorials/index.htm

    My own creation below, not the best, but more of a practical approach, rather than a bunch of theory.
    http://midwestwebdesign.net/tutorials/css/index.html

    good intro stuff
    http://www.w3schools.com/css/default.asp

    the man mostly in charge here, he's good.
    http://www.pmob.co.uk/faqcss/index.htm
    Ryan Butler

    Midwest Web Design

  4. #4
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, I didn't see ryans post before I posted. Well you can have a read if you fancy it.

    It's not new (1996 I think) but support for it has been so atrocious in the past that people are only really starting to use it for layout in the last couple of years.

    The fundamental idea is that of separating the style from the content. You'll probably know how important this can be if you've ever done a site-redesign. It's a real pain copying and pasting all the content out of your old pages and into new templates. First you have to copy it, then you have to set the font again and make things bold/italic if they were bold/italic and colour the text if that was done before (except usually with new colours). It's like pulling teeth and a complete waste of company / personal time.

    So, w3c, in their infinite wisdom, decided enough was enough. All this inline (embedded in the document) styling would make websites hard to manage and impossible to use effectively in other types of media like PDA's, phones, screen readers, web tv etc.

    So they came up with the idea of xhtml and css. (Don't be put off by the X. Xhtml is nearly the same as vanilla html with a few key differences like: if you open a tag, then you HAVE to close it. There's loads of tuts on this on sitepoint and on the web so just have a rummage.) In xhtml, your aim is to write the page in a styleless but in a self describing / semantic way.

    So, say you're designing a site, instead of making a three column table with the central one intended for content, you'll do something like this:
    HTML Code:
    <h1>Website Title</h1>
    <div id="mainNavigation">
       Link 1, 2 etc.
    </div>
    <div id="content">
       <h2>Article Title</h2>
       <p> Main article content</p></div>
    <div id="subnav">
       More links, ads what ever
    </div>
    If you look at an xhtml page without a css, it won't look pretty. You'll get something like your first ever web page. Very basic.

    You'll then put a link in the head linking to the style sheet. You'll define all the styling in here: background colours, fonts, layout. The whole shebang.

    To answer your questions:
    Don't use tables except for tabular data e.g. if you wanted to display a spreadsheet.
    Most layout is done using html div elements. These aren't new either but nobody had much use for them until css became popular. Divs are just like any other block level html element like <p>'s, except they're totally generic. Unlike <form> or <p> they have no intrinsic function. They're just wrappers for other elements. You can assign them ids like in the example above and these act as hooks for the css to latch on to.

    So, a simple style sheet with two rules would look something like this:
    (/*this is how you do comments*/)
    Code:
    body{ /* this is called the selector. It decides what you're applying the style to. In this case, the whole body of the document */
      background-color:white; /* this is a "property" with a value of white assigned to it. You can also use hex or rgb values*/
    } 
    
    #mainNavigation{ /*this is an id selector and applies this set of rules to the div, from the example above, with the id attribute set to "mainNavigation" */
    border: solid red 1px; /* a solid red border 1 pixel wide - easy */
    background:#fdd; /* #fdd is a hex short hand for a light pink, it's the same as #ffdddd */
    }
    This is a list of the css properties you'll use most. http://www.htmlhelp.com/reference/css/properties.html
    For the full list go to the w3c site
    http://www.w3.org/TR/REC-CSS2/propidx.html

  5. #5
    SitePoint Member
    Join Date
    Aug 2004
    Location
    VC
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So for DIVs can I assign them so that they are a locked width and height and so they dont change?
    Would I be able to tile 3 DIVs accross and make a 3 columned page?
    Can I also anchor/lock them into a specific place?

    So basicly all CSS does is assign attributes such as colours, sizes and what not.
    Thanks alot,

  6. #6
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by countervail
    So for DIVs can I assign them so that they are a locked width and height and so they dont change?
    Would I be able to tile 3 DIVs accross and make a 3 columned page?
    Can I also anchor/lock them into a specific place?
    You can lock the width and height down, but why would you want to do that? For accessibility reasons, what if the user has a smaller screen resolution or smaller text that what you designed for, ooops...out of luck I guess is what you're saying there.


    Quote Originally Posted by countervail
    Would I be able to tile 3 DIVs accross and make a 3 columned page?
    Check out Paul's example about a 3 columned page:
    http://www.pmob.co.uk/temp/3colfixedtest_4.htm

    As far as assigning div's, just understand that you only use them once, classes you may use multiple times, but don't overuse classes either, if you read my article, I believe I mention that.

    Quote Originally Posted by countervail
    So basicly all CSS does is assign attributes such as colours, sizes and what not.
    Not sure we should let you get away with that assumption or not? Yes it does, but it can do so much so, it can layout an entire page and you could then change it in a heartbeat if desired. I really suggest you read up on it and just start playing, ask questions here when you get stuck.
    Ryan Butler

    Midwest Web Design

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This article should give you some idea of what css is about

  8. #8
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't evangelism fun?


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
  •