Thegeeknotes.com

Important CSS Tips

Whether you are interested in picking up CSS to create your own website, or merely to tweak your blog’s look this article would be useful for you. In the old days, we depend a lot of on developers and programmers to help update the website, even when it’s just a minor one. But nowadays with CSS styles can be extract independently away from the codes. Even a novice can easily change the style of a website with basic knowledge of CSS.

• These two selectors often confuse beginners. In CSS, class is represented by a dot “.” while id is a hash ‘#”. In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use.

• Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes the code clearner and easier to understand.

Instead of creating CSS like this

.header {

      background-color: #fff;

      background-image: url(image.gif);

      background-repeat: no-repeat;

      background-position: top left;

    }

It can be short-handed into the following:

.header {

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

    }

• When it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them. reset.css resets all fundamental styles, so you starts with a real blank new style sheets.

• There are few media types when you declare CSS with <link>. print, projection and screen are few of the commonly used types. Understanding and using them in proper ways allow better user accessibility.

• Dedicated editors are always better than a notepad. Here are some we recommend:

Simple CSS, Notepad ++

• We all know each browser has different ways of rendering CSS styles. It’s good to have a reference, a chart or a list that shows the entire CSS compatibility for each browser.

• This is commonly practice to replace <h1>title</h1> from a text based title to an image. Here are the steps

h1 {

text-indent:-9999px;

background:url("title.jpg") no-repeat;

width:100px;

height:50px;

}

Explanation: text-indent:-9999px; throws your text title off screen, replaced by an image declared by background: {...} with a fixed width and height.

• Any style marked with !important will be taken into use regardlessly if there’s a overwriting rule below it.

.page { background-color:blue !important;     background-color:red;}

In the example above, background-color:blue will be adapted because it’s marked with !important, even when there’s a background-color:red; below it. !important is used in situation where you want to force a style without something overwriting it, however it may not work in Internet Explorer.

• Sometimes your CSS declaration can be simpler, meaning if you find yourself coding the following:

·                ul li { ... }

·                ol li { ... }

·                table tr td { ... }

They can be shorten down to just

·                li { ... }

·                td { ... }

Explanation: <li> will only exist within <ul> or <ol> and <td> will only be inside <tr> and <table> so there’s really not necessary to re-insert them.

• It’s always good to get instant preview of the layout while tweaking the CSS, it helps understanding and debugging CSS styles better.

• One of the greatest advantage of CSS is the use of <div> to achieve total flexibility in terms of styling. <div> are unlike <table>, where contents are ‘locked’ within a <td>’s cell. It’s safe to say most <table> layouts are achievable with the use of <div> and proper styling, well maybe except massive tabular contents.

• <li> a.k.a link list, is very useful when they are use correctly with <ol> or <ul>, particularly to style a navigation menu.

• o change an element’s status you can use display: inline or display: block. But what’s the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this, but in actual fact this is a very powerful technique, which you can use any time you want to:

1. Have a block element start on the same line
2. Have an inline element start on a new line
3. Control the width of an inline element (particularly useful for navigation links)
4. Set a background color as wide as the text for block elements, without having to specify a width
5. Manipulate the height of an inline element

• There is simple Rule, if you set a width, You don’t set margin or padding. Likewise, if You are setting a margin or padding, You don’t set a width. Dealing with the box model can be such a pain, especially if you’re dealing with percentages. Therefore, I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly.