The CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why CSS-rules don’t apply to some elements, although they should have.

1. Specificity determines, which CSS rule is applied by the browsers.
2. Every selector has its place in the specificity hierarchy.
3. If two selectors apply to the same element, the one with higher specificity wins.
4. There are four distinct categories which define the specificity level of a given selector: inline styles, IDs, classes, attributes, and elements.

How to measure specificity?

“Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element. So in the specificity value would be 122 (0,1,2,2 or 0122): 100 for #content, 10 for .data, 10 for :hover, 1 for body and 1 for img.”

The post WHAT IS SPECIFICITY IN CSS3? appeared first on Pro-Tek Blog.

Yes, we can combine background and CSS3 by using linear-gradient and radial gradients types. Where rgb values varies the background CSS3 Gradients are compatible with only newer version of browsers

Example: Chrome>26.0 version and IE>10.0
 
 
 
 
 
 
 

The post IS IT POSSIBLE TO COMBINE A BACKGROUND IMAGE AND CSS3 GRADIENTS? appeared first on Pro-Tek Blog.