External sheets

Discussion in 'CSS' started by webguy84, Dec 28, 2006.

  1. #1
    Hi guys,
    I need a good tutorial to learn how to use external sheets and how to link to them from the HTML page. Any good link? Thx :)
     
    webguy84, Dec 28, 2006 IP
  2. webguy84

    webguy84 Well-Known Member

    Messages:
    815
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    128
    #2
    Can anyone help me please? thx
     
    webguy84, Dec 28, 2006 IP
  3. mad4

    mad4 Peon

    Messages:
    6,986
    Likes Received:
    493
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Link to them using:
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    Code (markup):
    The best way to learn is to just open up the CSS file of a site and look at it.
     
    mad4, Dec 28, 2006 IP
  4. webguy84

    webguy84 Well-Known Member

    Messages:
    815
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    128
    #4
    any thx :)
     
    webguy84, Dec 28, 2006 IP
  5. sn328721

    sn328721 Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    try this site

    ibdjohn.com
     
    sn328721, Dec 28, 2006 IP
  6. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #6
    All you really need is to take a text editor and save a file to .css, then link to it using the code provided above. Then, any styles you would have embedded, simply put them in the external file instead.
     
    Josh Inno, Dec 28, 2006 IP
  7. webguy84

    webguy84 Well-Known Member

    Messages:
    815
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    128
    #7
    I would like to ask a specific question. If I have an image and I want to align it at the center I may do it with tables, but how can it be done with div tags, using css?
     
    webguy84, Dec 28, 2006 IP
  8. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Is this a background image, or a regular one?
     
    Josh Inno, Dec 28, 2006 IP
  9. OWL_on_NG

    OWL_on_NG Active Member

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #9
    You can also use @import url(url) for external style sheets.
     
    OWL_on_NG, Dec 28, 2006 IP
  10. webguy84

    webguy84 Well-Known Member

    Messages:
    815
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    128
    #10
    a regular image
     
    webguy84, Dec 29, 2006 IP
  11. mad4

    mad4 Peon

    Messages:
    6,986
    Likes Received:
    493
    Best Answers:
    0
    Trophy Points:
    0
    #11
    align:center;
     
    mad4, Dec 29, 2006 IP
  12. webguy84

    webguy84 Well-Known Member

    Messages:
    815
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    128
    #12
    yes but how can I insert it within the style?

    aomething like the following?
    <style>
    .alignimage{
    align:center;
    }
    </style>

    ....


    <div class="alignimage" id="image">.......</div>
     
    webguy84, Dec 29, 2006 IP
  13. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #13
    You were talking about an external sheet.

    Save a blank file in notepad (or any other plaintext editor), and then insert the following into it:

    img.stylename
    {
    margin: auto;
    }

    and save it.

    Then just give your image the attribute class="stylename" .
     
    Josh Inno, Dec 29, 2006 IP
  14. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Well, for starters, <img> is an inline element, so it's going to be treatd as regular text.
    If the element's parent is the <body> tag, then you're going to have to wrap it in a DIV container, like so:
    
    <body>
    <div><img src="#" width="200" height="150" alt="Alternative Text"></div>
    </body>
    
    Code (markup):
    The DIV container will take up the full width of the browser window, since it's a block-level element, so you're going to want to declare this in your stylsheet:
    
    div {
        height: 150px;
        margin: 0 auto;
        padding: 0;
        width: 200px;
    }
    
    Code (markup):
     
    Dan Schulz, Dec 29, 2006 IP