What is the best way to incorporate CSS into an HTML document?

I have a well-functioning invoice. When I save the CSS and HTML files in the same folder, the printed invoice looks good.

Within the .html file, there are the following lines:

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

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

Everything works fine, but I need to embed the style.css file inside the HTML file because it contains a logo.png file that needs to be dynamically changed for each user.

I attempted the following: Opened the style.css file, copied everything inside, and pasted it into the file within <style> tags like this:

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

However, when I print the page, it appears distorted.

- How it should look (when the .css file is in the same directory):

- How it appears when I integrate the CSS in the HTML file:

How can I properly integrate the .css in the HTML file?

Thank you in advance! Any assistance would be greatly appreciated.

htmlcss

Answer №1

Make sure to maintain the internal style tag above the print css import. Your pos.css styles are currently 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">

Answer №2

In most cases, we can observe that all the different types of styles come together to form a new "virtual" style sheet according to certain rules. These rules prioritize styles in the following order, with number one being the most important:

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

Therefore, an inline style within a specific HTML element takes precedence over styles declared within the style tag, an external style sheet, or default styles set by the browser.

Answer №3

To achieve the desired outcome, incorporate a media query within the inline CSS.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to customizing the label color in Material-UI's <TextField/> component

How do I change the text color of the "email" label to match the border color? Below is the provided code: import React, { Component } from "react"; import { Icon } from "semantic-ui-react"; import { Divider } from "semantic-ui-react"; import { TextField ...

cssreactjsmaterial-ui

Creating uniform width children with Bootstrap's flexbox

Within my flex box container, the children are all displayed in a flex-row. I'm utilizing bootstrap to try and make sure that all the children have the same width and height. HTML <div class="d-flex flex-row flex-grow"> <div class="backgroun ...

htmlcssbootstrap-4flexbox

How come the mouseover effect on the div remains even after the mouse has been removed?

How can I keep the original CSS class when the mouse moves away? function highlight( x, y) { var sel=document.getElementById(y); sel.style.borderBottom= "2px solid "+x; sel.style.opacity="1"; sel.style.transition="all eas ...

javascriptcssdom-eventsjavascript-objects

The functionality of Bootstrap styles is not compatible with Code Igniter

I tried placing the bootstrap folder in the root folder and loading the styles in the header section of view files like this. Unfortunately, it didn't work as expected. Can someone please assist me in solving this issue? <link href="<?php e ...

phpcsstwitter-bootstrapcodeigniter

Retrieve the website address from a string of HTML code

I'm struggling to extract the URL from a given String that contains an HTTP response with an HREF tag. I've managed to identify the start of the links, but I need to stop the string as soon as the HREF tag ends. How can I accomplish this? public ...

javahtmlhtml-parsing

What is the best way to deactivate a hyperlink on a widget sourced from a different website?

Is there a way to remove the link from the widget I embedded on my website without access to other editing tools besides the HTML code provided? For instance, we have a Trustpilot widget at the bottom of our page that directs users to Trustpilot's web ...

javascriptjqueryhtmlcss

Trimmed scrollbar and border in Webkit

There seems to be some clipping on the scrollbar and border of the textarea: <!DOCTYPE html> <html> <head> <meta charset="UTF-8> <title>Scrollbar and Border Clipping Issue in Webkit</title> <style> ...

htmlcsswebkittextareascrollbar

Unable to scroll through embed code on iOS responsive devices

-webkit-overflow-scrolling: touch; overflow-y: scroll; I have attempted using this code but unfortunately it is still not functioning as expected. The issue seems to only occur on iOS responsive devices, as it works fine on other devices including MAC. ...

iosiphonecssresponsive-designresponsive

"Employing the ScrollSpy feature in Bootstrap allows you to effortlessly monitor

Recently, I came across a document containing Bootstrap 4 code like the following: <div className="container"> <nav class="navbar navbar-expand-lg navbar-light"> <a class="navbar-brand active" aria-current="true" href="/"> ...

javascriptcssbootstrap-4scrollspy

Removing the restriction on maximum width to 100% and allowing for automatic height adjustment

Within my project, I have implemented a CSS technique where all images within a container are set with the attributes max-width: 100%; and height: auto;. This is done to ensure that images scale down appropriately when the viewport and container size decre ...

htmlcssimageresponsive-design

Tips for stopping Razor from altering HTML strings

In order to display the body of a message, which is a piece of HTML, using Razor, follow these steps: Within your cshtml file, include the following code: <div> @message.Body </div> For example, if the content of message.Body is: <p&g ...

c#htmlasp.net-mvcrazor

How to dynamically assign width to elements in a v-for loop in Vue.JS

I am working with HTML code that looks like this: <div v-for="(s, k) in statistics" v-bind:key="s.id" class="single-stat"> <div class="stats"> { ...

cssvue.jsstyleswidth

Transitioning into a fade out effect using CSS

I successfully created a modal using CSS and jQuery. The fade in transition works perfectly, but I'm having trouble implementing a transition for when it fades out and scales back to 1.4. The main issue is that the modal disappears too quickly. Chec ...

jquerycss

Troubleshooting a jQuery Selector Issue with a Dynamic Form

I developed a jQuery function to search for all the necessary inputs in a specific section of a website. function check_property_vars() { jQuery(this).parents('.property_group').find('div[id^="property_group_"]:input[required]:visible&a ...

javascriptjqueryhtmlcss

Enable hyperlink to open in a new browser tab after user clicks on button embedded inside an iFrame

<head> </head> <div> <iframe src="https://....."></iframe> </div> https://i.sstatic.net/dk21i.png I'm looking for a way to open the link in a new tab when clicking on this button. Currently, the page loads wi ...

javascripthtmlvue.js

Styling multiple divs using CSS

What is the method for attaching CSS to sp-copyright? <div class="container"> <div class="row"> <div id="sp-footer1" class="col-sm-12 col-md-12"> <div class="sp-column "> <span class="sp-copyright"> ...

htmlcss

Manipulating a specific element within an ng-repeat in AngularJS without affecting the others

I'm currently working on developing a basic single page application to monitor people's movements. While I've made good progress, I've encountered an issue with the click function in the child elements of each person div. When I try to ...

javascripthtmlangularjs

Safari-exclusive: Google Maps API dynamically altering page aesthetics post-loading

Recently, I encountered a peculiar problem. Upon loading a page, the text displayed with full opacity. However, upon the Google Maps API loading after 2 seconds, the entire page's styling suddenly changed. It was as if the text on the page became less ...

javascripthtmlcssgoogle-mapsgoogle-maps-api-3

Elements separated by empty space on a Complex Grid, appearing distant despite the available space

Struggling with creating a complex layout using minimal relative and absolute positioning. Here's the issue I'm facing: All my elements are aligned side by side with only one problem: the border image needs to bleed into the row below. How can t ...

htmlcsslayoutsusy

Having trouble properly refreshing Bootstrap scrollspy that is spying on the <body> element

I've been looking at a post on Bootstrap's scrollspy component (found here). In my code, I initialize a new scrollspy to track the body element using: $("body").scrollspy({ offset: 25 }); As my code progresses, I make AJAX requests that add or ...

javascriptjqueryhtmlajaxtwitter-bootstrap