Beast-Blog.com
A CSS Starter File

First the main stuff

/*
  The star selector is used to target every element.  This is
  often used to zero out the margin and padding.  This
  creates some common ground from which to begin.
*/
* {
}

/*
  body is used to provide basic page styles meant to be inherited
  by nearly all of the page’s children: font-face, size, alignment,
  etc. Some use the html selector, but I have never done that so
  it’s not listed.
*/
body {
}  

/*
  The wrapper div can be used to contain the page itself. It can
  also redefine some characteristics inherited from the body. It
  is high on this page as it’ll contain everything else used.
*/
#wrapper {
}

Now to offer some very common elements
/*
  Here are the headings. These may be redefined throughout the
  document as needed, if needed. This is especially true of the h1
  element as it may have special usage as the main page heading,
  and maybe as a link.
*/
h1, h2, h3, h4, h5, h6 {
}

/*
  A page without paragraphs would be pretty unusual. Let’s make
  sure the p element is included. This, too, may be redefined
  throughout the document  as needed, if needed.
*/
p {
}

/*
  Most pages will have links. Let’s style them using a anchor
  element. Some will write this as a:link. I don’t — I don’t
  see the need
*/
a {
}

/*
  Links really should have some interactivity characteristics for
  accessibility and usability reasons. The a:hover pseudo-class is
  offered as is a:focus. Internet Explorer (IE) doesn’t support
  a:focus, but it does use the a:active state so it’s here too.
*/
a:hover, a:focus, a:active {
}

/*
  Focus/active should be different than hover is some regards, such
  as providing a background color to make it highly visible to
  keyboard users. Thus, certain focal styles may be redefined.
*/

a:focus, a:active {
}

/*
  In addition to background images, most web pages will offer
  embedded images (img), so I will offer them here. Mostly this
  is used to remove borders and text-decoration
  (if the image is a link).
*/
img, a img {
}

Less Common Elements

/*
  I’m not going to add the table element as its purpose is quite
  specific and not used very often by the typical CSS developer
  (unless they are offering tabular data). This is also the case
  for dfn (definition), code, pre (preserve [whitespace]),
  kbd (keyboard), ins (insert),  del (delete),
  i (italic [presentational]), and b (bold [presentational]).
  But you will likely want to use those I am offering — though
  you may not style them all.
*/

small {
}

abbr, acronym { /* Also see .abbr class for a span used by IE */
}

blockquote {
}

cite {
}

em {
}

strong {
}

Form Elements

/*
  Offering some form styles, since most sites have a form or two,
  are really quite common. And offering focal styles is quite
  useful to accessibility for those using keyboards. But please
  know that neither the :focus or :active pseudo classes (on
  elements other than anchors) are available to IE user so
  JavaScript will be needed to make it work. Since not everyone
  has JavaScript enabled, it is important that the form’s
  contrast is usable without script support.
  Since submit- and reset-type inputs are affected by
  the text-type input styles, you may want to offer an
  input.button class. The same applies to checkboxes and radio
  buttons.
*/

form {
}

fieldset {
}

legend {
}

label {
}

input {
}

select {
}

option {
}

textarea {
}

input:focus, select:focus, option:focus, textarea:focus {
}

Some typical IDs

/*
  Call them what you like, but these are some really common IDs
  you may use yourself. I try to make the names as informative as
  possible so as to not confuse myself down the road. Using common
  names like this offers insight to any editor later on. Note that
  the “wrapper” ID is covered above as it needs
  to be high up in the cascade.
*/

#header { /* may also be masthead, banner, etc., and may include
                                     the h1 element */
}

#content {
}

#sidebar {
}

#navigation {
}

#footer {
}

Some typical Classes

/*
  Just like the IDs above, I use these on nearly every site I make.
  These should be pretty self-explanatory with exception to offset
  which I’ve filled in. It’s used in lieu of display : none;
  (.hidden class) so as to remove items from view while still
  making them available to other users. If anchors,  you can use
  a:focus/a:active to bring them back in view. Useful for hidden 

  skip/jump links, etc.
*/

.bold {
}

.italic {
}

.hidden {
}

.offset { /* would be position : abosolute; top : -9000px;
                                 left : -9000px; */
}

.highlight { /* useful for adding spot colors */
}

.tiny { /* use small element to make small, but for styled-only
                               small text, this is class. */
}

.error {
}

.abbr { /* use with a span to style abbr for IE as abbr isn’t
                                supported */
}

/* Starter CSS by Mike Cherim - http://green-beast.com */

* {
}

body {
}  

#wrapper {
}

h1, h2, h3, h4, h5, h6 {
}

p {
}

a {
}

a:hover, a:focus, a:active {
}

a:focus, a:active {
}

img, a img {
}

small {
}

abbr, acronym {
}

blockquote {
}

cite {
}

em {
}

strong {
}

form {
}

fieldset {
}

legend {
}

label {
}

input {
}

select {
}

option {
}

textarea {
}

input:focus, select:focus, option:focus, textarea:focus {
}

#header {
}

#content {
}

#sidebar {
}

#navigation {
}

#footer {
}

.bold {
}

.italic {
}

.hidden {
}

.offset {
}

.highlight {
}

.tiny {
}

.error {
}

.abbr {
}

18 Responses to: “A CSS Starter File”

1. Martin Neczypor responds:
   Posted: August 4th, 2006 at 11:58 pm →

   Great idea Mike- one question though, what is the difference between line 19 and line 22, where a:focus and a:active are defined again?

2. Mike Cherim responds:
   Posted: August 5th, 2006 at 2:05 am →

   Fair question. The reason I have it like that is it’s (for me) a common accessibility practice. I will define the common hover/focus/active properties of anchors. The styling is inherited by the cascade so I use that to redefine only the additional properties I need. Example:

   
   /* basic anchor styling */
   
   a {
     color : #666;
     font-weight : bold;
   }
   

   Would look like this: Example Link Text

   
   /* interactive styling */
   
   a:hover, a:focus, a:active {
     color : #000;
     text-decoration : overline;
   }
   

   Would look like this: Example Link Text

   
   /* additional focus styling to make sure keyboard
      users have significant interactivity */ 
   
   a:focus, a:active {
     background-color : yellow;
   }
   

   Would look like this: Example Link Text

   Hopefully this makes sense.

3. Joshua Kendall responds:
   Posted: August 5th, 2006 at 5:49 pm →

   “[…] my style sheet and your style sheet are basically one and the same.” – Mike Cherim

   I beg to differ. Your sheet is organized. My organization breaks down after day one (who am I kidding, after the first hour).

   Good article though.

4. Joshua Kendall responds:
   Posted: August 5th, 2006 at 5:50 pm →

   Odd, the ‘cite’ tag did not work.

5. Mike Cherim responds:
   Posted: August 5th, 2006 at 6:05 pm →

   I employ cite, consistently, like this:

   
   <blockquote>
      <p>
        This is this quoted text. This is this quoted text.
        <cite>-- Who said it</cite>
      </p>
   </blockquote>
   

   Which looks like this

   This is this quoted text. This is this quoted text.
   – Who said it

   Often I will attach the end quotes image to cite as a background. I find this is the easy way. Like in this example (it’s not like that on this blog).

   Some people use cite within the opening blockquote, like this <blockquote cite="">, but that is supposed to be a URL.

6. Dave Z. responds:
   Posted: August 5th, 2006 at 6:48 pm →

   I don’t know how you find the time to keep doing all you do, Mike, and then find time to write great articles for the rest of us in your blog. Thanks for sharing!

7. Mike Cherim responds:
   Posted: August 5th, 2006 at 6:59 pm →

   Lol, thanks Dave. I’m a vampire on the day shift. I never sleep

8. Joshua Kendall responds:
   Posted: August 5th, 2006 at 9:21 pm →

   Mike, I meant that when I tried to quote what you said in the article in my comment, it did not work. I should of used a blockquote, it would of worked.

9. Mike Cherim responds:
   Posted: August 5th, 2006 at 10:16 pm →

   “I meant that when I tried to quote what you said in the article in my comment, it did not work.” – Joshua Kendall

   Oh, I get you now. My bad. I fixed it.

10. Martin Neczypor responds:
    Posted: August 6th, 2006 at 6:38 am →

    Oh! That makes total sense. I usually find myself redefining information for things such as anchors over and over again. This will definitely simplify that.

11. Joe Dolson responds:
    Posted: August 6th, 2006 at 11:21 am →

    Nice, Mike…this is one of those things I’ve always meant to do…and now you’ve saved me the trouble!

12. veeliam responds:
    Posted: August 11th, 2006 at 11:01 am →

    I’m really curious what you think of starting your template with something like undohtml.css that Tantek wrote about instead of the asterisk.

    I try to use a variation of it on most of my projects.

13. Mike Cherim responds:
    Posted: August 11th, 2006 at 11:57 am →

    I’ve never seen that before but I like it. Using that you start from a clean slate, even cleaner than one has with * { } (though other style undos could be added to the star selector). I had suggested once that the W3C add a “normal” element for the specific purpose of undoing default element styling within a given body. In the situation I described to the W3C, one had to imagine they were writing thought dialog with inserted light emphasis. When writing a person’s thoughts, as done with in accordance to the text-written standard, you italicize such text. This would be true for styled or unstyled use — it’s semantic — so an element would be used in such a case.

    Example: <i>Hmm, I wonder</i>, he thought.

    Adding light emphasis to that is done by using <em></em>.

    Example: <i>Hmm, I <em>really</em> wonder</i>, he thought.

    In this example, though, however proper, the emphasis is also italicized so it isn’t a visually-available cue (unless strong emphasis is applied). Thus, my suggestion to the W3C was to add the “norm” or “normal” element to the spec which could be used like this:

    Example: <i>Hmm, I <norm>really</norm> wonder</i>, he thought.

    “Norm” would undo the default styling applied by the italic element (or any element). It’d still be a thought, but it could contain emphasis while remaining visible — with or without styles as it should because it does have meaning and thus isn’t best served with CSS styling (ie, em {font-style : normal;}). Moreover, more CSS would have to be added to allow for emphasis in non-thought dialog.

    I can think of other situations in which this could be used as well. The W3C turned down my suggestion, unfortunately, but a lot of people didn’t seem to get it suggesting CSS use for such, or removing the element, like this (much of the communication regarding this was via private email and not shown):

    Example: <i>Hmm, I</i> really <i>wonder</i>, he thought.

    But I feel this isn’t proper. The italic element should be used throughout the entire thought not skipped for purely visual purposes. The nesting allows the thought to retain its meaning while allowing visual insertions.

    Thanks for that link, veeliam. That is indeed interesting and previously unknown to me.

14. Dennis responds:
    Posted: August 14th, 2006 at 8:36 pm →

    I also suggest the following CSS for your base:

    
img {
border:0;
}
acronym, abbr {
border-bottom: #000 1px dashed;
cursor: help;
}


15. Mike Cherim responds:
    Posted: August 14th, 2006 at 10:08 pm →

    Oh, I do have those in there, as elements/selectors anyway. I have no properties shown on the starter CSS file.

    But I totally agree, Dennis. I typically add the following to my stylesheets as par for the course (now showing the whole thing):

    
    img, a img {
      border : 0;
    } 
    
    abbr, acronym, .abbr, dfn {
      border : 1px dotted #999; /* I use gray - It will be dashed in IE */
      cursor : help;
    }
    
    dfn {
      font-style : normal; /* to undo the default italic */
    }
    

    Note that I added the .abbr class above. I use that within a span for the sake of offering the unsupported abbr element to Internet Explorer users. I use it like this:

    <abbr><span class="abbr" title="Abreviation">abbr</span></abbr>

    It may be less semantic this way, but my logic is is that I am offering an abbreviation, with a titled span within. Since a span is literally nothing in terms of having value or meaning, I would think the user would make the association between the abbreviation element and the title attribute within. If I place the title in the abbreviation element, I lose the title for IE users and they just get the style. If I put it on both it could be redundant. I feel this is the best compromise. I would guess I have more IE users who would benefit from the way I offer it, than those who would be thrown for a loop by applying the title attribute within the span.

16. The man who forgot his own ideas responds:
    Posted: August 15th, 2006 at 11:36 pm →

    I love the source. Do you get sausages with that?

17. Rick Dean responds:
    Posted: August 15th, 2006 at 11:39 pm →

    or should I say fries?
    Cheers Great site!

18. Keith Krieger at lab 188 responds:
    Posted: September 6th, 2006 at 5:20 pm →

    […] lab188 Tuesday, August 15, 2006
    CSS file frameworks

    Nice approach to starting a CSS file from Mike Cherim’s blog. This approach will help me to stay consistent for starters. This […]

Sorry. Comments are closed.