Competing Text Formatting…

[Historical Forums User]

Let me preface this by I don’t know much about CSS and I figure stuff out as I go along so hopefully this will make sense to you:

The password to my site linked below is:
password: testing

In order to get my main blog “content text” the color, font and size I wanted it I added this custom CSS code to my site:
p {
font-family:’Transport W00 Light’!important;
color:#282828;
font-size: 13px!important;
}

You can see it here:
http://jeff-singer.squarespace.com/blog/

There is an other element on my site “.image-desc” that comes into play when viewing a full image here:
http://jeff-singer.squarespace.com/portfolios/one/

If you click on one of the thumbnails you’ll see the text in the lower left corner.

Apparently “.image-desc” is picking up it’s coloring from “p” and I can’t seem to override it with:
.image-desc{
text-transform:uppercase!important;
font-family:’Transport W00 Light’!important;
font-size:11px!important;
color:#ffffff!important;
}

How can I keep these to elements separate? I want the main blog text to be one thing while I want the image description to be another.

Thanks!

[Historical Forums User]

Why should I avoid the “!important” tag… I was just going nuts trying to figure out why things weren’t being applied so I started getting a little crazy and adding it to everything not realizing it was bad.

On a similar note…

There is some text on my contact page, the bulleted data, that is not being effected by:
p {
font-family:’Transport W00 Light’!important;
color:#323232 ;
font-size: 13px!important;
}

The rest of the text on the page (and the main text on the blog) are doing what they’re supposed to do. I can’t seem to figure out what is effecting that text and where I can change it. Right now it is a different font.

The contact page is:
http://jeff-singer.squarespace.com/contact/
(once again, password: testing)

I am using the Dev Tools the best I can, but it’s still just trial and error changing things to see what happens at this point.

Thanks for the help!

[Historical Forums User]

Thanks again!

So, everything worked but the font size. It looks like it’s getting font size 12 from:
.element.style {
font-size: 12px;
}

According to the dev tools in Chrome (the p, li {} has the font size crossed out) But if I do:
.element.style {
font-size: 13px;
}

nothing happens.

I’ll take a look at that link and then get rid of the “!important”s.

Thanks!

[Historical Forums User]

I looked there and it looks to be (from the computed tab):
font-size: 12px;
element.style – 12px

As I mentioned above, I tried:
.element.style {
font-size: 13px;
}

But that didn’t do anything. And what’s strange is when I go back to the computed table after saving the changes and reloading the page, it still says that the font is 12px.

[Author]

Posts