CSS not loading in HTML

Hi,

Here is my css and html file attached.  css  is not loading in this HTML.

Can you please tell what I am missing ?  what correction is required here ?
css-issue.zip
cofactorAsked:
Who is Participating?
 
Chris MillardConnect With a Mentor Commented:
Yes it works for me. Zip file attached.

Screenshotcommon.zip
0
 
cofactorAuthor Commented:
comments please.
0
 
Chris MillardCommented:
First of all, '.portlet-paymentservices' from your css file isn't referenced anywhere in the HTML file so none of the styles beginning '.portlet-paymentservices' will display correctly.

Next, you should remove the '<style>' tag from the beginning of the css file - it's not needed. Also, you do not need to put the '<link>' tag inside of '<style></style>' tags within the HTML code.
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
cofactorAuthor Commented:
>>>First of all, '.portlet-paymentservices' from your css file isn't referenced

true. .................. but there is a class .tbl for  table  which is referenced ....please check  that.

>>>Also, you do not need to put the '<link>' tag inside of '<style></style>' tags within the HTML code.

will check this out and let you know soon.
0
 
Chris MillardCommented:
Yes - but again, in your css, all of your .tbl reference are inside the .portlet-paymentservices styles.

If you go to the tables section of your css, and remove .portlet-paymentservices from each of the .tbl styles then you'll see that they then load ok.
0
 
cofactorAuthor Commented:
If you go to the tables section of your css, and remove .portlet-paymentservices from each of the .tbl styles then you'll see that they then load ok.


this   did not work.  .....I have tested this here..............did you check it at your side ?

If its working for you ,then  please  attach the file so that I can check the same here.
0
 
cofactorAuthor Commented:
my quick  comments in italics..

1.  you did not comment out  </style>  in css file.  

 //  is it a typo  or its required ?

2.  you  have removed   DOCTYPE in html
//   I  want to make it HTML 5 compliant ..so I want to keep  DOCTYPE here.....Is it not possible ?


Anyway ,I will do these changes at my system  and deploy in server to see this and will revert back soon.
0
 
Chris StanyonConnect With a Mentor Commented:
3 things wrong that you need to fix:

1. In an HTML document, you add CSS by linking an external file, or wrapping the CSS in <style> tags. You don't link the external file inside of <style> tags.

2. You don't wrap CSS inside style tags inside of an external CSS file - remove the start and end <style> tags from your CSS file.

3. Every single rule in your CSS file is qualified to only act on elements contained within a wrapper element with a class of .portlet-paymentservices. Either remove all of that from your CSS or add that class to the <body> element (or possible the form, depending on what you need)
0
 
cofactorAuthor Commented:
thanks....this is working now.....issue resolved.


I had  a hard time  to pass through this though.... it was not working because  browser cached old css ...and so I was not able to view the new css. I cleared browser cache and now  I can see your new modified css.

Things are fine.


Now  little bit learning time ....

you said    ....
Every single rule in your CSS file is qualified to only act on elements contained within a wrapper element with a class of .portlet-paymentservices.


I am not aware of multiple css class syntax.


say if I have..

 .class1 .class2 .class3{
 // some css rule here
}


now does this css rule will be applicable to only  class3  elements in the above hierarchy ?
0
 
Chris StanyonCommented:
If you have a rule like this:

.class1 .class2 .class3 { color: blue; }

It will only be applied to elements with a class of class3 that exist within an element that has a class of class2 that exists within an element that has a class of class1!! Make sense :) For it to apply, your HTML would look something like this (and it would only apply to the class3 div!!):

<div class="class1">
   <div class="class2">
      <div class="class3">Some Text</div>
   </div>
</div>


If you want it to apply to all 3 classes, then you separate with commas

.class1, .class2, .class3 { color: blue; }

Now that would apply to elements with a class of class1, class2 or class3. All of these:

<p class="class1">SomeText</p>
<p class="class2">SomeText</p>
<p class="class3">SomeText</p>
0
 
cofactorAuthor Commented:
>>.class1 .class2 .class3 { color: blue; }

>>.class1, .class2, .class3 { color: blue; }

Thanks.  Its beautiful.  I liked it.
0
 
Chris MillardCommented:
No points even for an assisted solution?
0
 
cofactorAuthor Commented:
>>>No points even for an assisted solution?

oops ...I am so sorry....I thought I was interacting with one expert only.... i.e  roybridge

I want this to be modified.....Is it possible to change to this ?

Points to be given
roybridge  point = 200   //accepted solution ...helped to fix problem first.

Chis = 100  // assisted solution....helped to learn concept.


I don't see any Edit button to modify points.

sorry ...@roybridge ........Its a mistake  because I did not look at the expert names.....I  thought I was discussing with the same expert.......let me know if I can change point distribution.
0
 
cofactorAuthor Commented:
I have updated points.  Thanks for the  quick  reply.
0
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.

All Courses

From novice to tech pro — start learning today.