Results 1 to 3 of 3

Thread: Style Classes

  1. #1
    Junior Member
    Join Date
    Aug 2002
    Posts
    4

    Post Style Classes

    My first tutorial, please tell me if I screw anything up, and of course feel free to add your own hints and tips.

    Basically what you do when you use a class is tell the browser "OK, I want to have this thing, look like this."
    The real versatility in the classes is not the supreme custimization you have, that is inherent in style sheets already. Instead it's that you can the same elemnts, say BOLD, but each indivigual one, or groups of them, each have specific rules for them.

    Classes are used in the following manner to appy to text:

    <span class="CLASSNAME">{TEXT}</span>
    <div class="CLASSNAME">{TEXT}</div>

    Class are used in the same way to apply to other elements:

    <table class="CLASSNAME">
    <td class="CLASSNAME">
    <b class="CLASSNAME">{TEXT}[/b]

    Every single tag can have the class attribute.

    Classes are defined in the style sheet. Let us view this embedded style sheet:

    <html>
    <head>
    <title>{TITLE}</title>
    <STYLE TYPE="text/css" MEDIA=screen>
    <!--
    .CLASSNAME { ATTRIBUTES }
    -->
    </STYLE>
    </head>
    <body>
    {BODY}
    </body>
    </html>

    Where you see attributes, you would place the attributes of that specific class. For further example showing those attributes:

    <html>
    <head>
    <title>{TITLE}</title>
    <STYLE TYPE="text/css" MEDIA=screen>
    <!--
    .CLASSNAME { background: url(foo.gif) red; color: black }
    -->
    </STYLE>
    </head>
    <body>
    {BODY}
    </body>
    </html>

    These attributes would set the background to the color red, and in front of the red would be the image foo.gif, which may or may not be partially transparent (because it's a .gif). The color of any text would be black.
    Please note that all the different attributes have a semicolon ( between them, except for the last one

    Above I said "Every single tag can have the class attribute." I did not lie, any tag can have class="CLASSNAME" in it. However, not every class (the class being a specific CLASSNAME) can be applied to every single tag.
    For instance you could apply a class that makes font red to say, an image. It wouldn't be improper HTML syntax, but it wouldn't do anything. Additionally, there areother certain restrictions, that you yourself can impose. Let's look at the following example:

    <html>
    <head>
    <title>{TITLE}</title>
    <STYLE TYPE="text/css" MEDIA=screen>
    <!--
    P.CLASSNAME { background: url(foo.gif) red; color: black; border-color: #333333 }
    -->
    </STYLE>
    </head>
    <body>
    {BODY}
    </body>
    </html>


    This gives us a look look at CLASSNAME. The previous CLASSNAME's were declared with a single period in front. This has a P and a single period. The P is the

    tag. Any tag may be used following the same manner: BR for
    , TABLE for <table>, and so on.
    What putting the P in front does is say that CLASSNAME can only be used for the

    element. Putting <table class="CLASSNAME"> may be valid syntax, but would be incorrent usage.

    Now the older brother to class is id. It's used the same way as class with a few Syntax exceptions. The following example should outline those exceptions:

    <html>
    <head>
    <title>{TITLE}</title>
    <STYLE TYPE="text/css" MEDIA=screen>
    <!--
    .CLASSNAME { background: url(foo.gif) red; color: black; border-color: #333333 }
    #IDNAME { background: url(foo.gif) red; color: black; border-color: #333333 }
    -->
    </STYLE>
    </head>
    <body>

    <span class="CLASSNAME">{TEXT}</span>
    <span id=IDNAME>{TEXT}</span>

    </body>
    </html>

    Note the diefferent declaration, as well as the differnt using of the attribute.

    If any of this was unclear to you, feel free to ask questions, that's what is here for after all!

  2. #2
    Senior Member
    Join Date
    Aug 2002
    Posts
    310
    I've only done one tut,but just from going through other tuts on the site,I'll give you a few tips.
    If you want to make things look a little more organized and flashy use a word processing program and make it a download.The list of acceptable files is next to the attach file thingy when your adding your thread.The down side to this,is it can limit who can download it,so you might want to post the whole thing on the thread as well.

    Use spell check.I've seen much worse spelling,but there were a few mistakes.Hey nobodeez purfekt.

    Go into as much detail as possible.I'm not saying write a book(although if you feel the need more power to you).I'm not saying your tutorial wasn't informative by any means,but if I had absolutely no clue of what a style class was I probably would have gotten confused by your tut.

    Overall it was a good first tutorial.I hope I didn't come across too critical.You said you wanted tips so I gave them.Most people wouldn't even think of posting a tutorial after only 4 posts,so you actually did an exceptional job.Keep up the good work,I look forward to more tuts in the future.
    [shadow]I don\'t believe in anarchy.If you\'re not smart enough to beat the system it\'s your problem. [/shadow]


  3. #3
    Senior Member
    Join Date
    Jul 2002
    Posts
    339

    Re: Style Classes

    Originally posted here by Night4554
    My first tutorial, please tell me if I screw anything up, and of course feel free to add your own hints and tips.
    You asked for it, so here it is. First of all, always make sure that nobody has written post (including tutorial) similar to yours. A quick search gave me these:
    CSS Tutorial
    Easier txt formatting with CSS

    As for the format, you can follow gghornet's suggestion. Or, you can follow the Tutorial Writers Tutorial written by souleman not so long ago. But I think not so many people would read the tut if you only attached it and not posting the whole thing (notice the "downloaded x times" counter and compare it to the number of views). Are we too lazy to download or what?

    Originally posted here by gghornet
    Overall it was a good first tutorial.I hope I didn't come across too critical.You said you wanted tips so I gave them.Most people wouldn't even think of posting a tutorial after only 4 posts,so you actually did an exceptional job.Keep up the good work,I look forward to more tuts in the future.
    I think it's good as a first tut. Anyway, I posted my first tut in my 5th post. It was an incredibly exciting experience!

    Peace always,
    <jdenny>
    Always listen to experts. They\'ll tell you what can\'t be done and why. Then go and do it. -- Robert Heinlein
    I\'m basically a very lazy person who likes to get credit for things other people actually do. -- Linus Torvalds


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •