SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Master Style Sheet Confusion! urgle....

    Does the Master Style Sheet cover all the bases when it comes to a CSS framework/reset?

    I've been jumping from one site to another and have become confused with the updates/evolution of these frameworks/resets and really could use a little direction on all of this...

    A primer on the most recent/best style sheet on this subject would be greatly appreciated. I use html5. Thanks so much!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi ScotchTape88. What master style sheet do you mean? The best way to get confused about CSS is to use a framework.

  3. #3
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi ScotchTape88. What master style sheet do you mean? The best way to get confused about CSS is to use a framework.
    This is what I found, which led me down into this rabbit hole...

    Any advice on it or this topic in general would be great thanks!
    Code:
    /***** Global Settings *****/
    
     
    
    Html, body {
    
    Border: 0;
    
    Margin: 0;
    
    Padding: 0;
    
    }
    
     
    
    Body {
    
    Font: 100%/1.25 Arial, Helvetica, sans-serif;
    
    }
    
     
    
    /***** Headings *****/
    
     
    
    h1, h2, h3, h4, h5, h6 {
    
    Margin: 0;
    
    Padding: 0;
    
    Font-weight: normal;
    
    }
    
     
    
    h1 {
    
    Padding: 30px 0 25px 0;
    
    Letter-spacing:-1px;
    
    Font-size: 2em;
    
    }
    
     
    
    h2 {
    
    Padding: 20px 0;
    
    Letter-spacing:-1px;
    
    Font-size: 1.5em;
    
    }
    
     
    
    h3 {
    
    Font-size: 1em;
    
    Font-weight: bold;
    
    }
    
     
    
    /***** Common Formatting *****/
    
     
    
    p, ul, ol {
    
    Margin:0;
    
    Padding:0 0 1.25em 0;
    
    }
    
     
    
    Ul, ol {
    
    Padding: 0 0 1.25em 2.5em;
    
    }
    
     
    
    Blockquote {
    
    Margin: 1.25em;
    
    Padding: 1.25em 1.25em 0 1.25em;
    
    }
    
     
    
    Small {
    
    Font-size: 0.85em;
    
    }
    
     
    
    Img {
    
    Border: 0;
    
    }
    
     
    
    Sup {
    
    Position: relative;
    
    Bottom: 0.3em;
    
    Vertical-align: baseline;
    
    }
    
     
    
    Sub {
    
    Position: relative;
    
    Bottom:-0.2em;
    
    Vertical-align: baseline;
    
    }
    
     
    
    Acronym, abbr {
    
    Cursor: help;
    
    Letter-spacing: 1px;
    
    Border-bottom: 1px dashed;
    
    }
    
     
    
    /***** Links *****/
    
     
    
    a,
    
    a: link,
    
    a:visited,
    
    a:hover {
    
    Text-decoration: underline;
    
    }
    
     
    
    /***** Forms *****/
    
     
    
    Form {
    
    Margin: 0;
    
    Padding: 0;
    
    Display: inline;
    
    }
    
     
    
           Form input,
    
           Form select,
    
           Form text area {
    
           Font: 1em Arial, Helvetica, sans-serif;
    
           }
    
           
    
           Form textarea {
    
           Width: 100%;
    
           Line-height: 1.25;
    
           }
    
           
    
           Form label {
    
           Cursor: pointer;
    
           }
    
     
    
    /***** Tables *****/
    
     
    
    Table {
    
    Border: 0;
    
    Margin: 0 0 1.25em 0;
    
    Padding: 0;
    
    }
    
     
    
           Table TR td {
    
           Padding: 2px;
    
           }
    
     
    
    /***** Wrapper *****/
    
     
    
    #wrap {
    
    Width: 960px;
    
    Margin: 0 autos;
    
    }
    
     
    
    /***** Global Classes *****/
    
     
    
    .clear         {clear: both; }
    
    .float-left    {float: left ;}
    
    .float-right   {float: right; }
    
     
    
    .text-left     {text-align: left; }
    
    .text-right    {text-align: right; }
    
    .text-center   {text-align: center; }
    
    .text-justify {text-align: justify; }
    
     
    
    .bold          {font-weight: bold; }
    
    .italic        {font-style: italic; }
    
    .underline     {border-bottom: 1px solid ;}
    
    .highlight     {background: #ffc ;}
    
     
    
    .wrap          {width: 960px; margin: 0 auto; }
    
     
    
    .img-left      {float: left; margin: 4px 10px 4px 0; }
    
    .img-right     {float: right; margin: 4px 0 4px 10px; }
    
     
    
    .nopadding     {padding: 0 ;}
    
    .noindent      {margin-left: 0; padding-left: 0; }
    
    .nobullet      {list-style: none; list-style-image: none; }
    Last edited by spikeZ; Jul 12, 2012 at 01:48.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    This looks like a CSS reset. I would think that frameworks would have their own reset. I just use a simpler reset usually, like so:

    Code:
    html, body, div, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, code, hr, img, form, fieldset, legend, label, textarea, span, em, strong, sub, sup, cite, table, tbody, td, tfoot, th, thead, tr, tt, dl, dt, dd, ol, ul, li {margin: 0; padding: 0;}
    
    img {vertical-align: bottom; border: none;}


Bookmarks

Posting Permissions

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