CSS HTML basic tips for beginners
Posted By : Jitender Kumar | 31-Dec-2014
CSS/HTML basic Tips that a beginner must know:
Re-Defining HTML Tags:
Mostly every HTML tag has default browser style connected with itself.
Take <em> tag, for example: its inherent style declaration is the equivalent of font-style: italic.
We can change the behavior of emphasized tag by adding new CSS declaration to emphasized HTML selector.
Reusable Classes:
We must follow DRY rule in css that allows us to set up an independent style for any HTML tag unlike an HTML selector which automatically directs a specific tag.
Defining Unique IDs:
The ID selector can be used to apply particular styles to any particular HTML tag.
Basically IDs are used to create structure of any page layout. One ID should be used only once in a page.
Here are some general tips:
1. Keep your stylesheet simple.
2.Write your stylesheet declarations in one line.
for e.g. -
p{ color:#ffffff; font-size:12px; text-decoration:underline;}
3.Use stylesheet shorthand.
for e.g. -
padding:1px 2px 3px 4px;
is shorthand for
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;
4.Allow block level elements to occupy space naturally.
5.Assign a float to clear a float.
6.Use stylesheet to center layouts.
7.Use the right DOCTYPE Declaration.
8.Use grouping of selectors in CSS.
for e.g. -
p,a{ color:#000; font-size:12px;}
9.Always use margins in descending order in CSS. Mostly we should use margin-bottom only.
10.We must validate our CSS through W3 validation.
11.Use Box Model, CSS elements act as a box with a width, a height, and including padding, margins and borders in box model. We can choose border-box, content-box, padding-box.
12.Use specific HTML5 tags for particular part of layout such as use <header> tag for header part rather than using <div>.
13.Less use of '!important' in CSS to override stylesheet code.
14.Less use of inline CSS in HTML code.
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Jitender Kumar
Jitender is a seasoned UI Developer having excellent experience in building responsive web sites UI using HTML5, CSS3, SASS, jQuery and AngularJS. He is capable to make a Creative and Intuitive UI Designs with his innovative ideas.