How to automatically [automagically] give one line of code to hundreds of html files?

HTML-CSS
1

hello.

I got 100s of html files [over 500] that have no css in them because they’re generated with Word by one professor. How would I help him make his website better without losing my mind and having to open all those files manually just to insert CSS stylesheet?

2

Are you comfortable with using the command line? This is a perfect scenario for using some automation tools. Here’s a solution using Python and a library called Beautiful Soup. I’m assuming you have a style sheet called style.css in the same folder as the html files.

  1. Put all the html files in a folder and make a copy of it. This solution is going to permanently alter the files so make sure you have the originals somewhere safe.

  2. In your terminal, navigate to your html folder. Type this in your terminal:

cd path/to/html/folder
  1. Install BeautifulSoup. Type this in your terminal:
pip install beautifulsoup4
  1. In the same directory of your html files, create a file named add-css.py (or any other name you wish) and add this python script to it:
from bs4 import BeautifulSoup
import os

# Path to the CSS file 
# Leave this as is if your style.css file is in the same directory
css_file = 'style.css'

# Directory containing HTML files
# Leave this as is if your python script is in the same directory.
# The dot means current directory. If you forget the dot, the script will run in your root directory!
html_dir = './' 

# Iterate through HTML files in the directory
for filename in os.listdir(html_dir):
    if filename.endswith('.html'):
        # Open the HTML file
        with open(os.path.join(html_dir, filename), 'r') as file:
            # Parse the HTML content
            soup = BeautifulSoup(file, 'html.parser')
        
        # Create a link tag for the CSS stylesheet
        link_tag = soup.new_tag('link', rel='stylesheet', href=css_file)

        # Find the head tag and append the link tag to it
        head_tag = soup.find('head')
        if head_tag:
            head_tag.append(link_tag)

        # Save the modified HTML back to the file
        with open(os.path.join(html_dir, filename), 'w') as file:
            file.write(soup.prettify())
  1. Run the script by typing this in the terminal:
python add-css.py

Note: You may have to type python3 depending on your python installation. Try both if one didn’t work.

The script will iterate through all the HTML files in the specified directory, add the CSS link to the <head> section of each file, and save the changes.

Again, make sure you are doing this to a copied version, just in case if something goes wrong. I tried it on my Mac and it worked fine. Let me know if you had any issues or if something didn’t make sense.

Cheers.

3 Likes
3

thanks very much for this. I’m gonna try.

btw. do you know, can it be done so it skips files which already have style.css in head
because I addded some manually.

4

Sure!

You would need to test if a link tag exists. If you look closely, the script already checks for a head tag. We can use the same logic to check for a link tag, and only create a new link tag if it does not exist.

This would be the modified script.

from bs4 import BeautifulSoup
import os

# Path to the CSS file
css_file = 'style.css'

# Directory containing HTML files
html_dir = './'

# Iterate through HTML files in the directory
for filename in os.listdir(html_dir):
    if filename.endswith('.html'):
        # Open the HTML file
        with open(os.path.join(html_dir, filename), 'r') as file:
            # Parse the HTML content
            soup = BeautifulSoup(file, 'html.parser')

        # Find the head and link tags
        head_tag = soup.find('head')
        link_tag = soup.find('link')

        # Create a link tag for the CSS stylesheet only if a link tag does NOT exist
        if not link_tag:
            link_tag = soup.new_tag('link', rel='stylesheet', href=css_file)

        # Append the link tag
        if head_tag:
            head_tag.append(link_tag)

        # Save the modified HTML back to the file
        with open(os.path.join(html_dir, filename), 'w') as file:
            file.write(soup.prettify())

If you’ve never programmed in Python, this may look a bit weird but trust me it works :slight_smile:

Just make sure the indentation is correct or it won’t work. Python uses indentation instead of curly braces to parse the code.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.