Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2016-10-16
7
Medium Priority
?
60 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
  • 4
  • 3
7 Comments
 
LVL 36

Accepted Solution

by:
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>
<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 36

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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 36

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

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses
Course of the Month14 days, 10 hours left to enroll

578 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