I need to extract the css codes from serveral HTML files but I can't figure out how to solve the follwing two problems:
A HTML file might have more than one block containing CSS code.
In HTML CSS is placed inside tags. But so is other code. I only need the code coming from <style type="text/css">.
I looked into beautifulsoup but haven't yet been able to figure out if this is possible using this library or if I need to write something myself.
Hopefully anyone on here can help me out.
from bs4 import BeautifulSoup
soup = BeautifulSoup(html_code,'html.parser')
soup.find('style',{"type" : "text/css"})
I've tried this code on the below html code
<html>
<head>
<style type="text/css">
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph1.</p>
<h4>This is a paragraph2.</h4>
<style>
h4 {color: red;}
</style>
And this was the output i got -
Output
<style type="text/css">
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
You can see that i got only the style tag which has type="text/css"
Related
I want to generate a PDF with a specific background from three simple input-fields.
A title, a message and a signature as shown in the picture below.
Example of desired result
I have some experience with creating web-sites with Python Flask, but I struggle with how to tackle this challenge.
create a h1 containing the title, a h2 containing the message and a bottom text with some css
.bottom{
position:fixed;
bottom:0;
}
put the background-image tag on the body to have your own custom image
it would be something like this
<html>
<head>
<style>
.bottom{
position:fixed;
bottom:0;
}
</style>
</head>
<body style="background-image:url('mypicture.png'); text-align: center">
<h1>my title</h1>
<h2>my subtitle</h2>
<h2 class="bottom">bottom text</h2>
</body>
</html>
I am trying to dispaly video in my html page by passing url as dict to template in django view named as succes
def success(request):
url_video="/media/video1.mp4"
return render(request,"payment/success.html",{"url_video":url_video})
my template code is all clear it has no errors
i am getting this error on command prompt
Not Found: /succes/media/video1.mp4
I don't understand why i get success/ in front of url i have passed.The video file is in media/video1.mp4 location but it is not getting displayed.let me know any changes i need to make.thanks
EDIT:
TEMPLATE:
<!DOCTYPE html>
<html>
<head>
<style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; }
</style>
</head>
<meta name="viewport" content="width=device-width">
<body>
<h1 id="myHeader">"{{ url_video}}"</h1> <br>
<video width=""height=""controls>
<source src="{{ url_video}}" type="video/mp4">
</video>
</body>
</html>
Sounds like a relative path problem. Make sure you have:
url_video="/media/video1.mp4"
and not
url_video="media/video1.mp4"
Without the leading slash, it will try to find in directory of current url
I'm using flask framework, to make some website but when i try to write css style it apply only for body tag and ignores all next
index.html content
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename = 'css/style.css')}}">
</head>
<body>
<h2>some text</h2>
</body>
</html>
style.css content
body {
background: #222;
}
h2 {
color: #fff;
}
when i check website source i see this
body {
background: #222;
}
I'm trying to generate an HTML with the dominate package in Python. For the format, I have to add a short CSS content into the <style> tag. However, the only documentation I can find is the GitHub page and that page doesn't have any function related to adding the <style>.
PS: Here's an image
Is this what you are after? from here
import dominate
from dominate.tags import link, script, style
doc = dominate.document(title='Dominate your HTML')
with doc.head:
link(rel='stylesheet', href='style.css')
script(type='text/javascript', src='script.js')
style("""\
body {
background-color: #F9F8F1;
color: #2C232A;
font-family: sans-serif;
font-size: 2.6em;
margin: 3em 1em;
}
""")
print(doc.render(pretty=True))
It yields;
<!DOCTYPE html>
<html>
<head>
<title>Dominate your HTML</title>
<link href="style.css" rel="stylesheet">
<script src="script.js" type="text/javascript"></script>
<style> body {
background-color: #F9F8F1;
color: #2C232A;
font-family: sans-serif;
font-size: 2.6em;
margin: 3em 1em;
}
</style>
</head>
<body></body>
</html>
I'm trying to load an image to my page and set it as my background, below is the css and html that I am working with. The CSS page seems to load, as my test font and background colors show up but for whatever reason my background image doesn't.
I am using Django as my web framework.
Appreciate the help!
HTML:
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="{% static 'personal/css/frontpagebackground.css' %}" type = "text/css"/>
</head>
<body>
<p>This is a test</p>
</body>
</html>
CSS:
body
{
background-image:url(personal/static/personal/img/home.jpg) no-repeat;
background-repeat:no-repeat;
background-size:100%;
background-color: green;
min-height: 100%;
}
p {
font-style: italic;
color: red;
}
You used background-image, so the no-repeat is not actually working. Try adding the no-repeat below as background-repeat: no-repeat;.
background-image: url('image-url-here.png');
background-repeat: no-repeat;
I've had problems like this with django, primarily because my {% static %} location was confusing me. I think this is a non-css issue, and a path issue.
It helped me to use the dev console to check for Resource Failed To Load error. It will spit out the path that the machine is looking for, and it's likely different than what you specified.
I.e. is your css file located along
personal/static/personal/img/home.jpg
relative to your css file? You might just need to back up a directory, i.e.
../personal/static/personal/img/home.jpg
Either way, the console should give you your path, and use that to determine where your CSS file is digging for the image.
If your CSS files are in a path such as /static/css/style.css
and the images are under a path such as /static/images/test.jpg
then you have to place the test.jpg image directly in the folder with the style.css i.e. /static/css/test.jpg and in your HTML file give it the name test.jpg without using the static path i.e. background-image:url('test.jpg');:)