World is Welcome To The World of Linux

Journey into the world of linux

Menu
  • About
  • Welcome
Menu

Five Great Tips For Designing CSS

Posted on May 29, 2010 by Ganesh Sharma

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Five Great Tips while designing CSS

While designing the CSS , keep in mind the following tips and these will be really helpful ….

  • Avoiding changing the default font size

Try to avoid specifying the body font size. Don’t do this, for example:

body {font-size: 24px;}

People have set their browser’s option to a text size that’s readable for    them. We don’t know whether they’ve got a pixel resolution of 1680×1050 or 800×600 pixels. It makes a difference.

  • Making Sure Your Borders Show Up
p {border: 12px;}

In spite of this rule that according to above example, no border shows up around the paragraphs.

We’d logically think that by specifying a border size, we’d see a border. Not so. Unless we also specify a border style, we don’t get a border. The default style is none, so change it to include a style:

p {style: solid ;  border : 12px;}
  • Watching Out for Color Clash

What if we specify a text color, but fail to specify a background color? sounds harmless, but it can be a problem. Some users employ personal style sheets, including their favorite colors. What happens if a user specifies brown for their backgrounds and white for their text? Say that you specify brown for your text:

BODY {color: brown;}

The user won’t see your text at all because their background color and your foreground (text) color are identical. The solution? Always specify a background If we’re going to color the text. Then you have control over how the text looks against that background:

BODY {color: brown; background-color: yellow;}
  • Centering for Everyone

Centering elements on a Web page still isn’t quite solved. It’s a common

enough task — we want some things centered on the page, such as certain kinds of titles and headlines. But how to do it?

One method is to put an element inside a div, and then center the div

(this works in Netscape or Mozilla or Firefox and so on, but not in Internet Explorer). Setting a div’s margin to zero and auto, you effectively center it in all browsers except IE

<div style=”width: 400px; background-color: lightblue; padding: 4px; margin: 0px auto;”>

To center something in IE, you can use text-align=center (which is

frowned upon by non-IE types):

<div style=”text-align:center;”>

The solution? Make everybody happy by wrapping a div with the 0px auto

inside another div with text-align set to center, like this:

<html>

<head>

<style>

</style>

</head>

<body>

<div style=”text-align:center;”>

<div style=”background-color: lightblue; width: 400px;

padding: 4px; margin: 0px auto;”>

<p>HERE I am...

</div></div>

</body>

</html>
  • Using Your Own Bullets in Lists

With CSS, designing custom bullets in a graphics program and then assigning

them to list items is easy. The following code produces the result shown in

<HTML>

<HEAD>

<style>

ul { list-style-image: url(“mybullet.jpg”); font: 32px; }

</style>

</HEAD>

<body>

<ul>

<li>first

<li>second

<li>third

</ul>

</body>

</html>

Good Luck !!!!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • Date Command Tutorial(Video)
  • grep Command Tutorial – 1(Video)
  • Introduction To ls Command(Video)
  • Chapter 3
  • Set Position Of Poll Module Into Joomla

Recent Comments

  • Kansas City Trailer Proz on Physical Volume In AIX – A Primer
  • Create volume group in AIX | myunixsheet on How To Create Volume Group
  • Restore of AIX backup on other Unix system - TecHub on What is mksysb And What Are Its Components
  • Firewall Unleashed - InfoSec Institute on Packet Filtering Firewall: An Introduction
  • Manwendra on Proxy Firewall and Gateway Firewall: Introduction

Archives

  • January 2019
  • June 2010
  • May 2010
  • February 2010
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008

Categories

  • 30 Days To Joomla WebSite Setup
  • A Journey To The World of Linux System Administration
  • Aix
  • Backups
  • Books
  • Firewalls
  • Introduction
  • Joomla
  • Joomla Backup
  • Joomla Web Technology
  • Linux
  • LPAR and Virtualization
  • LVM
  • Pluggable Authentication Modules
  • section navigator pro
  • Security
  • Security Knowledge Base
  • Tips and Tricks
  • Uncategorized
  • World is Welcome Products

Meta

  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org
©2023 World is Welcome To The World of Linux | WordPress Theme by SuperbThemes