How to add background-color only on some part of my page
Question:
I make a local page that prints me some information. My boos want to add two different colours as a background colour. I know how to add background colour to the whole page, but I don’t know how to separate the page into two different background colours.
This is what my code looks like for now:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Raport Transmisji</title>
</head>
<body bgcolor=”#e6fff5">
<h1 style="text-align: center;"><strong>INSTYTUT NIEZNANY</strong></h1>
<div>
<h1 style="text-align: center;"><strong>DANE PRZYPADKOWE</strong></h1>
<div>
<h3 style="text-align: center;">ZAKŁAD NIEZNANY</h3>
<div>
<div style="text-align: center;">ul. Kozłowska 20, tel. 123-456-789 </div>
<p style="text-align: center;">RAPORT TRANSMISJI DANYCH DO ## z dnia <span style="color: #ff0000;">(data)</span></p>
<p style="text-align: center;">DO PRZEBIEGU OBLICZEŃ <span style="color: #ff0000;">(liczba)</span>/<span style="color: #ff0000;">(liczba)</span></p>
<hr />
<p>Łączna liczba zwierząt w aktualnej transmisji - <span style="color: #ff0000;">(liczba)</span></p>
<hr />
<p>CZYSTORASOWE:</p>
<p style="text-align: justify; padding-left: 80px;">WBP - (razem/knurki/loszki) - (liczba)/(liczba)/(liczba)</p>
<p style="text-align: justify; padding-left: 80px;">PBZ - (razem/knurki/loszki) - (liczba)/(liczba)/(liczba)</p>
<p style="text-align: justify; padding-left: 80px;">Puławska - (razem/knurki/loszki) - (liczba)/(liczba)/(liczba)</p>
<p style="text-align: justify; padding-left: 80px;">Hampshire - (razem/knurki/loszki) - (liczba)/(liczba)/(liczba)</p>
<p style="text-align: justify; padding-left: 80px;">Duroc - (razem/knurki/loszki) - (liczba)/(liczba)/(liczba)</p>
<p style="text-align: justify; padding-left: 80px;">Pietrain - (razem/knurki/loszki) - (liczba)/(liczba)/(liczba)</p>
<hr />
<p>MIESZAŃCE:</p>
<p style="padding-left: 40px;">Mieszańców z rasą WBP - liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa ojca to WBP(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa matki to WBP(razem/knurki/loszki - liczba/liczba/liczba</p>
<p style="padding-left: 40px;"> </p>
<p style="padding-left: 40px;">Mieszańców z rasą PBZ- liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa ojca to PBZ(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa matki to PBZ(razem/knurki/loszki - liczba/liczba/liczba</p>
<p style="padding-left: 40px;"> </p>
<p style="padding-left: 40px;">Mieszańców z rasą Puławską- liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa ojca to Puławska(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa matki to Puławska(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;"> </p>
<p style="padding-left: 40px;">Mieszańców z rasą Hampshire- liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa ojca to Hampshire(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa matki to Hampshire(razem/knurki/loszki - liczba/liczba/liczba</p>
<p style="padding-left: 40px;"> </p>
<p style="padding-left: 40px;">Mieszańców z rasą Duroc- liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa ojca to Duroc(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa matki to Duroc(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;"> </p>
<p style="padding-left: 40px;">Mieszańców z rasą Pietrain- liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa ojca to Pietrain(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa matki to Pietrain(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p> </p>
<p style="text-align: justify;font-size: 12px">DONICE, DNIA .............. ...................</p>
<p style="font-size: 10px; padding-left: 560px;">(podpis)</p>
</body>
</html>
Every word "liczba" or "data" will be replaced in my python program.
This code gives me a good-looking report but I have one colour on my whole page.
I need one colour from "RAPORT TRANSMISJI DANYCH DO ## z dnia" to "Pietrain – (razem/knurki/loszki) – (liczba)(liczba)(liczba)" included this both lines.
Second colour from "MIESZAŃE" to "Mieszańców gdzie rasa matki to Pietrain(razem/knurki/loszki) – liczba/liczba/liczba" included this both lines.
Thanks for all your help.
Answers:
You can use two different div class and apply different styles to each div particular div. eg.
<div class=one></div>
<div class=two></div>
and then in the css file
.one {
background-color: yellow;
}
.two {
background-color: blue;
}
you can either divide your page into iframes using and add different background colored webpages seperately to your mainpage or you can use the tag to divide a section of the page and only give it a particular color defining it’s css properties.
- change the left and right margin for the entire body to 0.
You can define this default margin under style tag. Style tag must be defined inside head tag.
<style>
*{
margin-left: 0;
margin-right: 0;
}
</style>
- create two different div for two different colored segments. Write the
content inside respective div and assign color to each.
<div class="first-half" style="background-color: blueviolet;color: white;">
Write your content here
</div>
Repeat the same for the second half
I make a local page that prints me some information. My boos want to add two different colours as a background colour. I know how to add background colour to the whole page, but I don’t know how to separate the page into two different background colours.
This is what my code looks like for now:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Raport Transmisji</title>
</head>
<body bgcolor=”#e6fff5">
<h1 style="text-align: center;"><strong>INSTYTUT NIEZNANY</strong></h1>
<div>
<h1 style="text-align: center;"><strong>DANE PRZYPADKOWE</strong></h1>
<div>
<h3 style="text-align: center;">ZAKŁAD NIEZNANY</h3>
<div>
<div style="text-align: center;">ul. Kozłowska 20, tel. 123-456-789 </div>
<p style="text-align: center;">RAPORT TRANSMISJI DANYCH DO ## z dnia <span style="color: #ff0000;">(data)</span></p>
<p style="text-align: center;">DO PRZEBIEGU OBLICZEŃ <span style="color: #ff0000;">(liczba)</span>/<span style="color: #ff0000;">(liczba)</span></p>
<hr />
<p>Łączna liczba zwierząt w aktualnej transmisji - <span style="color: #ff0000;">(liczba)</span></p>
<hr />
<p>CZYSTORASOWE:</p>
<p style="text-align: justify; padding-left: 80px;">WBP - (razem/knurki/loszki) - (liczba)/(liczba)/(liczba)</p>
<p style="text-align: justify; padding-left: 80px;">PBZ - (razem/knurki/loszki) - (liczba)/(liczba)/(liczba)</p>
<p style="text-align: justify; padding-left: 80px;">Puławska - (razem/knurki/loszki) - (liczba)/(liczba)/(liczba)</p>
<p style="text-align: justify; padding-left: 80px;">Hampshire - (razem/knurki/loszki) - (liczba)/(liczba)/(liczba)</p>
<p style="text-align: justify; padding-left: 80px;">Duroc - (razem/knurki/loszki) - (liczba)/(liczba)/(liczba)</p>
<p style="text-align: justify; padding-left: 80px;">Pietrain - (razem/knurki/loszki) - (liczba)/(liczba)/(liczba)</p>
<hr />
<p>MIESZAŃCE:</p>
<p style="padding-left: 40px;">Mieszańców z rasą WBP - liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa ojca to WBP(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa matki to WBP(razem/knurki/loszki - liczba/liczba/liczba</p>
<p style="padding-left: 40px;"> </p>
<p style="padding-left: 40px;">Mieszańców z rasą PBZ- liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa ojca to PBZ(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa matki to PBZ(razem/knurki/loszki - liczba/liczba/liczba</p>
<p style="padding-left: 40px;"> </p>
<p style="padding-left: 40px;">Mieszańców z rasą Puławską- liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa ojca to Puławska(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa matki to Puławska(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;"> </p>
<p style="padding-left: 40px;">Mieszańców z rasą Hampshire- liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa ojca to Hampshire(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa matki to Hampshire(razem/knurki/loszki - liczba/liczba/liczba</p>
<p style="padding-left: 40px;"> </p>
<p style="padding-left: 40px;">Mieszańców z rasą Duroc- liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa ojca to Duroc(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa matki to Duroc(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;"> </p>
<p style="padding-left: 40px;">Mieszańców z rasą Pietrain- liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa ojca to Pietrain(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p style="padding-left: 40px;">Mieszańców gdzie rasa matki to Pietrain(razem/knurki/loszki) - liczba/liczba/liczba</p>
<p> </p>
<p style="text-align: justify;font-size: 12px">DONICE, DNIA .............. ...................</p>
<p style="font-size: 10px; padding-left: 560px;">(podpis)</p>
</body>
</html>
Every word "liczba" or "data" will be replaced in my python program.
This code gives me a good-looking report but I have one colour on my whole page.
I need one colour from "RAPORT TRANSMISJI DANYCH DO ## z dnia" to "Pietrain – (razem/knurki/loszki) – (liczba)(liczba)(liczba)" included this both lines.
Second colour from "MIESZAŃE" to "Mieszańców gdzie rasa matki to Pietrain(razem/knurki/loszki) – liczba/liczba/liczba" included this both lines.
Thanks for all your help.
You can use two different div class and apply different styles to each div particular div. eg.
<div class=one></div>
<div class=two></div>
and then in the css file
.one {
background-color: yellow;
}
.two {
background-color: blue;
}
you can either divide your page into iframes using and add different background colored webpages seperately to your mainpage or you can use the tag to divide a section of the page and only give it a particular color defining it’s css properties.
- change the left and right margin for the entire body to 0.
You can define this default margin under style tag. Style tag must be defined inside head tag.
<style>
*{
margin-left: 0;
margin-right: 0;
}
</style>
- create two different div for two different colored segments. Write the
content inside respective div and assign color to each.
<div class="first-half" style="background-color: blueviolet;color: white;">
Write your content here
</div>
Repeat the same for the second half