Solved

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

Posted on 2016-10-16
7
40 Views
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:

.unconfirmed{
	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?
0
Comment
Question by:Black Sulfur
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 34

Accepted Solution

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

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

Open in new window

0
 
LVL 1

Author Comment

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

I changed it but it still doesn't work?
0
 
LVL 34

Expert Comment

by:ste5an
ID: 41845609
Please post a concise and complete example. Otherwise check whether you have correctly referenced your CSS file. Also look for typos.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

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">
                                    <thead>
                                    	<th>Status</th>

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

                            </div>

Open in new window

0
 
LVL 1

Author Comment

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

Expert Comment

by:ste5an
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.
0
 
LVL 1

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.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ASP.NET Content Page 3 64
really easy css change help please 4 46
setting backkground on single page on wordpress 4 41
Increase image taller on inner pages 2 53
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…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

752 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