15 CSS Great Tips For Beginners

In the past, there was a lot of dependence on developers and programmers to help in updating the website, even when it’s simply a minor one. Owing to CSS and it’s flexibility, styles can be extracted independently away from the codes. And with certain basic understanding of CSS, even a novice can easily modify the style of a website.  here are some basic tips in CSS that might be useful for beginners - 1.Using reset.css - Whenever it comes to rendering CSS styles, browsers including Firefox and Internet Explorer have different ways of handling them. reset.css resets all basic, so you begin with a real blank new stylesheet. Some of the commonly used reset.css frameworks are – Yahoo Reset CSS, Eric Meyer’s CSS Reset, Tripoli 2.Usings shorthand CSS - Shorthand CSS offers you a short way of writing your CSS codes, and most importantly it makes the code clearer and easier to comprehend. In place of making CSS like this - View plaincopy to clipboardprint? 1. header { 2. background-color: #fff; 3.background-image: url(image.gif); 4.background-repeat: no-repeat; 5.background-position: top left;  6. }  It can be short-handed into the following: View plaincopy to clipboardprint? 1. .header { 2. background: #fff url(image.gif) no-repeat top left 3. }  3.Understanding Class and ID - These two selectors often end up confusing beginners. In CSS, class is symbolized by a dot "." while id is a hash ‘#". In essence id is used on style which is unique and doesn’t repeat itself, class on the other side, can be re-used. 4.Power of - a.k.a link list, is quite useful when used correctly with or , particulary for styling a navigation menu. 5.Forget , try - The chief advantage of CSS is the use of for achieving total flexibility in terms of styling. are unlike , where contents are ‘locked’ within a ‘s cell. It can be said that most layouts are achieved by utilizing and proper styling except for huge massive tabular contents. 6.CSS Debugging Tools - It’s always great to get quick preview of the layout while tweaking the CSS, it assist in knowing and debugging CSS styles in a better manner. Here are some free CSS debugging tools that can be installed on your browser: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, and Firebug. 7.Avoiding Superfluous Selectors – At times, your CSS declaration can be simple, if you find yourself coding the following: o 1. ul li { ... } o 1. ol li { ... } o 1. table tr td { ... } You can simplify this down to - o 1. li { ... } o 1. td { ... } Explanation: will only exist inside or and and will only be inside so there’s really not necessary to re-insert them. 8.Knowing !important - Any style that is marked with !important will be put into use irrespective of an overwriting rule below it. view plaincopy to clipboardprint? 1. .page { background-color:blue !important; background-color:red; } In the example given above, background-color:blue will be adapted as 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. 9.Replacing Text with Image - This is commonly used for replacing title from a text based title to an image. This is the way to do it. view plaincopy to clipboardprint? 1. h1 { 2. text-indent:-9999px; 3. background:url("title.jpg") no-repeat; 4. width:100px; 5. height:50px; 6. } Explanation: text-indent:-9999px; throws your text title off screen, taken over by an image declared by background: {...} with a fixed width and height. 10.Understanding CSS Positioning – You can go to the link below for getting a clear understanding for using CSS positioning – position: {...} Learn CSS Positioning in Ten Steps 11.CSS @import vs There are two ways for calling an external CSS file. By using @import and . 12.Creating Forms in CSS - Web forms can be easily designed and customized using CSS. 13.Get Inspired – In case you are looking for well designed CSS-based website for inspiration, or just browsing to look for some good UI, here are some CSS showcase sites: CSS Remix CSS Reboot CSS Beauty CSS Elite CSS Mania CSS Leak 14.Rounded Corners in CSS – For gaining an idea on how to create cross-browser compatible rounded borders with CSS, you can go to - Rounded Corners in CSS 15.Keeping CSS Codes Clean – In case your CSS codes are messy, you will end up coding in confusion and have a hard time referring the previous code. For beginners, you can make proper indentation, comment them properly.