How to Delete Browser Default Settings with CSS

Share!

Almost all browsers have their own default settings for margins, paddings and other elements. And sometimes you may want to override or delete the default settings so your margin or padding is displayed as you need it. When you see your code output, you may be surprised why the margin is there, even though you never specified one. If that’s the case, chances are it’s the browser’s default margin. This tutorial teaches you how to remove default browser settings.

Steps to delete browser default settings with CSS

1. First of all, create an html file. You may use any IDE like notepad or notepad ++ or Adobe Dreamweaver to create an html file. In this tutorial, we are using plain notepad that is available on any Windows PC. Open notepad any type following code:

<html>
<head>
<title>CSS tutorial – 8</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
</head>
<body>
<img src=”boudha.jpg”>
<h1>Welcome to my first page</h1>
<p>In this page, you will find various information</p>
</body>
</html>

And then save the file as .html (eg: tut8.html).

Here,
<link rel=”stylesheet” type=”text/css” href=”css/style.css” /> will link the stylesheet that we are going to create.
<Img src=”boudha.jpg> insert image in our HTML file.
<h1> will add first level heading and <p> will add paragraph.

We are using three different tags (elements) just to check what the default margins are.

How to Delete Browser Default Settings with CSS create html browser default

2. Next, open the html file you have just created in step-1 and check the default margin given. Now we will remove that.

How to Delete Browser Default Settings with CSS check html browser default

3. Next, in the same directory (folder), create another folder named css and create a new css file named as style.css inside css folder. To do that, open notepad and save it as style.css and open the css file and type the following code:

*{
margin:0;
padding:0;
border:0;
}

Here,

This will remove the default margin, padding and border set by the browser.

How to Delete Browser Default Settings with CSS type css browser default

Quite easy, wasn’t it? This completes our tutorial on how to delete browser default settings with CSS. If you’ve found this CSS tutorial helpful or feel like we have omitted something or simply want to add to the discussion on deleting / modifying default browser settings using CSS, please feel free to leave a comment below.

Recommended for you:



3 thoughts on “How to Delete Browser Default Settings with CSS”

  1. Sure it is more complete. But in any case will the new css replace the default one for ever or just in the present session?
    Thanks

  2. Maybe this is a more complete one?

    /* reset */
    html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead,
    article, aside, canvas, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    }

    table, tr, th, td{
    margin:0;
    padding:0;
    border:0;
    outline:0;

    }

    body {
    line-height:1;
    }

    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section {
    display:block;
    }

    nav ul {
    list-style:none;
    }

    blockquote, q {
    quotes:none;
    }

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

    a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    }

    /* change colours to suit your needs */
    ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
    }

    /* change colours to suit your needs */
    mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
    }

    del {
    text-decoration: line-through;
    }

    abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
    }

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

    /* change border colour to suit your needs */
    hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
    }

    input, select {
    vertical-align:middle;
    }

Leave a Reply

Your email address will not be published. Required fields are marked *