How to conditionally negate the text-indent on a paragraph tag

Question

I have a .content CSS class which indents 55px. In some cases, I want to include a Link at the beginning of the paragraph, but this Link I do not want to indent.

Other than creating a new .content2 class which doesn't include the indent, is there anyway to negate the indent using classes applied directly to the link?

I've tried using a negative indent value applied to the link via classes which are called to format the link, but that only seems to alter the text in the link's own box, when in fact I want the link box to be not indented.

page in question: http://www.fccorp.us/development/index.jfx.php

Thanks much for the graphics snaplemouton!

This raises a new but related question: What is the cascading order for multiple classes that contradict? I'm testing in firefox (current version 19.0.2, non beta) and the links normally use two classes, but certain ones use a third.

--update--

My edit that removed a class (required nine extra lines in my css file though) from being needed worked. This however did not fix my margin issue:

The first class configures the appearance of the link's "box" (box model) including margins as well as configures the link text's appearance (link, visited, active). The (formerly third) now second class, which is used only when these links are placed within a paragraph, is used to negate values which no longer apply because the link is within the paragraph. I set top & bottom margins via the first class, which applies to (almost) every button. With the (now) second class, I tried to negate those margins for the few links which are placed within a paragraph. But for some reason, those values which are negated through the use of margin values of 0px (zero) via the second class, are not being altered. They are remaining their value assigned by the first class.

(As I typed this, I realized how to eliminated the key which adjusts the link/visited/active attributes, so that's being altered now. But I doubt that will change anything. If it does, I'll update this.) - As I said in the update, this change did not solve the issue of the margins not being eliminated.

However, rather than trying to cancel the existing margins, do I need to actually negate them by using a negative number? This should work, but I thought that the CSS cascade meant that certain styles would overwrite others if they contradicted. Or are they added together?

Answer 1

There is multiple way to do it. Either by overriding the marging or padding (see link on edit 3), setting the indent to 0 or, in the way I prefer to do it, by using a width 100% width div element for your content and floating it to the left.

<div style="float:left; width:100%;">
     <a style="float:left">stuff</a>
</div>

Edit : It should also fix that text having one line next to your anchor. If you actually wish to have the text right of your banner, you can remove the div and simply float the anchor the the left.

I really prefer using Divs because it's very flexible and allow you to really set or remove empty blank spaces like you wish to do it.

Edit 2 : I even made a paint image to show you the difference. :)

Edit 3 : To answer your new question, here a link that explain pretty much everything about cascading order.

http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

Basically the highest weight win. If both are of the same weight, the latter always win. (Whichever come last will take effect.)

In order : style added straight to the element > stylesheets > default

Inside stylesheets, #id > .class > element

If there is multiple of the same, the last one of them will win.

Edit 4 : Sorry I was wrong on my second sentence in my answer. I edited it.

You simply need to add this to your anchor

margin-left:0px;
margin-bottom: 0px;
margin-top: 0px; 

to remove the margin.

Answer 2

CSS Cascade

The cascade is determined mostly by specificity. Below is a list of the priorities, from high to low.

1. !important modifier
2. Dynamically-applied styles using JavaScript
3. Inline styles specified using the style attribute
4. Specificity of the selector (higher specificity wins)
      (a)  #id                                 (100 points each)
      (b)  .class, :pseudo-class, [attribute]  ( 10 points each)
      (c)  element, ::pseudo-element           (  1 point each )
      (d)  *                                   (  0 points each)
5. Whichever one appears last

The style with the highest priority is applied last. In a tie, the one that appears later in the code wins.

This is a slight oversimplification, but it should convey the basic idea. In greater detail:

• A class, pseudo-class, or attribute beats any number of elements or pseudo-elements.
• An id beats any number of classes, pseudo-classes, or attributes.
• An inline style set via static HTML or JavaScript beats any number of ids.
• And most of all, a style with the !important modifier beats any style without it.

Specificity examples

                 formal         informal
selector         notation       notation
---------        --------       --------
* {}             0,0,0,0        0000
div {}           0,0,0,1        0001
.a {}            0,0,1,0        0010
#a {}            0,1,0,0        0100
div#a.b.c {}     0,1,2,1        0121

Also, the specificity of an inline style is 1000 points (1,0,0,0).