Welcome
Arachne's Web
A group focused on serving the AW community by providing help and discussion on topics such as HTML, CSS, web design, homesite decorating, netiquette and issues important to web artists.

Code Information Center (2 threads, 986 posts)
    Arachne's General Test Site (262 posts)
    Social Thread

    For testing out all new codes, or trying your own! ...
    26 Members have made 105 Posts here to date.
    Google
    AncientWorlds.net Web
    Next: testing orient welcome messages
    Prev: just testing.
    for Mirjam
    Feb06Avatar.gif
    Author: * Laurels Curius - 34 Posts on this thread out of 2,713 Posts sitewide.
    Date: Oct 19, 2007 - 17:25

    Nothing too fancy, just a quick guide to CSS classes and implementing them for a friend.


      .imaclass {font-family: 'and I am an attribute',arial,sans-serif; }

    Now as you can see the .imaclass is the class part of the code. That gets put inside your <style> tags preferably at the beginning of the page. I always put a period {.} before my classes. There is also the option of putting a # before them instead but I don't use that method and frankly I'm not sure if that means something special. I do know that no period or number sign in front of a class should only be used for HTML tags. For instance:

      hr {border: none 0; border-top: 1px solid #704B95; height: 1px; }

    That alters how your line breaks appear. Then when I place an hr in the page, it looks like this:


    So, why use CSS classes? Well for example maybe you want to change the font in one area, but not everywhere. Well you can do that using a css class, and then you can change that as much as you want without mucking up all the fonts in the whole page. When you assign something it's own class, you can name it whatever you want. Swear words, your teddy bear's name, whatever you named your spouse's private parts. Doesn't really matter. I always name mine something ridiculous so I know it's all me . I hate when I confuse MY css classes I assigned my text or images with the ones Jot named for the whole of AW. Name it something personal so you don't get confused either.

      my weee space

    Why did I do that? Well that happens to be that space's assigned css class name. Weee. I created it, then placed it inside my <style type="text/css"> </style> tags.

      .weee

    Then I told it how I wanted anything I placed in the page using that class to appear.

      .weee {background-color: #1f1f1f; color: #e1dcc8; border: 1px dashed #949494; width: 80%; padding: 10px}

    Notice in the attributes area how I placed a ; or semi-colon after each complete attribute except the last one where it doesn't require it (though doesn't hurt it either should you leave an extra one in there). The code will not work without those semi-colons. Make certain to enclose it all in { brackets }.

    Now, since my css is complete with a class and all the attributes I wanted for my block of text, I need to use it. You have a choice of how to use it. You can call on your new class by placing it inside a <div> css division </div>, inside a <table> HTML table tag </table> or if it's a small amount of text/objects you want to change maybe just a simple <p> HTML/XHTML paragraph </p>.

    To add it in, call upon that class but leave out the period {.}. For example:

    <div class="weee">my special wee</div>

    Gives me:

      my special weee

    So basically just stick it inside whatever tag you are using.

    For friend, just add this in after current stylesheet, it's a darker brown:

      <style type="text/css">
      #Content, .pageStyleSheet, .community {color: #2A211D !important}
      .community a:link {color: #2B543A; }
      .community a:visited {color: #407D56; }
      </style>


    NEXT: testing orient welcome messages
    PREV: just testing.
Rome - Rome, Season 1 - The Stolen Eagle


Copyright 2002-2008 AncientWorlds LLC | Code of Conduct and Terms of Service | Contact Us! | The AncientWorlds Staff