Search

Loading

Sabtu, 26 Juni 2010

Web Design Tips: Using CSS Reset

At this time my css tutorial will discuss Web Design Tips. It has become common knowledge that if each Internet browser has its own innate style, as for example the default margin or padding by default in Internet Explorer that have different values with Mozilla Firefox or Chrome, another example, the default unordered list's Internet Explorer has a different style with the style on firefox. So that a web design is often bothered by this, normally a web designer using javascript to detect what browser you use, then if the user uses the Internet browser javascript stylenya match with the file containing the special style for internet explorer, as well as mozilla firefox and other browsers , stylenya file is also different. It's really inconvenient because we have to create different styles for different browsers. But the results are very good.


Authors themselves originally did, indeed troublesome. But lately the use of CSS Reseter increasingly popular use, because its function is as good as using the files that contain a different style to adjust to the browsers. In a style matching technique, when users use the internet explorer then the style used by ie.css was usually called, if the user uses the style used firefox then usually called the default.css, and so forth, in a reset css techniques, we just use only one css file, but add a line code that can reset the css conditions, so the browser does not have a default value of the style-there style. Alias 0 (null).

Here is a css reset commonly used:

/* RESET */

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, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,



fieldset, form, label, legend,



table, caption, tbody, tfoot, thead, tr, th, td {



margin: 0;



padding: 0;



outline: 0;



font-size: 100%;



vertical-align: baseline;



background: transparent;



height: auto;



border-top-width: 0;



border-bottom-width: 0;



border-left-width: 0;



}



blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}



blockquote, q {quotes: none;}

:focus {outline: 0;}

.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}

ins {text-decoration: none;}

del {text-decoration: line-through;}

table {border-collapse: collapse;border-spacing: 0;}

ol, ul {list-style: none;}

body {background-color: white;background-position: center center;}

/* RESET */

Actually there is some reset technique used in web design. You no longer bothered by the differences between Internet Explorer Layout view with Mozilla Firefox or another. So the result will display in firefox css also similar to the display using other internet browsers.

Good luck.
http://www.ilmuwebsite.com

2 komentar:

  1. It is good to see this information in your post. Thanks for bringing this up, such great information to share with.
    web design company philippines

    BalasHapus
  2. I was impressed with your post. I find it incredible and well studied. Big thanks and keep sharing.


    web design Philippines

    BalasHapus