Most of time we become scary while designing our webpages. We may not have color coding matching, may not be getting good box model or correct offset width or a responsive css design etc. Many of us use some third party websites to edit our HTML, CSS and Javascript codings such as www.jsfiddle.net, www.codepen.io etc. But what if you get this through your Firefox browser with efficient editing. So here is a tutorial which will guide you to design your webpage through Firefox developer tool.
Editing through Firefox Developer Tool.
- First create your html page such as index.html or simply put the following code to a notepad and save it as index.html.
- Codes:- <html><head><title>Your Title</title><link href="default.css" rel="stylesheet" type="text/css"/></head><body><div id="header"></div></body></html>
- Here 'main.css' is your default CSS file which you can create by saving a notepad as 'main.css'.
- In the html code I've created a div element with id="header". I need to design this header in CSS code. In the CSS file I wrote a style or rule for id header as below-
- Code:- #header{margin:auto; width:auto; height:150px; background-color:blue;}
- Now open the index.html file in Firefox browser it will look like as above picture. Then right click on the blue header section and click on inspect element. In this I'm going to change the header height to 100px and color similar to the browser's menu bar color.
- Now change the height to 100px and click on the blue color so that one color pallet box will come out
- Next click on color picker brush and one rounded color picker will come out. Then move the rounded color picker to the menu bar of your browser and click there.
- Now the header color will be changed to menu bar color. Next right click on css style and copy rule. Then go to your main.css file and paste there.
- Now your new webpage is ready with modified header. Similarly you can modify or create many beautiful css styles with the help of Mozilla Firefox Developers Tool.
No comments:
Post a Comment