Easier txt formatting with CSS
Results 1 to 3 of 3

Thread: Easier txt formatting with CSS

  1. #1
    Flash M0nkey
    Join Date
    Sep 2001
    Posts
    3,447

    Post Easier txt formatting with CSS

    Ok after looking at some of the pages on OSWD I noticed that some of them used CSS (cascading style sheets) so I decided to have a wee look into them and see if they can make writing html easier!
    Now I have read a bit on how to use them I thought I'd spread the knowledge a lil in the hope that'll it'll help someone else on AO out a lil....
    here goes...

    What is CSS?

    CSS or cascading style sheets are a way of setting the different properties of a webpage alot easier than typing it up everytime!!
    It means that instead of having to write <font size="2" color="#ffffff" align="left"><u> all the time you could just write <u style="main">

    But in order for that to work you have to define your style sheet

    defining style sheets

    You have to define your CSS between the <head> tags of your html document and it would look like this

    <head>
    <STYLE type="text/css">
    <!--
    .main { color: #ffffff; font-size: 2; text-align; left }
    -->

    </STYLE>

    the makes the txt invisible so your browser doesn't try and display it
    now .main is you class name and the bits between the { brackets is the formatting
    note that you don't have to leave the spaces - i do as i feel it makes it easier read but you do have to put a semi-colon between each!!

    what tags can i define?

    H1 through H6
    P
    BODY
    A:link (That denotes the unvisited link)
    A:visited (That denotes the visited link)
    DIV (That denotes a division of the page)

    and as you saw above you can also alter text by placing the style= after any thing that alters text like <u> or [b]

    Using more than one class

    You can apply many different classes to a single thing but just make sure to use different code words

    Asiging different classes to the same tag

    You can assign multiple classes to the same tag such as

    H3.fst {font-size: 20pt; color: #FF00FF}
    H3.scd {font-size: 20pt; color: #FF00FF}

    just by placing a different keyword after a fullstop

    Using 1 style sheet for multiple pages

    You can also set up one style sheet and have your pages link to it to recieve the formatting information

    <LINK REL=stylesheet HREF="http://www.your.page/yourstylesheet.css" TYPE="text/css">

    the above command calls the style sheet

    In order to set up a style sheet just open a new .txt doc now type up your style sheet - this will be the only thing in the txt doc - no <head> tags this time!
    Save it and change its extension from .txt to .css

    Then upload it to the location specified in <LINK REL

    Sources

    Ok thats about all I learnt so far tonight - when I get to use them a bit more myself I might do a more detailed tutorial on them

    heres where i got my info ->


    enjoy

    v_Ln

  2. #2
    Banned
    Join Date
    Sep 2002
    Posts
    19

    Wink

    awesome i was just asked about this by one of the people i work with .. now i can give them some insight and point them toward your post .. thanx

  3. #3
    Senior Member
    Join Date
    Jan 2002
    Posts
    657
    Very nice post val not that i am surprised at all your post always seem to be worth reading keep up the good job =)

    --NetSyN
    [shadow]i have a herd of 1337 sheep[/shadow]
    Worth should be judged on quality... Not apperance... Anyone can sell you **** inside a pretty box.. The only real gift then is the box..

Posting Permissions

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