span with style won't work with css from external file

Posted on 2016-10-16
Medium Priority
Last Modified: 2016-10-16
This is working but I don't want to use it like this because I still want to add some padding and other styles.

 <td><span style="background-color:red">Not confirmed</span></td>

Open in new window

I tried this in my .css file:

	background-color: red;	

Open in new window

and then tried:

 <td><span style="unconfirmed">Not confirmed</span></td>

Open in new window

But this doesn't seem to work. What am I doing wrong?
Question by:Black Sulfur
  • 4
  • 3
LVL 37

Accepted Solution

ste5an earned 2000 total points
ID: 41845590
.name in CSS means that you need to mark your element with the corresponding class attribute.

<!DOCTYPE html>
            .unconfirmed { background-color: red; }
        <span class="unconfirmed">Not confirmed</span>

Open in new window


Author Comment

by:Black Sulfur
ID: 41845596
Ah, yes. Of course.

I changed it but it still doesn't work?
LVL 37

Expert Comment

ID: 41845609
Please post a concise and complete example. Otherwise check whether you have correctly referenced your CSS file. Also look for typos.
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.


Author Comment

by:Black Sulfur
ID: 41845663
There is a lot of php code in my table so I don't want to confuse things by putting it all here. Would it help if I said that the table was a bootstrap one?

 <div class="content table-responsive table-full-width">
                                <table class="table table-hover table-striped">

 <td><span class="unconfirmed"><?php echo $status; ?></span></td>


Open in new window


Author Comment

by:Black Sulfur
ID: 41845676
And yes, I have correctly referenced my css file.
LVL 37

Expert Comment

ID: 41845681
There is a lot of php code in my table [..]
Thus you should make a concise sample. Craft one showing your problem. Otherwise I need to consider the question answered. Cause the root error was the wrong attribute.

And as you said there are lots of lines of code: There is a second problem somewhere, but it is impossible to guess where. It's like search for the needle in the haystack, but you cannot see or touch the haystack.

And last but not least: format your code.. this helps also to spot errors.

Author Comment

by:Black Sulfur
ID: 41845684
okay, so I a link href to the css file which is correct. But I noticed that there is a comment at the top that says (I am using a theme by the way):

<!--  CSS for Demo Purpose, don't include it in your project     -->

Open in new window

I don't understand why the css I put in there isn't working as other css that came with the theme is working.

Anyway, I created my own css file and it works just fine. Very odd.

Thanks for your help. I will close the question now.

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question