My initial CSS file - Webradiance

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:

have your say by posting new messages and taking part in topics and polls
keep up to date with the latest news and trends in the web design and development world
send private messages to other members
have your questions answered by our knowledgeable community
add a link to your website in our links area
receive emails when someone replies to your posts

Login Name (?)	Password (?)	Email (?)
Display Name (?)	Confirm Password (?)	Confirm Email (?)
Secruity Code (?)
I have read, understood and agree to these rules and conditions (View Terms)

Updated on 4th January 2008

We encourage you to participate in the WebRadiance Community, however as with all social circles, there are a few rules you must abide by in order to maintain your membership within these forums. We are trying to provide the highest quality community experience for our members and following these rules is the best way to maintain a quality environment for everyone.

If we find that you break any of these rules, your account may be disabled and your posting privileges removed.

Section A: Posting & Personal Messaging Rules

You will not post any messages, or links to content, that is obscene, vulgar, sexually-orientated, hateful, threatening, or otherwise violates of any laws
No double posting; keep your question in one section
Posts in a particular forum section and/or thread need to stay on topic
Never make a post simply to increase your post count
DO NOT POST IN ALL CAPS
Be respectful to other members
You will not recruit WebRadiance members for other forums
Individual sub-forums may have additional rules. These will be displayed at the top of each sub-forum

Section B: Spam

Users will not spam the forum through repetitive posting, or its members through the PM system

Section C: Usernames/Accounts

Your member name cannot contain profanity
Your member name cannot contain advertising or a company name that is not your own
Your member name cannot be an attempt to impersonate another member
If restricted/banned, you will not register a new account to obtain freedom to post

Section D: Signatures

One line of text only
In the one line of text, only one external link is allowed
No images are allowed

Section E: Avatars

Images must be suitable for all ages
Images may not be more than 15kb in size

Section F: Advertising

You cannot post with the intention of selling and/or promoting yourself, a product, or another web site
Your member name cannot be a blatant advertisement

Section G: Report Posts

You must not abuse the Report post feature. Blatant abuse will not be tolerated.

Section H: Site/code

Do not attempt to hack the site
Do not post compiled code, but source code is allowed.
Do not attempt to gain access to another member's account or any restricted areas of the web site

Section J: Administrators/Moderators

Members may never request to become an administrator or moderator
Any decision made by one administrator or moderator can be appealed
Any decision made by all of the Administrators is final

Section K: General:

Rules that are considered common sense or implied by the community also apply
These rules can be modified at any time by the administrators, so check back regularly

My initial CSS file, An immensely helpful foundation

Options

Marc Amos View Member Profile Find Member's Posts	Aug 8 2006, 02:12 PM Post #1
W.R. General Group: Administrators Posts: 2,833 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) reset.css ( 2.45K ) Number of downloads: 17 -------------------- Writing on markup, CSS, and other web geekery Professional, accessible, and search engine friendly web site development by Boston Web Studio

Sirkent View Member Profile Find Member's Posts	Aug 9 2006, 01:57 AM Post #2
Loose bits sink chips Group: Administrators Posts: 2,101 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

Marc Amos View Member Profile Find Member's Posts	Aug 9 2006, 07:46 AM Post #3
W.R. General Group: Administrators Posts: 2,833 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. -------------------- Writing on markup, CSS, and other web geekery Professional, accessible, and search engine friendly web site development by Boston Web Studio

Isi View Member Profile Find Member's Posts	Aug 9 2006, 08:17 AM Post #4
W.R. Private Group: Members Posts: 17 Joined: 1-August 06 Member No.: 31	cheers bud.

moojoo View Member Profile Find Member's Posts	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!

JPMitchell View Member Profile Find Member's Posts	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.

Marc Amos View Member Profile Find Member's Posts	Aug 9 2006, 09:56 PM Post #7
W.R. General Group: Administrators Posts: 2,833 Joined: 4-April 06 From: Massachusetts - USA Member No.: 5	Anytime, my friends. -------------------- Writing on markup, CSS, and other web geekery Professional, accessible, and search engine friendly web site development by Boston Web Studio

ultra99 View Member Profile Find Member's Posts	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

Marc Amos View Member Profile Find Member's Posts	Feb 6 2007, 02:58 PM Post #9
W.R. General Group: Administrators Posts: 2,833 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. -------------------- Writing on markup, CSS, and other web geekery Professional, accessible, and search engine friendly web site development by Boston Web Studio

ultra99 View Member Profile Find Member's Posts	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.

Ryan Fait View Member Profile Find Member's Posts	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.

Marc Amos View Member Profile Find Member's Posts	May 2 2007, 09:16 AM Post #12
W.R. General Group: Administrators Posts: 2,833 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/ -------------------- Writing on markup, CSS, and other web geekery Professional, accessible, and search engine friendly web site development by Boston Web Studio

moojoo View Member Profile Find Member's Posts	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!

Marc Amos View Member Profile Find Member's Posts	Aug 24 2007, 02:37 PM Post #14
W.R. General Group: Administrators Posts: 2,833 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. -------------------- Writing on markup, CSS, and other web geekery Professional, accessible, and search engine friendly web site development by Boston Web Studio

mouse_catcher View Member Profile Find Member's Posts	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 ~~steal~~ use for inspiration.

Marc Amos View Member Profile Find Member's Posts	Aug 25 2007, 08:23 AM Post #16
W.R. General Group: Administrators Posts: 2,833 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. -------------------- Writing on markup, CSS, and other web geekery Professional, accessible, and search engine friendly web site development by Boston Web Studio

Kamor View Member Profile Find Member's Posts	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...

« Next Oldest · CSS · Next Newest »