Cascading Style Sheets (CSS) is the style sheet used to define the HTML elements. This can be also applied to any kind of XML document, including plain XML, SVG and XUL. These styles are normally saved in external .css files. These external style sheets can save lot of your time while editing the layouts of all the pages in a website.
Here are some important and useful CSS tips and tricks that can be helpful for developers.
1. Use reset.Css
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 stylesheets.
2. Use Shorthand CSS
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
It can be short-handed into the following:
3. Understanding Class And ID
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.
4. Forget <Table>, Try <Div>
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.
5. CSS Debugging Tools
It’s always good to get instant preview of the layout while tweaking the CSS, it helps understanding and debugging CSS styles better. Here are some free CSS debugging tools you can install on your browser: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, and Firebug.
6. Knowing !Important
Any style marked with !important will be taken into use regardlessly if there’s a overwriting rule below it.
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.
7. CSS @Import Vs <Link>
There are 2 ways to call an external CSS file – respectively using @import and <link>. If you are uncertain which method to use, here’s few articles to help you decide.
8. Typography Measurement: Px Vs Em
Having problem choosing when to use measurement unit px or em? These following articles might give you a better understanding on the typography units.
9. Understanding Media Types
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. The following article explains how to deal with CSS Media types.
10. Keep CSS Codes Clean
We have some CSS that has snuck into our <head> section. This is a grievous foul because not only does it muddy our markup but it can only apply to this single HTML page. Keeping your CSS files separate means that future pages can link to them and use the same code, so changing the design on multiple pages becomes easy.
No comments:
Post a Comment