1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS template?

Discussion in 'CSS' started by lolage, Jan 25, 2011.

  1. #1
    Is there a particular template you have when you start your CSS coding or not? For example do you have bits of code which straight away define fonts etc.

    Thanks, Ben.
     
    lolage, Jan 25, 2011 IP
  2. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I don't personally use templates simply because I much prefer handling everything myself. With that said, I do use Eric Meyer's CSS reset to make cross-browser designs a little easier.
     
    steelfrog, Jan 25, 2011 IP
  3. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You mean a CSS framework/boilerplate? There are lots of those around, but I think most people roll their own. This is what I use:

    index.html
    
    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
    <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
    <head profile="http://gmpg.org/xfn/11">
    	<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    	<link href='style.css' rel='stylesheet' type='text/css' media='screen' />  
    	<title>My Site</title>
    </head>
    <body>
    	<div id='container'>	  
    	  <div id='header'>
    	  <!--end header --></div>
    	    
    	  <div id='content'>
    	  <!--end content--></div>
    	    
    	  <div id='sidebar'>
    	  <!--end sidebar--></div>
    	   
    	  <div id='footer'>
    	  <!--end footer--></div>
    	<!--end container--></div>
    </body>
    </html>
    
    Code (markup):
    style.css
    
    @import url('reset.css');
    
    body {
    	text-align: center;
    }
    
    /* CONTAINER */
    
    #container {
    	text-align: left;
    }
    
    /* HEADER */
    
    #header { }
    
    /* CONTENT */
    
    #content { }
    
    /* SIDEBAR */
    
    #sidebar { }
    
    /* FOOTER */
    
    #footer { }
    
    Code (markup):
    And I use the CSS reset that steelfrog mentioned. It's great for making browsers behave :)
     
    Last edited: Jan 25, 2011
    Cash Nebula, Jan 25, 2011 IP
  4. ukescuba

    ukescuba Peon

    Messages:
    91
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    i do the something similar but with my own joomla template...
     
    ukescuba, Jan 25, 2011 IP
  5. lolage

    lolage Active Member

    Messages:
    1,129
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    78
    #5
    With what steelfrog mentioned do you just put that and leave it in there or do you add bits to it? Also things like whre it says body, do i put all my body stuff in there or do i create another body tag in css?
     
    lolage, Jan 25, 2011 IP
  6. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Nope! Just link to it. Call the reset stylesheet first, and then call your normal stylesheet.
     
    steelfrog, Jan 25, 2011 IP
    jeremyhowell likes this.
  7. lolage

    lolage Active Member

    Messages:
    1,129
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    78
    #7
    oh right I see so im able to have 2 style sheets.

    thanks :)
     
    lolage, Jan 25, 2011 IP
  8. CPAPubMichael

    CPAPubMichael Peon

    Messages:
    231
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    You can have as many as you want.
     
    CPAPubMichael, Jan 25, 2011 IP
  9. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #9
    It's best to use one style sheet as it is one less server request. I generally lazy load my css if I need more then one.

    Eric Meyer's is a great starting point but it is bloated. It has way overkill for tags and styles. If you use that to begin with make sure to remove tags you don't use on your site.
     
    AtSeaDesign, Jan 27, 2011 IP
  10. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #10
    There are also tools and ways to compress the CSS on the fly as well
     
    AtSeaDesign, Jan 27, 2011 IP
  11. byronc

    byronc Peon

    Messages:
    69
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I mainly do joomla websites and as such buy in templates that the client chooses as base, they are pretty cheap circa $60 and I modufy the css as needed
     
    byronc, Jan 27, 2011 IP
  12. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #12
    To be blunt, I've never run into the issue of bloating. If you're going to trim fat, there are much better places to do so than in something you may encounter later on. Unless your website is getting millions of hits, the difference is quite negligible. I see your point, though.
     
    steelfrog, Jan 27, 2011 IP
  13. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #13
    I trim fat everywhere I can. :)
     
    AtSeaDesign, Jan 27, 2011 IP
  14. kevbo22

    kevbo22 Active Member

    Messages:
    149
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #14
    I always start with a template and just re-style everything. It is much easier for me as I am new to css for layout. I would try these resources: opendesigns.org and freecsstemplates.org. Both have free templates you can use so long as you keep the footer link in them.
     
    kevbo22, Jan 31, 2011 IP
  15. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #15
    that's a great way to learn how things work. :)
     
    AtSeaDesign, Jan 31, 2011 IP
  16. Chronister

    Chronister Peon

    Messages:
    45
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    I prefer to avoid templates. I fear that if I rely on them I won't be able to show my real design skills and as a person who is constantly trying to learn new things about CSS I feel using a template would stand in the way of that. Also, sometimes some templates don't come with comments as to how some parts of the site were designed so it makes it harder for me to mess around with them.
     
    Chronister, Jan 31, 2011 IP
  17. strike1

    strike1 Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Just go to w3schools.com and click on CSS...
     
    strike1, Feb 1, 2011 IP