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.
2. Next, open the html file you have just created in step-1 and check the default margin given. Now we will remove that.
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.
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.
The post How to Delete Browser Default Settings with CSS appeared first on Web Design Blog | Magazine for Designers.
How to Delete Browser Default Settings with CSS
Geen opmerkingen:
Een reactie posten