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

Who is developing, is aware that CSS is not that easy as is to write down. Is about the experience in the field, skills but sometimes this can turn in an incredible mess, and can make real problem if you are not sure what selectors are applied to the document elements. To make your problem to be slower you can, transform the well known CSS properties and attributes to create a correct markup.

The following article is presenting you CSS ideas, tricks, methods, tips and coding solution. For developing projects we add few basic techniques, but which can be very useful when you are in rush. The result of the article is a sum up that might help you in your CSS coding.

1. Workflow: Debugging

It is important to check for closed elements when debugging “If you ever get frustrated because it seemed like you changed one minor thing, only to have your beautiful holy-grail layout break, it might be because of an unclosed elements.” [Scott.org]

To identify containers add border.” “Use plenty of test styles like extra borders or background colors when building your documents or debugging layout issues. div { border:1px red dashed; } works like a charm. There are also [bookmarklets that apply borders] and do other things for you.”You can also use * div{ border: 1px solid #ff0000; }. [Chric Casciano]. To specific elements you can add a border, that might help to identify overlap and extra white space that might not otherwise be obvious. [CSS Crib Sheet].

1.1 Workflow: Resources

Tips and Tricks. For having a great success in your developing work, start and have time to learn from other’s experience. An HTML site’s source are easy to be seen. You can see how specialists have made hard work to their and then apply to your site. [20 pro tips]

Start and experiment in CSS.“Play. Play with background images. Play with floats.” [Play with positive and negative margins]. Cascading and inheritance rules. [Casciano ]

1.2 Workflow: Star the Work

It is important to have close a CSS classes library. It can be sometimes very helpful for debugging, but can be avoid in release version. Multiple class names can be use ( <p class = “floatLeft alignLeft width75″>…</p>), and try use this to debug your markup. [Richard K. Miller]

When you have made your design, you can start a blank page of content.”Under this rule, there are a number of subrules: if there isn’t a point to adding a CSS property, don’t add it; if you’re not sure why you’re adding a CSS property, don’t add; and if you feel like you’ve added the same property in lots of places, figure out how to add it in only one place (ie. this happens for font, color, background-color, font-size, and width properties all the time.” [CSSing]

Master Styleshee.“One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser…” [CSS Techniques ], [10CSS Tips]

Very Important is to Reset the CSS-style first.” The simple technique of resetting all margins and padding that I mentioned almost a fortnight ago has recently created far more discussion than any previous journal entry. After reading some differing opinions via the original post’s comments, email and the WSG list I think it would be appropriate to take a closer look and cover these points in some detail.” [Global White Space]

1.3 Keep the CSS clean

Flags for your CSS-style. “Working with CSS on my own site’s redesign, freelance work, and my job made me start thinking about the best way to standardize and organize the way I write my CSS. So, I proposed the question to my 9rules friends to collect the best tips from the best designers.” [5 Tips for Organizing Your CSS]

Try and have a table with content to organize your CSS. Cristal as day light, make at the top of your CSS document a table of contents. Outline different aspects that the CSS document is styling. And a section break to separate the areas would be indicated. [5 Steps to CSS Heaven]

Master style sheet to have an organized CSS-style. The CSS can be modeled with the help of the site. Have in mind a master style sheet to start. And the next step is to import in the style sheet your reset.css, flash.css, global.css and obvious structure.css .

Have the style sheet in separate blocks.” I break down my style sheet into three separate blocks. The first is straight element declarations. Change the body, some links styles, some header styles, reset margins and padding on forms, and so on. This is usually a small block as I only like to redefine what I need to. No global margin and padding reset for me. I clear the body and form and maybe adjust paragraph if the design really needs it…don’t have any rules..” [Top CSS Tips]

Move the codes into blocks.“This might be common sense to some of you but sometimes I look at CSS and it’s not broken down into “sections.” It’s easy to do an it makes working with code weeks, months, or years later much easier. You’ll have an easier time finding classes and elements that you need to change..” [CSS tips and tricks]

Have the properties alphabetically, in your CSS-styles. “I don’t know where I got the idea, but I have been alphabetizing my CSS properties for months now, and believe it or not, it makes specific properties much easier to find.”[CSS techniques I use all the time]

1.4 Workflow: Selectors, Classes, IDs,Properties to Handle with

Conatiners to minimum. “Save your document from structural bloat. New developers will use many div’s similar to table cells to achieve layout. Take advantage of the many structural elements to achieve layout. Do not add more div’s. Consider all options before adding additional wrappers (div’s) to achieve an effect when using a little nifty CSS can get you that same desired effect. ” [Pop Art]

Level to properties to minimum.“Under this rule, there are a number of subrules: if there isn’t a point to adding a CSS property, don’t add it; if you’re not sure why you’re adding a CSS property, don’t add; and if you feel like you’ve added the same property in lots of places, figure out how to add it in only one place (ie. this happens for font, color, background-color, font-size, and width properties all the time).” [10CSS tips]

Selectors to minim. “Just specify the minimum number of selectors necessary for the style. If you find yourself doing ul li {...} or table tr td {...} then you’re being more verbose than you need. LI’s will inevitably be in UL’s (okay, I suppose they could find themselves in OL’s, in which case, be more specific for those styles) and a TD will inevitably be in a TR and a TABLE.” [Top CSS Tips ]

Separate single properties that are reuse a lot. ” If you find yourself using a single property a lot, isolate it to save yourself repeating it over and over again and also enabling you to change the display of all parts of the site that use it.” [5 Steps to CSS]

ID’s should be named to their semantics.“So, now that we’re keeping our hooks to a minimum, it’s time for our next step in quality over quantity: naming. We want to avoid names that imply presentational aspects. Otherwise, if we name something right-col, it’s entirely possible that the CSS would change and our “right-col” would end up actually being displayed on the left side of our page. ..” [Digital Web Magazine ]

Apply to utility tags: <small>, <strong>. “After reading “5 Steps To CSS Heaven” over at pingmag.jp, and disagreeing with some of what was said I thought that writing this would be appropriate. I’ve been writing CSS professionally now for about 2.5 years so here are 5 quick tips that help me out in my day to day work. […] [Business ]

Multiple selectors with CSS declaration.“Not using descendant selectors is one of the most common examples of inefficient CSS I see from novice CSS authors. Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient.” [Roger Johanson]

Usual naming for the system. “Having a naming system for id’s and classes saves you a lot of time when looking for bugs, or updating your document. Especially in large CSS documents, things can get a big confusing quickly if your names are all different. I recommend using a parent_child pattern. The parent would be the containing element.” [Christopher Scott]
For developmen use CSS Constants. “While CSS constants are a real help to developers, they can also be used to add new functionality to your applications. As with the email address example that I used at the beginning of this article, using a combination of CSS and server-side scripting you could enable a site administrator to select the colours for a new theme to be used on a page of a content managed site. By using constants you need only give them the option to change certain parts of the CSS and not upload a whole different CSS file, which could lead to some interesting results!” [24ways ]

1.5 Workflow: Short notation

Padding or border, element’s margin must be define in TrouBled-order: Bottom, Left, Top, Right. “When starting out with CSS, it’s common to make the mistake of using unnecessary XHTML elements, superfluous classes, and extra <div> elements. This doesn’t necessarily mean that the code will be invalid, but it counteracts one of the reasons of separating structure from presentation; to get simpler, cleaner markup. ” [Developing With Web Standards ]

Have a small hexadecimal notation.“When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors.” [Tips and tricks]

Name your pseudo classes for urls in Love/Hate order:“While it’s always possible that you have a stupid browser– that’s not really for me to say– it is more often the case that the styles have simply been written in the wrong order. To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. ”

Use shorthand properties. “Using shorthand for these properties can save a lot of space.”[Efficient CSS]

1.6 Workflow: Set the Typography

The html element set it up to 100.01%.” In Listing 16 we have added a default font-size of 100.01%. Once we have set this base size it is easy to make adjustments by scaling off it for each of our individual elements. We might declare a p element to have a font size of 80%, this would be 80% of the value declared on the body element. Similarly we may declare a font size of 135% for an h1 element, this would again scale off the default setting on the body..” [GettingbInto Good Coding]

For line height use 1.4em-1.6em.“I have stuck to some basic but highly important initial settings for text; “line-height:1.4” for readable lines, reasonable line-lengths that avoid lines much longer than 10 words, and colors that provide contrast without being too far apart. For example, pure black on pure white is often too strong for bright CRT displays, so I try to go with an off-white (#fafafa is a good one) and a dark gray (#333333, another good one). ” [CSS Techniques ]

Set font-size on body-tag with 62.5%, so you will work with Em’s as with px’s.“Sacrilege, I know. There are perfectly good ways to get consistent font sizing and I really should use them but Internet Explorer is the only browser that I can think of that doesn’t resize text. If the majority of your audience uses IE, then be nice to them and don’t use pixels. Otherwise, I figure with IE7 supporting it, pixels are the new ems.” [Top CSS Tips ]

Have your text in small-caps automatically. Font-variant is being used to display in a small - caps font, so the lower case letters are converted to upprecase letters.

Define generic font-families.“When we declare a specific font to be used within our design, we are doing so in the hope that the user will have that font installed on their system. If they don’t have the font on their system, then they won’t see it, simple as that. What we need to do is reference fonts that the user will likely have on their machine, such as the ones in the font-family property below. It is important that we finish the list with a generic font type. ” [CSS:Getting into Good Coding]

Modify the capitalisation with CSS.“If you need something written in capitals, such as a headline, rather than rewriting the copy, let CSS do the donkey work. The following code will transform all text with an h1 attribute into all capitals, regardless of format. h1 { text-transform: uppercase; }” [20 pro tips]

For encoding use universal Characters.“..The answer is to use a single universal character set that’s able to cover most eventualities. Luckily one exists: UTF-8, which is based on Unicode. Unicode is an industry standard that’s designed to enable text and symbols from all languages to be consistently represented and manipulated by computers. UTF- 8 is rapidly becoming the charset definition of choice, and should be included in your web page’s..” [20 pro tips ]

2. Technical Informations : IDs, Classes

For a given element is possible to assign multiple class names. “You can assign multiple class names to an element. This allows you to write several rules that define different properties, and only apply them as needed. Let’s assume you’re marking up an image gallery that contains some images that are royalty free and some that are not.” [CSS tips and tricks]

Names selectors - case sensitive. “When CSS is used with XHTML, element names in selectors are case sensitive. To avoid getting caught by this I recommend always using lowercase for element names in CSS selectors…”[Roger Johansson]

Many classes per page.““Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Developing with Web standards]

2.1 Technical Info: The power of selectors

Selector matches all, elements which has all attribute :

When there are more selectors they can be used in the same selector. So, several different attributes can be match for the same element.

All div elements are being match by the selector that has a class attribute withe the error value :

There are allows adjacent sibling selectors. “A descendant selector is made up of two or more simple selectors separated by whitespace. It matches elements that are descendants of an element that matches the first simple selector.” [CSS 2.1 selectors]

Child selectors are allow.“A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. ” [CSS 2.1 selectors]

USE Attribute selectors. These are matching elements based on value or presence of attributes. There are more ways to match attribute selector:

2.2 Technical Info: CSS-Technicals

Align vertically with CSS. “Vertically aligning with tables was a doddle. To make cell content line up in the middle of a cell you would use vertical-align: middle. This doesn’t really work with a CSS layout. Say you have a navigation menu item whose height is assigned 2em and you insert this vertical align command into the CSS rule. It basically won’t make a difference and the text will be pushed to the top of the box…” [Ten CSS tricks ]

For a dynamically content use pseudo-elements and classes. “Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content. ” [Pseudo-classes]

Have columns with equal heights with CSS.” Because equal height columns are a perfectly reasonable design goal. And the even more astute disciple will be nodding sagely, ruminating over the problems that flow from faux columns.” [Equal Height Columns]

For separating post nice set <hr>. “Restyling the horizontal rule (<hr>) with an image can be a beautiful addition to a web page .” [CSS Best Practice]

For centering horizontally the layout, use margin : 0 auto.

To padding set width OR margin.“My rule of thumb is, if I set a width, I don’t set margin or padding. Likewise, if I’m setting a margin or padding, I 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. ” [Padding set width]

Do not apply padding/borders and fixed width to an element. “IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it’s best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width. ” [Not apply padding ]

Print style. Add print stylesheet in the same way you add regular to your page.

For every page - use the same navigation (X)HTML.” Most Websites highlight the navigation item relating to each user’s location within the Website, to help users orientate themselves. This is a fundamental requirement for basic usability, but it can be a pain: we need to tweak the HTML code behind the navigation for each and every page. Can we have the best of both worlds? Is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on every page?..” [My Top Ten CSS]

Insert an id into the <body> tag..

From older browsers hide your CSS. “As I stated in my recent article on CSS shorthand properties, I get a lot of questions about CSS from people who haven’t spent quite as much time working with CSS as I have. ” [CSS tips and tricks]

CSS-styling to RSS-feeds adds. “You can do a lot more with an XSL stylesheet (turn links into clickable links, etc), but CSS can make your feed look much less scary for the non-technical crowd. And the good news is you probably already know CSS, so setting one up is trivial…” [Adding a CSS Styling ]

2.3 Technical Info: IE

min-width and max-width can be define in IE.

Transparance to PNGs trough IE. “However, with GIF files this only worked on a background of a static color, because you have to decide beforehand into which color you want to blend those pixels. In theory, PNG files do support varied levels of transparency; however, an Internet Explorer 6 bug prevents this from working cross-browser ..”
[CSS Tips ]

ReSources

Handy CSS - Lachy’s

CSS Crib Sheet - Dave Shea

10 Quick Tips for an Easier CSS Life - Paul OB

CSS Organization -  Douglas Bowman

15 CSS Properties You Probably never use -  SeoMoz

Top CSS Tips - Snook

Web Design References - Laura.b

Ten CSS Tricks - Tantek.C