mystyle.css file :
table {
border-collapse: collapse;
}
tr, th, td {
border: solid 1px #fff
}
td {
width: 50px;
padding: 15px
}
th {
background: #006599;
color: #fff
}
table.inner tr:nth-child(even) {
background: #c7d4e5
}
table.inner tr:nth-child(odd) {
background: #E5E5E5
}
h1 {
margin-bottom: 0;
padding: 0.3em 0;
border-bottom: 1px solid #777;
}
h2 {
color: #999;
font-size: 1.2em;
padding-top: 0.4em;
}
address {
padding: 0.8em;
font-size: 0.9em;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
page[size="A3"] {
width: 29.7cm;
height: 42cm;
}
page[size="A3"][layout="portrait"] {
width: 42cm;
height: 29.7cm;
}
page[size="A5"] {
width: 14.8cm;
height: 21cm;
}
page[size="A5"][layout="portrait"] {
width: 21cm;
height: 14.8cm;
}
.header, .content {
padding-right: 30%;
}
.center {
text-align: center;
}
.border {
border: 1px solid #777;
}
.border td, .border th {
border: 1px solid #777;
}
table {
border-collapse: collapse;
}
table td, table th {
border-collapse: collapse;
padding: 4px 8px;
}
@media print {
body, page {
margin: 0;
}
.djDebug {
display: none;
}
}
@media screen {
html {
background: #999;
}
body {
margin: 20px 30%;
padding-top: 3em;
padding-left: 3em;
}
}
My .html file
<!DOCTYPE html>
<html>
<head>
<title></title>
<!--put all your javascript library or style here-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/static/loanwolf/css/mystyle.css">
<script>
window.print()
</script>
</head>
<body>
{% load i18n %}
<table>
<tr>
<th>
<center>
<h1>Test - {% trans "Customer profile" %}</h1>
<center></center>
</center>
</th>
</tr>
<tr>
<td>{% trans "Date" %}</td>
<td>{% now "jS F Y" %}</td>
</tr>
... // Rest of the content truncated for brevity
</body>
</html>
The .html file and .css file are not located in the same directory. The first one is located in
/home/jeremie/Projects/Test-Django/loanwolf/templates/loanwolf/customersmystyle.css is located in /home/jeremie/Projects/Test-Django/loanwolf/static/loanwolf/css<link rel="stylesheet" type="text/css" href="mystyle.css">