0

I have an invoice that works pretty fine. If i save the css files and html in the same folder when i open the invoice and print it, it prints good.

Inside the .html file there's this lines:

<link rel="stylesheet" href="https://s3.amazonaws.com/appforest_uf/f1527345073203x732458357233554200/pos.css" media="print">

<link rel="stylesheet" href="style.css" media="screen">

Actually works fine but i need to integrate the style.css file inside the HTML file because inside the style.css there's a logo.png file that i need to change dynamically for each user.

I tried this: Opened the style.css file and copied everything that's inside, then put it in the file inside <style> tags like this:

<link rel="stylesheet" href="https://s3.amazonaws.com/appforest_uf/f1527345073203x732458357233554200/pos.css" media="print">
<style>
*{font-family:'Lato', sans-serif}.container{max-width:1200px;margin:90px auto 5px;color:#212121}.jim-invoice-header .logo{display:inline-block;width:55%;float:right;background-image:url("https://s3.amazonaws.com/appforest_uf/f1527344318135x217536157462745920/logo.png");background-repeat:no-repeat;background-position:100% 1%;height:200px}.jim-invoice-header .title{display:inline-block;width:44%;font-size:3.236em;clear:left;font-weight:bold;text-transform:uppercase}.jim-invoice-header .title:after{content:"";display:block;height:5px;width:1.618em;background-color:#059CCE;margin-top:3px}.jim-invoice-header .customer-info{width:43%;font-size:3.236em;clear:left;float:left;font-weight:normal;font-size:1.2135em;margin-top:101.934px}.jim-invoice-header .customer-info .info-container{display:block;width:100%;margin:8.09px auto}.jim-invoice-header .customer-info .info-container .to{text-transform:uppercase;font-size:16.18px}.jim-invoice-header .customer-info .info-container .name{text-transform:capitalize;font-size:32.36px;margin-top:6.472px;font-weight:bold;padding-left:40.45px}.jim-invoice-header .customer-info .info-container .label{text-transform:uppercase;font-size:16.18px;font-weight:bold;display:inline-block}.jim-invoice-header .customer-info .info-container .info{display:inline-block}.jim-invoice-header .invoice-total-info{display:inline-block;width:55%;margin-top:16.18px;float:right}.jim-invoice-header .invoice-total-info .total-info-section{width:29%;display:inline-block;float:right;text-transform:capitalize;text-align:center;padding:29.124px 3.236px;font-size:21.034px;font-weight:bold;border-top:2px solid #059CCE;border-bottom:2px solid #059CCE}.jim-invoice-header .invoice-total-info .total-info-section .info{margin-top:12.944px}.jim-invoice-header .invoice-total-info .total-info-section:last-child{background-color:#059CCE;color:#F5F5F5;width:29%}.jim-invoice-header .invoice-total-info .total-info-section:nth-child(2){min-width:250px;border-right:2px solid #059CCE}.jim-invoice-header .invoice-total-info .total-info-section:first-child{text-align:right;width:19%}.jim-invoice-body{display:block;width:100%;float:left;margin-top:48.54px;margin-bottom:48.54px}.jim-invoice-body .invoice-table{border-collapse:collapse}.jim-invoice-body .invoice-table thead{text-transform:uppercase;background-color:#059CCE;text-align:center}.jim-invoice-body .invoice-table thead tr td{padding:16.18px 0;color:#F5F5F5;font-weight:bold}.jim-invoice-body .invoice-table thead tr td:nth-child(2){max-width:600px}.jim-invoice-body .invoice-table thead tr td:nth-child(4){min-width:150px}.jim-invoice-body .invoice-table thead tr td:first-child{width:70px}.jim-invoice-body .invoice-table tbody tr{border-bottom:solid 2px #059CCE}.jim-invoice-body .invoice-table tbody tr td{padding:16.18px 16.18px;text-align:center}.jim-invoice-body .invoice-table tbody tr td:first-child,.jim-invoice-body .invoice-table tbody tr td:nth-child(3),.jim-invoice-body .invoice-table tbody tr td:nth-child(5){background-color:#E0E0E0}.jim-invoice-body .invoice-table tbody tr td:nth-child(2){text-align:left;font-size:1.618em;font-weight:bold;padding:16.18px 40.45px}.jim-invoice-body .invoice-table tfoot tr td{text-align:center;font-weight:bold;padding:14.562px 0;font-size:17.798px}.jim-invoice-body .invoice-table tfoot .due td:nth-child(2){background-color:#059CCE;color:#F5F5F5}.jim-invoice-body .invoice-table tfoot .due td:nth-child(3){background-color:#059CCE;color:#F5F5F5}.jim-invoice-body .invoice-table tfoot .terms-and-condtions{text-align:left;vertical-align:bottom}.jim-invoice-body .invoice-table tfoot .terms-and-condtions .title{color:#059CCE;font-size:24.27px;margin-bottom:16.18px}.jim-invoice-body .invoice-table tfoot .terms-and-condtions .content{font-weight:normal;line-height:25.888px;padding-right:323.6px;text-align:justify}.jim-invoice-footer{width:100%;margin-bottom:48.54px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap}.jim-invoice-footer .footern-section{max-width:250px;float:left;display:inline-block}.jim-invoice-footer .footern-section .footer-title{font-size:32.36px;font-weight:bold;text-transform:uppercase}.jim-invoice-footer .footern-section .footer-title i{font-size:22.652px}.jim-invoice-footer .footern-section .footer-content{padding:16.18px 0 0 24.27px;font-size:17.798px;line-height:27.506px}
</style>

But for some reason, when i print the page it looks weird:

-How should look (and how looks when .css file is in the same directory): https://puu.sh/AusRL/01a54e24bd.jpeg

-How looks like when i integrate the css in the html file:
https://puu.sh/AusTa/0ec954837d.jpeg

How i can integrate properly the .css in the html file?

Thanks in advance! Any help will be very appreciated.

Improve this question
2
  • was your issue resolved by my answer? Commented May 28, 2018 at 13:02
  • You can integrate only the class with logo img in your file and the rest of CSS can stay in the external file. Commented May 28, 2018 at 14:53

3 Answers 3

Reset to default
2

Keep internal style tag above the import of print css. The styles of your pos.css are being overridden by your internal styles.

<style>
*{font-family:'Lato', sans-serif}.container{max-width:1200px;margin:90px auto 5px;color:#212121}.jim-invoice-header .logo{display:inline-block;width:55%;float:right;background-image:url("https://s3.amazonaws.com/appforest_uf/f1527344318135x217536157462745920/logo.png");background-repeat:no-repeat;background-position:100% 1%;height:200px}.jim-invoice-header .title{display:inline-block;width:44%;font-size:3.236em;clear:left;font-weight:bold;text-transform:uppercase}.jim-invoice-header .title:after{content:"";display:block;height:5px;width:1.618em;background-color:#059CCE;margin-top:3px}.jim-invoice-header .customer-info{width:43%;font-size:3.236em;clear:left;float:left;font-weight:normal;font-size:1.2135em;margin-top:101.934px}.jim-invoice-header .customer-info .info-container{display:block;width:100%;margin:8.09px auto}.jim-invoice-header .customer-info .info-container .to{text-transform:uppercase;font-size:16.18px}.jim-invoice-header .customer-info .info-container .name{text-transform:capitalize;font-size:32.36px;margin-top:6.472px;font-weight:bold;padding-left:40.45px}.jim-invoice-header .customer-info .info-container .label{text-transform:uppercase;font-size:16.18px;font-weight:bold;display:inline-block}.jim-invoice-header .customer-info .info-container .info{display:inline-block}.jim-invoice-header .invoice-total-info{display:inline-block;width:55%;margin-top:16.18px;float:right}.jim-invoice-header .invoice-total-info .total-info-section{width:29%;display:inline-block;float:right;text-transform:capitalize;text-align:center;padding:29.124px 3.236px;font-size:21.034px;font-weight:bold;border-top:2px solid #059CCE;border-bottom:2px solid #059CCE}.jim-invoice-header .invoice-total-info .total-info-section .info{margin-top:12.944px}.jim-invoice-header .invoice-total-info .total-info-section:last-child{background-color:#059CCE;color:#F5F5F5;width:29%}.jim-invoice-header .invoice-total-info .total-info-section:nth-child(2){min-width:250px;border-right:2px solid #059CCE}.jim-invoice-header .invoice-total-info .total-info-section:first-child{text-align:right;width:19%}.jim-invoice-body{display:block;width:100%;float:left;margin-top:48.54px;margin-bottom:48.54px}.jim-invoice-body .invoice-table{border-collapse:collapse}.jim-invoice-body .invoice-table thead{text-transform:uppercase;background-color:#059CCE;text-align:center}.jim-invoice-body .invoice-table thead tr td{padding:16.18px 0;color:#F5F5F5;font-weight:bold}.jim-invoice-body .invoice-table thead tr td:nth-child(2){max-width:600px}.jim-invoice-body .invoice-table thead tr td:nth-child(4){min-width:150px}.jim-invoice-body .invoice-table thead tr td:first-child{width:70px}.jim-invoice-body .invoice-table tbody tr{border-bottom:solid 2px #059CCE}.jim-invoice-body .invoice-table tbody tr td{padding:16.18px 16.18px;text-align:center}.jim-invoice-body .invoice-table tbody tr td:first-child,.jim-invoice-body .invoice-table tbody tr td:nth-child(3),.jim-invoice-body .invoice-table tbody tr td:nth-child(5){background-color:#E0E0E0}.jim-invoice-body .invoice-table tbody tr td:nth-child(2){text-align:left;font-size:1.618em;font-weight:bold;padding:16.18px 40.45px}.jim-invoice-body .invoice-table tfoot tr td{text-align:center;font-weight:bold;padding:14.562px 0;font-size:17.798px}.jim-invoice-body .invoice-table tfoot .due td:nth-child(2){background-color:#059CCE;color:#F5F5F5}.jim-invoice-body .invoice-table tfoot .due td:nth-child(3){background-color:#059CCE;color:#F5F5F5}.jim-invoice-body .invoice-table tfoot .terms-and-condtions{text-align:left;vertical-align:bottom}.jim-invoice-body .invoice-table tfoot .terms-and-condtions .title{color:#059CCE;font-size:24.27px;margin-bottom:16.18px}.jim-invoice-body .invoice-table tfoot .terms-and-condtions .content{font-weight:normal;line-height:25.888px;padding-right:323.6px;text-align:justify}.jim-invoice-footer{width:100%;margin-bottom:48.54px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap}.jim-invoice-footer .footern-section{max-width:250px;float:left;display:inline-block}.jim-invoice-footer .footern-section .footer-title{font-size:32.36px;font-weight:bold;text-transform:uppercase}.jim-invoice-footer .footern-section .footer-title i{font-size:22.652px}.jim-invoice-footer .footern-section .footer-content{padding:16.18px 0 0 24.27px;font-size:17.798px;line-height:27.506px}
</style>
<link rel="stylesheet" href="https://s3.amazonaws.com/appforest_uf/f1527345073203x732458357233554200/pos.css" media="print">
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

inline styles are styles used directly inside tags
I meant internal css using style tag. Updated the answer. Thanks for pointing that out :)
0

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:

Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default

So, an inline style (inside a specific HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or a browser default value.

Improve this answer

Comments

0

You have to use a media query for the inline css and it'll work out fine.

<style type="text/css">
    @media screen {
        *{font-family:'Lato', sans-serif}.container{max-width:1200px;margin:90px auto 5px;color:#212121}.jim-invoice-header .logo{display:inline-block;width:55%;float:right;background-image:url("https://s3.amazonaws.com/appforest_uf/f1527344318135x217536157462745920/logo.png");background-repeat:no-repeat;background-position:100% 1%;height:200px}.jim-invoice-header .title{display:inline-block;width:44%;font-size:3.236em;clear:left;font-weight:bold;text-transform:uppercase}.jim-invoice-header .title:after{content:"";display:block;height:5px;width:1.618em;background-color:#059CCE;margin-top:3px}.jim-invoice-header .customer-info{width:43%;font-size:3.236em;clear:left;float:left;font-weight:normal;font-size:1.2135em;margin-top:101.934px}.jim-invoice-header .customer-info .info-container{display:block;width:100%;margin:8.09px auto}.jim-invoice-header .customer-info .info-container .to{text-transform:uppercase;font-size:16.18px}.jim-invoice-header .customer-info .info-container .name{text-transform:capitalize;font-size:32.36px;margin-top:6.472px;font-weight:bold;padding-left:40.45px}.jim-invoice-header .customer-info .info-container .label{text-transform:uppercase;font-size:16.18px;font-weight:bold;display:inline-block}.jim-invoice-header .customer-info .info-container .info{display:inline-block}.jim-invoice-header .invoice-total-info{display:inline-block;width:55%;margin-top:16.18px;float:right}.jim-invoice-header .invoice-total-info .total-info-section{width:29%;display:inline-block;float:right;text-transform:capitalize;text-align:center;padding:29.124px 3.236px;font-size:21.034px;font-weight:bold;border-top:2px solid #059CCE;border-bottom:2px solid #059CCE}.jim-invoice-header .invoice-total-info .total-info-section .info{margin-top:12.944px}.jim-invoice-header .invoice-total-info .total-info-section:last-child{background-color:#059CCE;color:#F5F5F5;width:29%}.jim-invoice-header .invoice-total-info .total-info-section:nth-child(2){min-width:250px;border-right:2px solid #059CCE}.jim-invoice-header .invoice-total-info .total-info-section:first-child{text-align:right;width:19%}.jim-invoice-body{display:block;width:100%;float:left;margin-top:48.54px;margin-bottom:48.54px}.jim-invoice-body .invoice-table{border-collapse:collapse}.jim-invoice-body .invoice-table thead{text-transform:uppercase;background-color:#059CCE;text-align:center}.jim-invoice-body .invoice-table thead tr td{padding:16.18px 0;color:#F5F5F5;font-weight:bold}.jim-invoice-body .invoice-table thead tr td:nth-child(2){max-width:600px}.jim-invoice-body .invoice-table thead tr td:nth-child(4){min-width:150px}.jim-invoice-body .invoice-table thead tr td:first-child{width:70px}.jim-invoice-body .invoice-table tbody tr{border-bottom:solid 2px #059CCE}.jim-invoice-body .invoice-table tbody tr td{padding:16.18px 16.18px;text-align:center}.jim-invoice-body .invoice-table tbody tr td:first-child,.jim-invoice-body .invoice-table tbody tr td:nth-child(3),.jim-invoice-body .invoice-table tbody tr td:nth-child(5){background-color:#E0E0E0}.jim-invoice-body .invoice-table tbody tr td:nth-child(2){text-align:left;font-size:1.618em;font-weight:bold;padding:16.18px 40.45px}.jim-invoice-body .invoice-table tfoot tr td{text-align:center;font-weight:bold;padding:14.562px 0;font-size:17.798px}.jim-invoice-body .invoice-table tfoot .due td:nth-child(2){background-color:#059CCE;color:#F5F5F5}.jim-invoice-body .invoice-table tfoot .due td:nth-child(3){background-color:#059CCE;color:#F5F5F5}.jim-invoice-body .invoice-table tfoot .terms-and-condtions{text-align:left;vertical-align:bottom}.jim-invoice-body .invoice-table tfoot .terms-and-condtions .title{color:#059CCE;font-size:24.27px;margin-bottom:16.18px}.jim-invoice-body .invoice-table tfoot .terms-and-condtions .content{font-weight:normal;line-height:25.888px;padding-right:323.6px;text-align:justify}.jim-invoice-footer{width:100%;margin-bottom:48.54px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap}.jim-invoice-footer .footern-section{max-width:250px;float:left;display:inline-block}.jim-invoice-footer .footern-section .footer-title{font-size:32.36px;font-weight:bold;text-transform:uppercase}.jim-invoice-footer .footern-section .footer-title i{font-size:22.652px}.jim-invoice-footer .footern-section .footer-content{padding:16.18px 0 0 24.27px;font-size:17.798px;line-height:27.506px}
    }
</style>
Improve this answer

Comments