Improving your CSS skills and its Usability

1. Layout your designs with CSS, not tables, CSS downloads quicker than tables because:
Browsers read through tables twice before showing their contents, once to work out their structure and once to decide their substance& Tables show up on the screen across the board go – no part of the table will show up until the whole table is downloaded and rendered Tables support the use of spacer pictures to help with positioning CSS by and large requires less code than unwieldy tables All code to do with the design can be put in an outside CSS document, which will be called up just once and afterward reserved (stored) on the user’s computer; table layout, stored in every HTML record, must be loaded up each time another page downloads With CSS you can control the request things download on to the screen – make the content show up before slow-loading pictures and your website clients will welcome it

2. Call up improving pictures through CSS. It’s possible to introduce pictures as part of the background, called up through CSS. If you have a picture that is 200px by 100px you can utilize the accompanying HTML code: 

And this CSS:
.attractive-image { background: URL(filename.gif); width: 200px; height: 100px }
This may at first appear a little pointless but this technique could increase the download time of your pages. Browsers download background pictures in the wake of everything else. By utilizing this strategy, your text will load immediately and your website clients can freely roam about the page while your 50kb extravagant picture downloads.

This procedure disables the ALT characteristic however so on the off chance that you truly need to have one, replace the above HTML code with this: 

Spacer.gif is a 1px x 1px transparent image. Presently you have a 50-byte transparent picture and the main content loading first, and your incredible huge beautiful picture, total with ALT content, loading second. Perfect.

Please note that this technique is only good for improving images and not instructive ones. Any user who has CSS disabled won't most likely observe your CSS-embedded images (or their alternative content).

3. Use logical selectors, This is inefficient:

This is a sentence
This is another sentence
This is yet another sentence
This is an additional sentence
.text { color: #03ceee; font-size: 2em }

Rather than allotting a value to every individual section, we can settle them inside a <div> tag and assign a value to this tag:

This second CSS precedent essentially says that each paragraph inside class=” text” should be assigned a color value of #03c and a font size of 2em.

At first look, this doesn’t look too imperative, however, if you can apply this appropriately all through the document you can without much of a stretch knock off 20% of the file size. 

You may have seen the color values are shorter than typical. #03c is a shortened version of #0033cc – you can relegate this abbreviated value to any color value like this.

4. Utilize shorthand CSS properties

Font
Use:

font: 1em/1.5em bold italic serif

…instead of

font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif

Border
Use:

border: 1px black solid

…instead of

border-width: 1px; border-color: black; border-style: solid

Background
Use:

background: #fff url(bg-image.gif) no-repeat top left

…instead of

background-color: #fff; background-image: url(bg-image.gif); background-repeat: no-repeat; background-position: top left;

Margin, padding, border
Use:

margin: 2px 4px 2px 4px (top, right, bottom, left)
…instead of

margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-right: 4px

Use:

margin: 5em 1em 3em (top, left and right, bottom)
…instead of

margin-top: 5em; margin-bottom: 1em; margin-right: 1em; margin-right: 4em

Use:

margin: 5% 2% (top and bottom, left and right)
…instead of

margin-top: 5%; margin-bottom: 5%; margin-right: 1%; margin-right: 1%

5. Minimise white space, line returns, and remark tags

Each and every letter or space in your HTML code takes up one byte. It doesn’t seem like much yet everything includes. We’ve discovered that by working through your page source and eliminating unnecessary blank space and remarks, you can shave off up to, or even finished (if your HTML is extremely wasteful) 10% of its file size.

6. Utilize relative call-ups

Try to avoid exact call-ups as they consume up more space. An example of an exact call-up is: <a href=”http://www.URL.com/filename.htm”>. Much better would be <a href=”filename.htm”>. Be that as it may, consider the possibility that some files are in various folders to different ones. Use these shorthand properties:

 – Calls up http://www.URL.com
 – Calls up http://www.URL.com/filename.html
 – Calls up http://www.URL.com/directory/filename.html
 – Calls up index.html within that directory
 – Calls up index.html one directory above
 – Calls up filename.html one directory above
 – Calls up index.html two directories above

Thanks