What would be some good reasons to have to use inline style as oppose to an external css file or css code in the header?
One good reason to use inline styles is if you're using it for HTML emails. For every other opportunity, I think it would be best to use external styles with meaningful classes/ids and inheritance.
Not all styles can be reused; some will be used by a single element in the HTML, so having a class for that may be an overkill and even increase the overall size of the file.
Using inline style can actually make HTML more readable and maintainable when the style can't be reused for other elements (tags).
You should always try to find a way to avoid inline styles. They are often indicative of poor planning or lazy programming. That being said, they are available. Don't beat yourself up for using the tools that are available to you if a specific need arises.
The only reason I can think of is to make the HTML less readable and the CSS less maintainable. Not all styles can be reused; some will be used by a single element in the HTML, and having a class for that may seem like overkill and can slightly increase the overall size of the file - but having two different places where you have to edit the CSS makes things as a whole harder to maintain. This difficulty increases exponentially as you add more and more inline styles.
Moreover, while making changes, finding and navigating to the right HTML file to modify the inline CSS when you make a change to something else in your stylesheet can be a hassle and increases the effort of applying those changes. That's the definition of poor maintainability.
I heard that many developers are not recommending using CSS reset, what are the reason for it?
for example:
What are the rules for portable CSS?
When using a CSS reset, lots of HTML elements become unusable : titles are small border-less and margin-less, input elements are misformed, etc... You need to restyle all these elements, which is more work.
Some people think that this process of destyling/restyling is unnecessary, error-prone, and that it removes some necessary differences between platforms. Most notably, input elements are typically styled by a browser according to its host platform (windows, mac, etc...) and some people think that UI consistency should be respected even inside a browser.
CSS Reset is found there to normalize the CSS across browsers and gives you easier and more intuitive design possibilities.
For instance, when you use <h1> without a CSS reset/normalization, it will have larger font-size, some margins, and a bold font-weight, with a CSS reset, it would look like a normal text, and it allows you to shape it the way you want, without worrying about the browser defaults which may vary between browsers.
The question you should ask yourself, do you want it?
Remember that a CSS reset does not have to be absolute, if you want to remove all margins and paddings, but retain font size and weight, you could use the classic * { padding: 0; margin: 0; } rather then using a full-powered CSS reset.
If you are making a website,
and you know html & CSS like the back if your hand,
and you can test directly on all major operating systems without compromise,
You're proficient in correcting errors/conflicts with old browsers,
or you are making a website for one browser only.
You may not need a CSS reset or it would be best for you to make your own.
But if you're making a typical modern website and you want to avoid
cross browser conflicts, a reset sheet should "set" the html elements to a similar
playing field.
Many reset sheets interfere with styling too much, all you really want is a default like CSSesta or Eric Meyer's
I believe WordPress does something like this, they use a CSS reset stylesheet, then manually apply a global margin for each HTML element (to increase browser compatibility). I'm looking for something like this, but without the WordPress specific elements.
On a similar note, is there a default stylesheet that WebKit uses that I can access?
You may want to consider using normalize.css as opposed to a reset.css; checking their demo seems to indicate this includes standards for form elements:
http://necolas.github.com/normalize.css/
a quick google search turned up this: http://meyerweb.com/eric/tools/css/reset/ and this: http://html5doctor.com/html-5-reset-stylesheet/ among others
I generally use YUI Reset CSS for this. YUI Base CSS can complement Reset by applying a style foundation for common HTML elements that is consistent across A-grade browsers. YUI is from Yahoo and hence enjoys good support and is presumably more reliable than other similar CSS frameworks.
default Chrome WebKit http://codesearch.google.com/codesearch/p#OAMlx_jo-ck/src/third_party/WebKit/Source/WebCore/css/html.css
here's a butt load more default user agent style sheets
http://meiert.com/en/blog/20070922/user-agent-style-sheets/
There's no standard CSS margin etc. that I know of...
That's one of the reasons why a reset stylesheet is necessary. No one sets the same styles and most browsers have different defaults.
For me, once I reset margin and padding on most elements, I usually make the margin around 1em for p, h1-h5, etc.
Is it possible to convert HTML + CSS into HTML for a system that doesn't handle CSS, not even inline CSS?
What options do I have?
No. Much of what CSS does is not possible with HTML alone. Your best option is to design your site in such a way that when it loses CSS, it still renders in a nice and orderly fashion. Pay very close attention to things like Heading Tags, paragraph tags, lists, etc. Be sure to build semantically-correct sites, and they (in most cases) will degrade quite nicely.
The only thing you can do is add styles that were possible with old html3+ attributes and font tags. Quite a bit of stuff is possible, but none of it is going to be automatic. You can go through pretty much everything in css and try to find it's html3+ attribute equivalent.
Things like background font b i center width height are examples of old attributes (or tags in the case of font) that define style (and should generally be ignored these days). I don't envy the work ahead of you, but just make a happy medium between reasonable things and unreasonable styles. Tables also might come in handy for floats as well.
Sounds like an old mobile device?
If you can't use any CSS, I would imagine you would have to resort to possibly deprecated HTML tags/attributes, like font tags and attributes like bgcolor.
This would probably be rather difficult, because to my knowledge you can't achieve everything you can do with CSS, like positioning for example. You would have to switch your layout to use tables and set align, valign, etc.
use this first
http://www.mailchimp.com/labs/inlinecss.php
then replace css with deprecated html
http://www.highdots.com/css-editor/articles/css_equiv.html
Two words: Image Maps :) (I've actually seen sites that, in order to "render correctly on every browser" literally just make a big fancy image the background, and add links accordingly via an image map)
Making a web page display correctly im all major browsers today is a very time consuming task.
Is there a easy way to make a CSS style that looks identical in every browser?
Or at least do you have some tips to make this work easier?
I agree with all the "reset" suggestions and the "grid" framework suggestions, but I did want to add a bit of advice: The goal of identical in every browser is, in practical terms, unachievable because you cannot control the client. Case in point: fonts.
You declare your font styles in CSS but some Linux machines, some Macs, some mobile browsers -- will not have the font you specified. This variation leads to differing text lengths and wrapping. Then there's the variance of browser versions and operating systems running each; how different browsers implement zoom features; and the text size can be adjusted by the end user. Identical rendering is simply an unachievable goal.
But take heart! This is the "art" part of CSS: Being able to be flexible in your design such that variances between browsers, operating systems, and end-user adjustments are handled elegantly. Don't strive for identical rendering -- you should strive for brand consistency + appropriate experience + flexibility.
try using a css reset like the eric meyer reset or the YUI reset. will help but no easy or perfect way to make things look identical in every browser
Organize your work flow in the following way and it'll reduce a lot of time wasting.
Make sure you declare a doc-type.
Use one of the reset methods others have mentioned here.
Work on your structure
Avoid using width and padding on the same element where you can.
Always think of reducing unneeded HTML and css rather than adding all the time.
Try not to use margin left and right when floating elements.
If you stick to those items, a lot of the most common issues will not appear.
PS One item I forgot to mention was make use of the validators over at W3.
I've always created a basic CSS style sheet which works in W3C Fully compliant browsers like firefox and then created alternative browser specific style sheets to fix any styling issues in other browsers, i.e. IE6, IE7 etc.
You can use the following code within the HTML to select appropriate IE style sheets.
<!--[if lte IE 6]>
<link href="/css/eqtr_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
You can also use online websites such as browsershots to view your site in different browsers.
It is time consuming at first, especially if you are stilling learning the ropes of DIV+CSS. However after you've done enough practice and met enough of problems and got them all solved, you will have the knowledge of what WORKS and what DOESN'T WORK.
It is then you know how to write the most compatible style possible in the first place, thus saving all the time in degugging and rarely have any problems with any of the major modern browsers: IE6, IE7, FF2, FF3, Opera 9, Safari 3 Win / Mac.
Yes, it is possible and as easy as it can get. Practice and conquer them one by one, then you know how to do things right in the first attempt.
Well the only baffling monster should be IE6 I guess. It's inbrowser. Other than that, ff2, ff3, opera 9, safari win / mac, ie7, ie8 are relatively similar in the rendering engine, at least with much less bugs than it has with IE6.
I have a few best practices for you (one who has just begun their trip in CSS) in coding to get the max CSS compatibility:
Use a reset first. It clears your mind and makes sure each step of your job.
Don't use padding (left and right) and width on the same element unless you know well how that'll work out.
If an element is floated, give its parent overflow:hidden and height: 1% if the parent does not already have a height.
Don't give an element both margin-top or margin-bottom but only margin-top or margin-bottom. Because margins of adjacent elements collapse into one another, making the positioning somewhat unpredictable for novices.
If an element is floated, give it display:inline.
Don't rely on z-index unless your scripting needs it.
If anything weird happens in IE6, use height:1% on that element.
According to my experiences, these are things that will really really help you in solving potential problems. Use them and they eliminate your chances of stumbling upon any time consuming problem by 80%. Actually there are more trivial tips than these when dealing with specific tags but let's call it a day.
The Yahoo css foundation will help. To standardise formatting you will want reset and base.
Make sure to include the proper DOCTYPE.
I still see people regularly coping with box model issues because they forgot to include a doctype. Without the proper doctype Internet Explorer renders in "quirks mode", and so do other browsers to a lesser extent. If you include the proper doctype, browsers switch to "standard mode" and behave very similar to eachother.
Other then that, if you do this for a living you will rapidly pick up and remember those subtle corner cases where IE interprets things slightly different from Firefox, etc. With some experience it is entirely possible to design the entire page in your favourite browser and only make very tiny tweaks to the CSS to make it render almost pixel perfect in other browsers.
First of all you could try a reset, like some other people mentioned here, you can do a quick margin and padding reset with this piece of css:
*{margin: 0; padding: 0}
When you design your css make sure you're using a modern, standars compliant browser (personally I would recommend firefox 3 which has an excellent web developer toolbar, with which you can edit css from within your browser). Doing this will certainly make your site look ok in all the new browsers.
Most of the layout problems you'll have will probably be caused by Internet Explorer's wrong interpretation of the box model, you can avoid this by never setting a width and margin or padding at the same time. This might seem annoying but it's not, just apply the padding or margin to the content which is inside your element which has a width set.
Of course more problems exist but this is probably the most common and annoying one, for more specific issues you can always try google. Also, lately I'm considering to ignore IE6 and older browsers if my site's audience allows it, on a web design site you'll never find anyone using IE6, right? Of course this is not possible often since many (crazy ;)) people are still using IE6.
Also, if you need to test your site browsershots is a free way to do it quickly.
Test your CSS on all the browsers as you go. It's awful to get it pixel perfect in your pet browser only to find that it's way off in other browsers.
Taking this approach will ease you into an understanding of what will work on all the major browsers.
I've had success using the Eric Meyer CSS reset available here. It basically overrides a bunch of browser CSS styles that are default. Having said that, there are still a lot of differences (probably some of the ones that are troubling you like box model differences, etc. In that case, it might be better to use Blueprint to handle most of your css.
Using CSS Reset will give everything the same starting point, but won't do much to help with the changes you make beyond that starting point. I can't say there's really any easy way. One solution is to stick to a limited set of CSS that you know works well in all browser you want to support. You may not be able to do a lot of the fancier CSS stuff, but your CSS debugging time should come down considerably.
You might also look at a framework for css like Blueprint or css-boilerplate or the yui grids framework. Usually, these frameworks set you up with a standard set of css class definitions that you can apply to elements to lay them out in a specific and defined way.
If it needs to be pixel-perfect, then you'll need to use px in your stylesheets. Use a css reset stylesheet, then size everything based on pixels.
To ensure that your css is rendering correctly in different browsers, you might find a service like BrowserShots useful, however, I think you'll find it very difficult to get absolute consistency across all browsers.
My personal preference is to use correct markup and css, leave out any browserhacks, and design layouts to degrade gracefully.
Conforming to a strict doctype will take care of many of the differences as well. Also, I generally add a <div> tag to encase everything within the body, because I've noticed a difference in how firefox vs ie handle the body tag as a top level element.
I like developing against Firefox first, often using Yahoo's YUI for reset (and grids for basic structure of the page), and using IE conditional directives to override formats that IE, in all its–a-hem–wisdom, handles differently.
index.html
<head>
<link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/base-min.css" />
<link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/grids.css" />
<link rel="stylesheet" type="text/css" media="all" href="styles/screen.foo.css" />
<link rel="stylesheet" type="text/css" media="print" href="styles/print.foo.css" />
<!--[if gt IE 5]> <link rel="stylesheet" type="text/css" href="styles/ie.screen.foo.css" /> <![endif]-->
</head>
Develop for Firefox first. You can test in other browsers but don't worry about fixes until it works just how you want it in Firefox. Then move on to the other standards-based browsers, namely Safari and Opera. If you've written good HTML and CSS it shouldn't require much work in these browsers.
Then move on to the beast of the lot, IE. Use conditional comments to target specific IE versions. IE 7 should be fairly easy, for IE 6 you may find you have to sacrifice certain parts of the design to get it to work easily. This is OK, IE 6 is on the way out so don't worry if you don't fully support it. Transparent PNGs are usually the biggest problem, AlphaImageLoader just doesn't do the trick in every situation.
As previously mentioned, a CSS reset like Eric Meyer's is a good starting point, use it to build your own reset based on your needs. Other than that the answer is simple: there is no silver bullet.
Do websites need to look exactly the same in every browser?
Apart from that, I guess practice makes perfect. And read about everything you can find about the potential issues you can stumble upon. Using reset-files, correct doctypes, validators and frameworks might help you to a certain extent, but in the end you are in control of the code and only you know exactly what you want it to look like. The code might be valid and the browser might do exactly what you've told it to, and it still does not look like what you want it to.
The more you use CSS for layout purposes, the more problems you'll encounter, the more problems you'll find a way around and the more you'll learn. After quite a few years of making layouts entirely with structured, semantic HTML and neat'n'tidy CSS I seldom have to spend a lot of time correcting flaws in one or another browser.
Use a reset snippet
Develop with web standards
Validate your markup and CSS
Don't use margin and padding on the same parts of an element
Use IE conditionals
Test in all the browsers you want to support
Understand that nothings going to be perfect, but you can get pretty close.
The Yahoo User Interface (YUI) has a CSS Reset implementation which seeks to form a common baseline across all browsers. This should get you pretty close.
This is really a hard question to answer -- all browsers? Does this mean all versions? Mobile browsers? Just the "mainline" ones (opera, firefox, ie and safari)?
You won't find even full compliance on CSS level 1 stuff, so there are going to be some tweaks you're going to have to make. In my experience opera, firefox and safari all behave similarly when it comes to basic stuff (positioning, floats, divs, etc) and it's just IE you'll have to tweak for.
You could also use a tested CSS library or framework like yahoo grids (http://developer.yahoo.com/yui/grids/) or a programmatic interface like google's web toolkit (http://code.google.com/webtoolkit/).
I tend to find that identical looking CSS comes about if I use floats to layout the page in boxes. The flow model works as you think it should, and they're faithfully rendered in all major browsers.
I know some would tell me that the use of a lot of floats is wrong, but it works surprisingly well.
At the basis there is no guarantee that such a thing will ever work perfectly. As long as the browser developers find ways to do their own thing rather than the 'standard' way of doing things, you will have differences.
I've had positive results using the Yahoo User Interface Base CSS, but in the end even that couldn't cope with the more complex items that should be possible with CSS.
In the end I went for a less-than-perfect solution and simply made my framework check if I had set up browser-specific stylesheets.
Here's a PHP snippet to illustrate. Sorry for the language-specific solution, but I guess the idea is clear enough to implement in different languages:
$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sStyle."\" />\n";
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension))
$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension."\" />\n";
if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension))
$sHTML .= "\t\t<LINK rel=\"stylesheet\" type=\"text/css\" href=\"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension."\" />\n";
With no missing files, no unrecognized tags or other code that might choke some browsers, the pages from the framework render as we want them to render in all browsers requested by our clients. More importantly, they do so without producing errors (i.e. an empty Error Console in FireFox) which makes debugging when you actually do run into an error a lot easier.
I'd recommend taking a look at Blueprint and 960 Grid System.
Besides doing resets and including CSS fixes for Internet Explorer, they'll both give you an easy to work with design grid that will take care of a lot of the tedious tweaking when building CSS-based layouts.
I usually develop against the W3C CSS validator, then verify things look the way I want them to in the respective browsers. Validating goes a long way toward consistent behavior.
Sometimes I'll strip the page down to only styles that validate and show properly in the major browsers I'm targeting, sometimes I'll supplement it with browser-specific tweaks as other posters have mentioned.
css frameworks certainly help, although they can easily be heavy due to a heap of styles that you won't need or use.
check out
Targeting IE Using Conditional Comments and Just One Stylesheet over at Position is Everything for a great technique to feed IE version-specific styles without using CSS hacks; this allows you to keep style rules together by selector rather than by browser.
You're asking the wrong question, because here's the only way to answer that:
<!DOCTYPE html>
<html>
<head>
<style>* { background: #fff }</style>
</head>
<body></body>
</html>
Not much of an answer, is it? :)
Everyone else is right here - make your CSS work in every browser, don't try to make it look the same. You can't.
Applying the Design Tinfoil Hat
CSS:
*{display:none}