Thread: [CSS] How to make a SIMPLE CSS file

Results 1 to 8 of 8
  1. #1 [CSS] How to make a SIMPLE CSS file 
    newservermaker
    Guest
    Purpose: to make a VERY SIMPLE CSS file.

    What are CSS files?
    CSS stands for Cascading Style Sheets

    Requirments:
    - I recommend that you know a little/lot of HTML(depending on what you want the CSS to do).
    - You will need a site to upload it to, you can use http://www.zymic.com (its pretty good, in my opinion) or you can talk to me and i can give you a sub domain from my site, http://www.dudescapeinc.info.
    - You will need a Plain Text Editor(notepad, textedit, Notepad++,exc.)
    - You need to know how to save files as .css files

    Step 1.
    Hmmmmm... What to make the stylesheet do... Lets make it align all headings to Left, Right, or Center, Make the background a certain color, and how about changing the font of Headings?

    Step 2.
    Lets open up our Plain Text editor (i prefer Notepad++ because its simple,easy to use, and has Tabs) and give the file a name, in this tut i will be calling it stylesheet1.

    Step 3.
    Lets start off with the headings stuff? Start off by entering
    Code:
    h1,h2,h3,h4,h5,h6
    remove what you don't want out it (this makes all <h1>,<h2>,<h3>,<h4>,<h5>,<h6> codes do the next couple of things that we will add)

    Step 4.
    Now lets keep the css file organized so we can see what were doing untill were done? Press ENTER and add a simple curly bracket
    Code:
    {
    and then press enter agein.

    Step 5.
    Now lets align the headings into a area of the page (left, center, right)
    In the 3rd line, add in
    Code:
    text-align: center;
    and just change the
    Code:
    center;
    to what you want it to be(left center or right)

    Step 6.
    Now that we got that done, we can finish it there or go on to change more . If we want to finish it there and make it just this simple, add a
    Code:
    }
    to the end of it. But im going to go on to change back ground colors, Heading Colors, and Heading Font. To change the color of the heading, press enter after
    Code:
    center;
    and add in
    Code:
    color: green;
    you can use lots of different colors, including ALL hex numbers.

    Step 7.
    Now lets change the font of the Headings, again press ENTER and get ready to add in more. Lets make the font Sans Serif shall we? Now on line 5 add in
    Code:
    font-family: sans serif
    you can change sans serif to any font you can think of. Now Lets just finish up this Headings Part of the CSS and add in a
    Code:
    }
    on line 6 and Lets go on to the next part!

    Step 8.
    For the background lets add in
    Code:
    body
    on line 7 and hit ENTER once again. Now on line 8 lets addd in
    Code:
    {
    and hit ENTER agein...

    Step 9.
    Lets only add in the background color for this page, i will be using PERU for this example, its a shade of brown if you did not know. for adding in the background color, we use this code
    Code:
    background-color: peru;
    change the color to any other color or hex number for the color you would like. Now to finish off this simple CSS file, lets add in the last part of it on line 10
    Code:
    }
    and then save the file.

    Step 10.
    Upload to a site and add this into a HTML file to see what you did:

    [HTML]<html>
    <head>
    <body>
    <title>Style Sheet Test</title>
    <link href="http://LINKNAMEHERE.css" rel="stylesheet" type="text/css" media="all">
    </head>
    <body>
    <h1>Hello</h1>
    <h2>Hello2</h2>
    <h3>Hello3</h3>
    <h4>Hello4</h4>
    <h5>Hello5</h5>
    <h6>Hello6</h6>
    </body>
    </html>[/HTML]


    I hope this guide helped!
     

  2. #2  
    I'm unique


    Join Date
    Oct 2006
    Age
    32
    Posts
    708
    Thanks given
    0
    Thanks received
    1
    Rep Power
    82
    Good explained, thanks
    Sincerly yours,
    Simox.
     

  3. #3  
    Community Veteran

    Llama's Avatar
    Join Date
    Oct 2006
    Age
    33
    Posts
    510
    Thanks given
    0
    Thanks received
    0
    Rep Power
    106
    Nice Tutorial could be very helpful to noobs. If someone is going to be using/coding CSS then i suggest downloading Dreamweaver because it makes CSS much easier you don't have to memorize virtually anything.
     

  4. #4  
    Community Veteran
    $anta's Avatar
    Join Date
    Jul 2006
    Age
    31
    Posts
    676
    Thanks given
    0
    Thanks received
    0
    Rep Power
    70
    Fix the demo, sir.
    Member #23
    Lost my website, probably gonna try to get it back but ehhh

     

  5. #5  
    newservermaker
    Guest
    sorry not fixing, old site i had, and i dont feal like recreating the html doc i had
     

  6. #6  
    Teh l337
    Jdiddy's Avatar
    Join Date
    Nov 2007
    Age
    31
    Posts
    2,026
    Thanks given
    262
    Thanks received
    56
    Rep Power
    3567
    I like it, very helpful even though I get most of CSS.



     

  7. #7  
    Community Veteran
    $anta's Avatar
    Join Date
    Jul 2006
    Age
    31
    Posts
    676
    Thanks given
    0
    Thanks received
    0
    Rep Power
    70
    Can you remove the link, then?
    Member #23
    Lost my website, probably gonna try to get it back but ehhh

     

  8. #8  
    Registered Member
    Join Date
    Nov 2006
    Posts
    699
    Thanks given
    1
    Thanks received
    32
    Rep Power
    524
    Quote Originally Posted by Llama View Post
    Nice Tutorial could be very helpful to noobs. If someone is going to be using/coding CSS then i suggest downloading Dreamweaver because it makes CSS much easier you don't have to memorize virtually anything.
    You probably used this tutorial and screamed "**** YES" because you could do CSS finally. :woot:

    ~Z
     


Thread Information
Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)


User Tag List

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