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

About Author

Author Image
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.

Request for Proposal

Name is required

Comment is required

Sending message..