Definition of Specificity

In short words Specificity determines on which CSS rules is being applied by browser. “Specificity is a type of weighting that has a bearing on how your cascading style sheet (CSS) rules are displayed.”[Understand Specificity]

All selectors have their specificity. “All rules in your style sheet carry a specificity rating regardless of selector type, although the weighting that is given to each selector type varies and will ultimately affect the styling of your web documents.”[Understanding Specificity]

Selector specificity is a process used to determine which rules take precedence in CSS when several rules could be applied to the same element in markup. It’s a simple enough process, but has caught out a lot of developers at some point in their career. [Selector Specificity]

Principles

• Unequal specificity: “A selector can contain one or more reference points, the greater the specificity rating of these reference points the more specific your rule is.” [Understanding Specificity]

For a while CSS is no longer something that represents what we call ‘unknown’. The following so called article/tutorial will teach you what CSS is and what it can do for you. So CSS is an acronym for Cascading Style Sheets.

What can we do with CSS ?

Simple and with no more other introduction, CSS is the language that defines layout of HTML documents. CSS is covering lines, height, width, fonts, margins, advanced and other things.

HTML is being used to add layout to a website. CSS offers a great and large gamut of option and is more accurate and sophisticated. All the browsers are supporting CSS today.

There is a difference between CSS and HTML ?

First HTML is being used to structure content, and CSS for formatting structured content. The composition may sound lit bit mechanical though in few seconds we will show you the difference.
Back, in the early times when world wide web was just at the beginning , HTML was used just to add structure to text. Everyone could use HTML tags like <h1> and <p> just to mark the text.

Slowly the world wide web gained popularity and to make look better the layout for the online document, HTML was upgrade, especially the tags, was add such as <font> which was lit bit differed from the original.

So some situation where led, by this HTML upgrade, and the original tags where misused to layout pages instead of adding structure to text. And some browsers where not supporting some tags.

So, here was invented CSS to repair the situation and to provide to web designers a sophisticated and large gamut of opportunities to change the layout, which was supported by all browsers.

Benefits of CSS

It is used for web designing. The benefits include :

• permanent control of the layout to document from a style sheet; (more if necessary)
• more control of layout;
• possibility to apply different layout to media-types.
• techniques and advantages.

Also if you are looking better at the theory you will see that it is not such hard at it appears to be. The big problems are made by the previous versions of I.E. If you are very PRO and know the bugs, you can control the information in way that is presented more sophisticated.

Trough this article we try to make things more easy and clarify them, for the floats that are being used. The results that we present here are more related articles and selected from important CSS-based layouts wit floats.

Tips about Floats

“A floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content can flow down the right side of a left-floated box and down the left side of a right-floated box.” Floatutorial

“A line box is an imaginary rectangle that contains all the inline boxes that make up a line in the containing block-level element. It is (at least) as tall as its tallest line box.” Float Layouts

“In order to really understand float theory you have to understand what a line box means in CSS. Unfortunately, that in turn requires you to understand what is meant by an inline box, which is way too complicated to explain in any detail here. If you’re interested (and slightly masochistic) you can try to decipher the explanation in” w3.org

“If we enclose each column in a DIV element with float:left they will appear side by side, just as we expect columns
to do. If we then want a full-width footer to be shown at the bottom, no matter which column happens to be longest, we only need to set clear:both on it.” Float Layouts

“If floats are to be used in creating non-table layouts, then there needs to be a way to make their containing elements stretch around them. At present, this requires a bit of a structural hack. Since we want the bottom of the containing element to be placed clear past the bottom of the float, then clear is our answer. We need only insert a block-level element just before the end of the container, and clear it.” Containing Floats

“When an element specifies position:relative; it is initially positioned following the normal flow rules. Surrounding boxes are positioned accordingly. Then, the box is moved according to its offset properties.” CSS Positioning

“A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.” Float Tutorial

“A floated box must have an explicit width (assigned via the ‘width’ property, or its intrinsic width in the case of replaced elements). Any floated box becomes a block box that is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. The top of the floated box is aligned with the top of the current line box (or bottom of the preceding block box if no line box exists). If there isn’t enough horizontal room on the current line for the float, it is shifted downward, line by line, until a line has room for it.” Visual formatting model

” There are a few things you should note regarding floated boxes. For one, the box being floated should have a width defined for it, either explicitly or implicitly. Otherwise, it will fill its containing block horizontally, just like non-floated content, leaving no room for other content to flow around it. As such, floated boxes are always treated as block boxes, even if they are defined using inline elements.” CSS Positioning

Float Bugs

” A problem can arise if the text beside an image is not long enough to wrap around it. In this case, the next image could potentially float up into this space beneath the text, instead of sitting directly beneath the previous floated image.” Close gaps Next to Floated Images in I.E

” When a float is contained within a container box that has a visible border or background, that float does not automatically force the container’s bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag. Those familiar only with Explorer for Windows may scratch their heads and say “That’s not right!” True, IE/Win does enclose a float within a container ‘automatically’, but only if the container element has a stated dimension, and in any case it’s a W3C spec violation. This illegal behavior can also be ‘toggled’ on and off by links within the container, if ‘hovering’ alters the link background or several other properties.” Cleaning a Float container without Structural Map

” Most of the CSS sits in a style block in the header of this page, but where I alter the styles to demonstrate the bug I’ve put the changes in-line so they’ll be easy to find, and there are obvious comments in the source at the beginning of each example to make it even easier.” Margin Bugs

” div#floatholder (dotted border) is dimensioned horizontally by margins, and vertically by content. div#float (thick brown border) is floated left, and contains a test link. Following that are several lines of bare text, alternating with divs containing more text, plus test links. Next is a cleared div (purple border), then another div for good measure.”

“apparently IE is adding 3px of space to the end of the line boxes in this demo if they touch the float. Now cast your eyes down to the bottom of the test box. Observe how the 3px space is evident even tho the red bordered box (#jog-box) is left margined far enough to separate it from the float. This means that the added ’space’ is applied to the line boxes that are adjacent to a float, not just to ones that are touching the float.” IE6 Three Pixel Gap

“This test case demonstrates a problem with Safari 1.3 and 2.0. Using a combination of float and negative margins on an element makes any links in the element unclickable. Text also becomes very difficult to select, and if you tab through the links they disappear when they lose focus. A workaround, as demonstrated in test case 2, is to add position:relative to the CSS declaration for any floated elements with negative margins.” Float + negative margin bug in Safari

” Internet Explorer 6 has a puzzling bug involving multiple floated elements; text characters from the last of the floated elements are sometimes duplicated below the last float. This bug is a real headbanger because there seems to be nothing triggering it. However, by now everyone should know that IE needs no excuse to misbehave.” IE Duplicate Characters Bug

“In Explorer for Windows there are two display errors. One, the container is only containing the last line of floats , and the floats are also running off to the right, all the way to the right screen edge! Take it from me, folks, that is not kosher.” Escaping Floats Bug

Clear the floats

” When a float is contained within a container box that has a visible border or background, that float does not automatically force the container’s bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag.” Clearing a float container

“Elements following a floated element will wrap around the floated element. If you do not want this to occur, you can apply the “clear” property to these following elements. The four options are “clear: left”, “clear: right”, “clear: both” or “clear: none”.” Float Tutorial

“A common problem with float-based layouts is that the floats’ container doesn’t want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you’ll have to command the browsers somehow to stretch up the container all the way.” Clearing Floats

” We want the black border to go around both our floating columns. That doesn’t happen, though. The container div itself has no height, since it only contains floating elements. Therefore the border stubbornly stays at the top of the floating columns.”

” When using floats in CSS, without a doubt you have encountered the interesting effects it will have on the following content. Here I will show you different ways to clear floats without any extra mark-up.” How to clear CSS floats