tags:

views:

108

answers:

6

hello all,

Im trying to figure this out, please consider these styles:

.text_left
{
text-align:left;
}

.text_right
{
text-align:right;
}

.text_cen
{
text-align:center;
}

.form_container_header
{

width:95%;
margin-left: auto ;  
margin-right: auto ;
margin-bottom:35px;
text-align:center;
}

Now , when I apply these styles to my DIV like so:

<div class="form_container_header text_left">

Can someone explain to me why The content of the DIV is centered and not left aligned?

BUT when I move the "text_left" class below the "form_container_header" class in the style sheet it then left aligns?

thank you

+1  A: 

My call would be because .form_container_header is defined at the end of the file, the last defined has priority (it's not the only priority rule, but in this case that's the one being applied)

Edit: this is how I'd do it (removed text-align definition in form_container)

.text_left
{
text-align:left;
}

.text_right
{
text-align:right;
}

.text_cen
{
text-align:center;
}

.form_container_header
{

width:95%;
margin-left: auto ;  
margin-right: auto ;
margin-bottom:35px;

}

<div class="form_container_header text_left">

EDIT 2: All this is called the CSS cascade. You can find a reference here : http://www.w3.org/TR/CSS2/cascade.html and a cool article here http://reference.sitepoint.com/css/cascade

marcgg
wow, that is really interesting, this would mean any single overriding style that is defined at the top of my style sheet would be useless....
this is how CSS works, I'm sorry if you don't like it but that's not my fault
marcgg
hey no need to be sorry, im just learning so some of these things come as a suprise
I edited my answer to include more information
marcgg
think of it like this chicane: start with the most general rules at top, and then write exceptions to the rules as you go down. It's all part of the learning curve.
jacobangel
+2  A: 

When you write a style like "text_left", you might want to use !important. This will override any other styles that set that value.

The following works.


.text_left
{
text-align:left !important;
}

.text_right
{
text-align:right !important;
}

.text_cen
{
text-align:center !important;
}

.form_container_header
{

width:95%;
margin-left: auto ;  
margin-right: auto ;
margin-bottom:35px;
text-align:center;
}

<div class="form_container_header text_left">


EDIT: Please read the comments on this answer before doing this. There are some concerns about using !important recklessly.

apandit
ah yes, i forgot all about !important. thanks for the tip!
using !important should be avoided when possible. I'd just order my classes better / do not put text-align in the class .form_container_header
marcgg
can you explain why using !important should be avoided? thanks
Because it will take over the whole CSS priority logic. !important is the last resort when you don't have a choice. Usually it's used when you have a really complex CSS structure and have to do a fix, or when you have to maintain a legacy website that is messed up. Using that in such a situation will lead to a lot of headaches
marcgg
ps: I edited my answer to include how I'd do this
marcgg
to put it in perspective: when someone commits a crime, do you give them the harshest sentence possible (death penalty, life behind bars, whatever) or a punishment fitting their transgression? !Important is the harshest tool in the tool box. Using !important is a last resort because 99% of the time there is a better, wiser option available to you.
jacobangel
+1 to jdangel, that's exactly the idea here
marcgg
+6  A: 

Because both of them are at an equal specificity (only referencing class), the one at the end of the file has precedent. If you were to make .text_left be div.text_left, then it is more specific and it will override .form_container_header no matter where it is in the file.

From W3C:

6.4.3 Calculating a selector's specificity

A selector's specificity is calculated as follows:

  • count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
  • count the number of ID attributes in the selector (= b)
  • count the number of other attributes and pseudo-classes in the selector (= c)
  • count the number of element names and pseudo-elements in the selector (= d)

The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

Some examples:

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
<HEAD>
<STYLE type="text/css">
  #x97z { color: red }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: green">
</BODY>

In the above example, the color of the P element would be green. The declaration in the "style" attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity.

Brian Ramsay
A: 

I don't know if I'm right (infact, I don't have any evidence only itty-bits of fragmented memory on the matter...) but I thought that it was something to do with the cascade. The scale of importance goes something like this:

stylesheet element
stylesheet class
stylesheet id
document defined stylesheet element
document defined stylesheet class
document defined stylesheet id
inline style attribute

Hmm... I might just be muttering. Apologies if this is so.

Gav
While that's probably true (looks logical from my POV), OP question have all styles coming from one place (i.e. document defined stylesheet class).
Adrian Godong
+1  A: 

Here is some information on CSS specificity. I find that this topic is not very well understood, and understanding it will save you piles of time.

http://www.w3.org/TR/CSS2/cascade.html#specificity

ScottE
+1  A: 

Check out these great slides from maxdesign on css cascade

http://www.maxdesign.com.au/2009/06/30/css-cascade

chchrist