Default Styles

[TavoxPeru 0]

In the past i came into the situation that every time i start a new development project and to get things well organized, i began it by creating some default folders that i know i must use like for example a folder for images or for css styles, and at the same time i create some default files that includes:

index.html: An empty HTML template page with defaults tags like title, meta tags for keywords, description and content type.

base.css: A central css stylesheet that i use to reset some styles like margins, paddings, fonts, colors, etc.

functions.js: An empty javascript file.

So, instead of repeating it over and over again and after been working like this with every new project a time ago i realize that this could be optimized especially in the case of the new central css stylesheet.

 

Now, when i start a new project what i include in this base style sheet is a set of default rules to reset styles for common elements:

Reset font size and font family for all elements to standard (16 Pixel):

html * { 	font-size: 100.01%;	height:100%;}body { 	height:100%;	font-family:Verdana, Helvetica, Arial, sans-serif;	font-size:100.1%;}

Settings for Headings: Font size and margin/padding for headings are displayed different in Internet Explorer 6 than other browsers:

h1 { 	font-size:200%;}

Also, IE6 renders the font sizes differently (mostly for Georgia, Trebuchet MS, etc. typefaces, so for all browsers:

h1, h2, h3 {	margin:1em 0;}h1, h2, h3, h4, h5, h6 { 	font-weight:bold;}

Removing Link Outlines: Especially with Firefox, links get bordered and outlined on focus and active states. Simply because i don't like it i deactivate this:

a {	outline: none;}

Resetting Margin and Paddings: I reset the paddings and margins for some elements mostly because IE renders them ratherly different than major standards based browsers:

/* html *, body { margin:0; padding:0; } */p, form, ul, ol, dt, dd {	margin:0;	padding:0;}

Linked Images without borders: I remove image borders to prevent that an unstyled img element gains borders when they are hyperlinked but take in mind that by removing outlines may reduce accessibility and also removing outlines and borders on focus or hover states will theorically disable browsing using tab key:

img {	outline: none;}

Of course, you may change whatever you want it depends on what you need

 

Best regards,

[Mordent 0]

I do something very similar in terms of creating a standard CSS file. When I first started using CSS (not all that long ago, to be honest), I got irritated with the way that different browsers render things differently. Most of that is due to Internet Explorer being a stubborn little piece of rubbish and doing its own thing, but regardless it's still one of the most commonly used browsers out there today, so I decided to try and accommodate it.

 

Naturally it proved..."interesting", but I found that a large number of the differences in rendering can be compensated for by first "resetting" the styles. Much google trawling later and I came across something that I found very handy, and the file I use today is strongly based upon it: Reset Reloaded.

 

It's by no means perfect, and you still have to take in to account the different ways in which different browsers (i.e. IE ) displays things, but by working from a clean slate you can build up your styles rather than have ones that are built in by your browser. Sure, this means you need to do a lot more CSS work, but in the long run it's certainly paid of for me as I'm gradually getting a better understanding of the sorts of quirks different browsers have, as well as how flexible CSS really is.

 

I can strongly recommend trying this for pretty much anyone, as the results you can get from it are pretty awesome.

 

One question I have for you, Tavox, is about the fact that you seem to use percentages literally just over 100% for font-size (such as 100.01%, or 100.1%). Is there any particular reason for this? What would the difference be if you simply used 100%?

Edited November 19, 2008 by Mordent (see edit history)

[FirefoxRocks 0]

IE7 has fewer quirks in it than IE6, I am moving away from IE6 now, it is less widely used. Everyone that has a computer from 2001/2 running Windows XP should have IE 7 installed in my opinion.I usually call my global CSS file "main.css" and my IE css file "main_ie.css". If there are any JavaScript functions to be used globally, I call the JavaScript file "main.js".If I am doing a more heavy site (which I haven't done for a while), I use "header.php", "head.php", "body.php" and "footer.php". Header contains things like setting the content-type (text/html; charset=utf-8) and compression (gzip.handler). Head, body and foot are self-explanatory.If I am going for intensive bandwidth optimization, I will use "mainCss.php", "mainCssIe.php" and "mainJs.php". Set the content-type to text/css and application/javascript and Gzip compress it to save bandwidth. This is visible by using Safari's built-in developer tools on Windows. It gives you a notice for each gzippable file (textual data) that isn't gzipped.Of course if you have a CMS, you shouldn't need to worry about this

[TavoxPeru 0]

I set it up to 100.01% because this value is the defacto standard of allmost all web browsers, generally, 1em = 12pt = 16px = 100%, and i want that my page looks good and readable across browsers. Why i use 100.01% instead of 100% only? I don't remember exactly why, but, i remeber its something related with the calculated font sizes and the math process involved to get the correct values. Also, many web authors prefer to set this to 76% or 81%, for a smaller-but-still-readable look across browsers.

 

Now, i have other reasons to use a percent value for the root element:

The text is resizable in all Web browsers that support resizing.

This stops IE from going micro and keeps the text more or less legible when the user sets the font size to smallest.

Percent text scales at a reasonable rate, allowing us to preserve readability, accessibility, visual design, and also remains fully scalable for mobile devices.

Usability purposes, users won’t want to see anything smaller than 100% font-size for the main text.

I could use 1em instead but after reading some articles i decide to use the percent value. For example, if you set the body element to font-size:1em, then when setting the client’s browser text size to "smallest" ems looks much smaller than percent and if you set to "largest" ems looks much larger than percent.

 

So, what i generally use is a combination of a percent value for the root element and ems values for children elements. With this combination i get: Relative sizing, good browser support and centralised control in the css file, but this can be easily overriden by user stylesheet.

 

I will check the Reset Reloaded page and another reset solution i know is the CSS Reset Tool offered by the Yahoo User Interface (YUI) library. The YUI library have 3 more CSS Tools, CSS Base, CSS Fonts and CSS Grids.

 

Take a look, from YUI website:

CSS Reset (neutralizes browser CSS styles)

CSS Base (applies consistent style foundation for common elements)

CSS Fonts (foundation for typography and font-sizing)

CSS Grids (more than 1,000 CSS-driven wireframes in a 4KB file)

Best regards,