Solved

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

Posted on 2016-10-16
7
46 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
Technology Partners: 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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
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 Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses

630 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