Why register for free on WebRadiance? |
 |
Welcome to WebRadiance forums! WebRadiance is a place for discussion and help on a large range of web design and development related topics such as HTML, CSS, ASP & .NET, PHP and SEO. It is provided for free, without ads and is a friendly place for beginners and professionals alike. By joining us today you can take part in our rapidly growing community. Registering enables you to:
|
My initial CSS file
An immensely helpful foundation
  |
 My initial CSS file, An immensely helpful foundation |
 Aug 8 2006, 02:12 PM
Post
#1
|
|
 W.R. General  Group: Administrators Posts: 2,799 Joined: 4-April 06 From: Massachusetts - USA Member No.: 5  |
I've been writing CSS ever since Bill Clinton's grandfather was in the third grade, and over the years I've used many different methods to get multiple browsers on the same page when it comes to CSS. Recently, I adapted Mr. Eric Meyer's wonderful Reset code into my own work, and I thought it would be "go me" if I shared it with you all.
90% of the credit goes to Mr. Eric Meyer, as mentioned in the CSS comments. CODE /*======================================================================== The selectors in this stylesheet exist only to reset browsers in a way that ensures they all start on the same level playing field. Credit for these selectors goes to Mr. Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) ========================================================================*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /*============================================================================== End Mr. Eric Meyer's reset selectors, and begin my selectors which redefine common elements ==============================================================================*/ body { font: 75%/1.4em "Trebuchet MS", Arial, Helvetica, sans-serif; color: #000; background: #fff; } /*==================== Link Styles ======================*/ a:link, a:visited {color:blue; text-decoration:none;} a:focus, a:hover, a:active {outline:none; color:#fff; background-color:blue;} /*==================== Heading Styles ======================*/ h1 {font-size:1.8em; margin:.6em 0;} h2 {font-size:1.6em; margin:.6em 0;} h3 {font-size:1.4em; margin:.6em 0;} h4 {font-size:1.2em; margin: .4em 0;} h5 {font-size:1em; margin:.4em 0;} /*==================== List Styles ======================*/ dl, ol, ul {margin:1em 0;} ol, ul {padding:0 0 0 2em;} li, dd {margin:.25em 0;} dt {font-weight:bold;} /*==================== Table Styles ======================*/ th {font-weight:bold;} td, th {padding:.3em .5em; text-align:left;} /*==================== General Styles ======================*/ img {border:0;} p {margin:1em 0;} hr {display:none;} label {display:block;} legend {padding:0 .5em;} strong {font-weight:bold;} blockquote {padding-left:2em;} em, ins, del {font-style:italic;} fieldset {padding:0 1em; border:1px solid #666;} abbr, acronym, dfn {cursor:help; border-bottom:1px dotted #ddd;} code, kbd, pre {font-family:Courier, "Courier New", Tahoma, sans-serif;} My usual routine is to insert the above CSS in a file called reset.css, then I used a small line of code to insert this reset.css file within my site's regular style sheet. For instance, if my regular style sheet was called 'screen.css', I would put this at the very top of it: CODE @import url("reset.css"); This calls in all of the styles in the reset.css file, and then below that one line, I write all of my site's regular styles. And here's a quick download in .txt format:
Attached File(s)
-------------------- |
 |
 
|
|
Aug 9 2006, 01:57 AM
Post
#2
|
|
 Loose bits sink chips Group: Administrators Posts: 2,067 Joined: 4-April 06 From: Kent, UK Member No.: 2 |
Wow. My CSS isn't bad, but I've never considered doing this! Thanks Herk!
-------------------- QUOTE(benbramz @ Aug 17 2007, 07:44 AM)  Ive noticed that quite a few people are now adding quotes from the board into their signature. I think its started an new web-radiance craze.. :P |
|
|
|
|
Aug 9 2006, 07:46 AM
Post
#3
|
|
|
W.R. General Group: Administrators Posts: 2,799 Joined: 4-April 06 From: Massachusetts - USA Member No.: 5 |
QUOTE(Sirkent @ Aug 9 2006, 02:57 AM) Wow. My CSS isn't bad, but I've never considered doing this! Thanks Herk! You're welcome. If you start using that code in all your style sheets, I can almost guarantee life will get easier for you. -------------------- |
|
|
|
|
Aug 9 2006, 08:17 AM
Post
#4
|
|
|
W.R. Private  Group: Members Posts: 17 Joined: 1-August 06 Member No.: 31 |
cheers bud.
|
|
|
|
|
Aug 9 2006, 08:19 AM
Post
#5
|
|
 Argh!  Group: Members Posts: 449 Joined: 3-August 06 From: Texas Member No.: 37 |
hehe yup, I do the same thing. Have a default style sheet scheme for different kinds of layouts etc. Saves lots of time.
-------------------- Its not girly, its web 2.0!
|
|
|
|
|
Aug 9 2006, 06:41 PM
Post
#6
|
|
 Allegedly Legendary  Group: Staff Posts: 834 Joined: 26-July 06 From: Fort Wayne, Indiana Member No.: 7 |
I have to say that I use Marc's Initial stylesheet out of the gate (or a slightly modified version) and tweak from there.
Thanks Marc! -------------------- Writings about everything related to your web design business.
My Unique Web Design and Development Company. |
|
|
|
|
Aug 9 2006, 09:56 PM
Post
#7
|
|
|
W.R. General Group: Administrators Posts: 2,799 Joined: 4-April 06 From: Massachusetts - USA Member No.: 5 |
Anytime, my friends.
-------------------- |
|
|
|
|
Feb 6 2007, 02:40 PM
Post
#8
|
|
|
W.R. Corporal  Group: Members Posts: 94 Joined: 2-February 07 Member No.: 361 |
That's very nice. So I just have this at the beginning of the css file and then under it continue with my style? Or do I modify this file? I'm kinda lost here. :S
|
|
|
|
|
Feb 6 2007, 02:58 PM
Post
#9
|
|
|
W.R. General Group: Administrators Posts: 2,799 Joined: 4-April 06 From: Massachusetts - USA Member No.: 5 |
QUOTE(ultra99 @ Feb 6 2007, 02:40 PM) That's very nice. So I just have this at the beginning of the css file and then under it continue with my style? Or do I modify this file? I'm kinda lost here. :S The CSS in the above post is meant to be the starting CSS for every site, with your custom CSS to be placed below it. It's intention is to get all web browsers on the same playing field by defining all rules for them to follow. By nature, all browsers behave differently to many of the common elements found within a website, and the css posted above stops that. -------------------- |
|
|
|
|
Feb 6 2007, 03:04 PM
Post
#10
|
|
|
W.R. Corporal Group: Members Posts: 94 Joined: 2-February 07 Member No.: 361 |
In that case, very useful. Thanks.
|
|
|
|
|
Feb 9 2007, 07:45 AM
Post
#11
|
|
 W.R. Sergeant  Group: Members Posts: 204 Joined: 7-January 07 From: Las Vegas Member No.: 350 |
I do the same thing as well, only I only use padding to space elements apart unless for a specific reason. It seems like I'm always running into a problem with margins separating blocks in wierd ways. Nice post, though, it's definitely something everyone should at least check out
-------------------- The commercial front for my freelance web design company.
|
|
|
|
|
May 2 2007, 09:16 AM
Post
#12
|
|
|
W.R. General Group: Administrators Posts: 2,799 Joined: 4-April 06 From: Massachusetts - USA Member No.: 5 |
A worthy bump:
Eric Meyer has just provided his very final CSS "reset" style sheet. It differs quite a bit from mine, since his is only meant to reset you, while mine has many items re-defined to suit my personal preferences. Either way, his is a great starting point for your own projects, but do expect to re-define common selectors to suit your personal preferences: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ -------------------- |
|
|
|
|
May 15 2007, 02:18 PM
Post
#13
|
|
|
Argh! Group: Members Posts: 449 Joined: 3-August 06 From: Texas Member No.: 37 |
Alternately along these lines:
http://www.newguyinennis.com/samples/layouts/ see if that helps any one speed along. -------------------- Its not girly, its web 2.0!
|
|
|
|
|
Aug 24 2007, 02:37 PM
Post
#14
|
|
|
W.R. General Group: Administrators Posts: 2,799 Joined: 4-April 06 From: Massachusetts - USA Member No.: 5 |
In the very first post, I've updated the styles a bit to diminish the inconsistencies commonly found in form controls and inputs.
-------------------- |
|
|
|
|
Aug 25 2007, 01:42 AM
Post
#15
|
|
 W.R. Private Group: Members Posts: 42 Joined: 26-July 07 From: Auckland - New Zealand Member No.: 540 |
wow that was fortuitous. I was just bashing my way through my own one of these when I spotted this. Thanks herkalees.
By the way do you want credit as you've done for Eric Meyer. If so let us know as I'll add that to my reset file? Oh and moojoo thems is some nice layouts which I'll quite happily |
|
|
|
|
Aug 25 2007, 08:23 AM
Post
#16
|
|
|
W.R. General Group: Administrators Posts: 2,799 Joined: 4-April 06 From: Massachusetts - USA Member No.: 5 |
Nah, I've never been one to insist on credit for things. A good portion of that code is Eric Meyer's anyway, the rest really is code that most people would have to insert; I just did it for you.
-------------------- |
|
|
|
|
Aug 27 2007, 09:07 AM
Post
#17
|
|
|
W.R. Private Group: Members Posts: 9 Joined: 16-August 07 From: Myrtle Beach, SC = Tourist Trap Member No.: 566 |
Wow. I've been looking for a way to help with cross browser bugs. Very nice, thanks herkalees :-)
-------------------- ...Work in progress...
|
|
|
|
|
Tags
No Tag inserted yet
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 7th January 2009 - 03:55 PM |