1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

auto CSS generator?

Discussion in 'White Hat SEO' started by BlackSeng, Sep 15, 2009.

  1. BlackSeng

    BlackSeng Jr. VIP Jr. VIP

    Joined:
    Mar 5, 2009
    Messages:
    1,963
    Likes Received:
    3,519
    Occupation:
       
    Location:
    SG50
    I have read some SEO tips saying that we should always seperate javascript codes and layout design to CSS files externally.

    The problemis... my html files are so heavily coded that I'm quite confuse on seperating it to CSS.

    is there an auto css generator or something?
     
  2. eskimo

    eskimo Regular Member

    Joined:
    Dec 1, 2008
    Messages:
    474
    Likes Received:
    178
    You mean something that will automatically remove the CSS to a separate file? I don't think so?

    It's really worth keeping all you CSS information in a dedicated CSS file. Your SEO will improve dramatically. Same as JS. If you want help PM me
     
  3. phpfiend

    phpfiend Junior Member

    Joined:
    Apr 12, 2009
    Messages:
    172
    Likes Received:
    102
    Occupation:
    Web Dev and IM
    Home Page:
    There is no generator as eskimo stated but css and js in their own files will be quite easy to deal with once you get the hang of it. Just drop the functions of ur js into am external file.
    then use something like:

    Code:
    <script type="text/javascript" src="whatever.js"></script>
    Then call your js functions just as you would.

    For css what I usually do is either look at a wire frame or have a mental picture of how I want the site laid out in css. I create a div statement with id=container in it to set up a border around the content as well as div statement with id=header and another one with id=footer

    This way I have established where I want to place my content in general as well as header footer and maybe even a body div statement. Drop your content in there and then start editing the external file with appropriate references to a css class if you want to use something more than once. Now that you have content in place and formatted generally how you want it turn your attention to the external css file. I usually have tabs open for each file so i can quickly reference what is what...

    So in the end you may end up with something like this for the html file:

    Code:
    <html>
    <head>
    <title>keyword phrase here</title>
    <meta name=description content="optimized sentences here.">
    <meta name=keywords content="keywords, go, here">
    <link rel=text/stylesheet href=my.css>
    <script type=text/javascript src=my.js>
    </head>
    <body>
    <div id=container>
          <div id=header>Header goes here</div>
                <div id=main><p class=imgleft><img src=me.jpg height=100 width=159>Main content goes here.</p>
                 </div>
            <div id=footer>copyright info here</div>
    </div>
    </body>
    </html>
    
    Your css may be something like
    Code:
    <style type=text/stylesheet>
    #container {position: absolute; top: 15px;}
    #header {position: absolute;}
    .main {text-align:center:}
    p img{float:left;}
    #footer {position:fixed: bottom: 35px:}
    </style>
    Hope this helps and sorry for the long post everyone. P.s. I am sure there are errors in this but did this just off the top of my head so no need to flame for errors or whatevers wrong in the code. Thanks.
     
    • Thanks Thanks x 2
  4. BozoClown

    BozoClown Junior Member

    Joined:
    Jan 4, 2009
    Messages:
    150
    Likes Received:
    106
    Separating the css from the html files will make it quite clean that you will stop thinking of the html as heavily coded.
     
  5. BlackSeng

    BlackSeng Jr. VIP Jr. VIP

    Joined:
    Mar 5, 2009
    Messages:
    1,963
    Likes Received:
    3,519
    Occupation:
       
    Location:
    SG50
    Yikes... I've went through the CSS tutorials...
    if I'm gonna re-do my sales-page to implement CSS.. it's gonna be tedious!

    So I think it's ok~

    Lesson learnt.