Override CSS text-transform

Question

I am using the following CSS which transforms all text to uppercase:

.taxtabs {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: .8em;
width: inherit;
text-align:center;
text-transform: uppercase;
border-collapse: collapse;
}

Now what I would like to do is to override this CSS and allow certain text to be lowercase. How would I do that? Perhaps using some kind of inline CSS? Thanks.

score 38 · Accepted Answer · answered Dec 30 '11 at 01:52

38

Probably better to create a class that doesn't have any text-transform.

.normal {
    text-transform: none;
}

<div class="taxtabs">
... <span class="normal">this text is not uppercase</span> ...
</div>

answered Dec 30 '11 at 01:52

U-DON

2,102
14
14

ThinkingStiff · Answer 2 · 2011-12-30T02:00:07.677

7

Create a class for whatever elements you don't want capped and put text-transform: none !important; in it. I don't know your layout, so I put !important for good measure (for example if your element had both texttabs and override classes).

.override {
    text-transform: none !important;
}

edited Dec 30 '11 at 02:00

answered Dec 30 '11 at 01:53

ThinkingStiff

64,767
30
146
239

score 1 · Answer 3 · answered Dec 30 '11 at 01:52

1

Maybe add a new class called lowercase to selected .textabs so you can define something like this:

.textabs.lowercase { text-transform: lowercase; }

answered Dec 30 '11 at 01:52

sczizzo

3,196
20
28

score 1 · Answer 4 · answered Dec 30 '11 at 01:56

Not sure what you wanna to do

if you only want to make some text to be lowercase

you just have to add a new class on it or inherit above css

from

<label class="taxtabs">text</label>

to

<label class="taxtabs lower">text</label>
<style>.taxtabs.lower{text-transform: lowercase;}</style>

Override CSS text-transform

4 Answers4