Change background image
  1. What's up? I see you're viewing as a Guest. How about registering, it only takes like 2 minutes. This will enable you to do more on our forum and stay updated.

The basics of using css

Discussion in 'PC General' started by Nuke547, Jul 5, 2011.

Thread Status:
This thread is more than 180 days old.
  1. Nuke547

    Nuke547 Junior Member Member

    The first thing you want to know about css, is that its always/usually gonna go in another file, or in the file your using it in.

    It will go under the tag <style>.

    If you would like to use a css file for all of the pages in your website, you would make a new file (We'll call it main) and name it main.css. Then, right after your html tag, you would type the following:

    Code:
    <link href="./main.css" rel="stylesheet" type="text/javascript" >
    This links your main.css file to your current html file.

    When you want a specific part from your css to take effect, you would type the following:

    Code:
    <div id="example">
    Once that is done, under your css file, you would type:

    Code:
    #example{
    
    }
    
    That is for id's, but when you want to use classes, you would do the same thing, but in the div, change it to this:

    Code:
    <div class="example">
    Then, under your css file, you would type:

    Code:
    .example
    When using classes, you would put a period instead of a pound sign.

    Here are some of the basics of coding in css:

    Code:
    background-color: green; //The background color
    height: 50px; //The height of the section
    background-image: image.png; //The background image
    background-position: center; //Positions the background image
    min-height: 150px; //That is the least amount of height it will go, but if you need more room in it, it will expand by default
    text-decoration: underlined; //Used for underlining, bold, and more
    
    Then for link designing, you would do this:

    Code:
    A:link{
    }
    A:visited{
    }
    A:active{
    }
    A:hover{
    }
    
    And lastly, for the body, it would be like this:
    Code:
    body
    {
    
    }
    
    Here is an example:

    [​IMG]

    If I had any errors, please send me a PM or comment.

    Thanks, and hope you learned something!
  2. Jok3r

    Jok3r MC-Admin/Summoner Member

    I already know css quite well so Im going to be honest I just skimmed through this but looks nice anyone who wants to just start there css off this is a great place to start, Nice Job Nuke! :thumbsup:[​IMG]
  3. Sh0tGuN2197

    Sh0tGuN2197 *Shotty* Super-Mod

    This is a good tutorial nuke. Nice and simple. I will have to look into this some more [xat]awe[/xat]
Thread Status:
This thread is more than 180 days old.

Share This Page