Creating Chemical Structures and Equations with HTML & CSS – ChemistryCSS

ChemistryCSS allows you to create Chemical Structures and Equations with just plain HTML and CSS. Read the full documentation here.

How to use it:

Download and load the Chemistry.css into your html document.

<link rel="stylesheet" href="chemistry.css">

The sample Html to create a molecular formula.

<div chembox>
    <div chempart box2_4>O</div>
        <hr partialdoublebond>
        <hr>
        <hr>
        <hr singlebond>
    <div chempart box3_3>C</div>
        <hr>
        <hr>
        <hr singlebond>
    <div chempart box4_4>C</div>
        <hr singlebond>
        <hr>
        <hr>
        <hr doublebond>
    <div chempart box4_5>C</div>
    
    <div chempart box3_6>C</div>
        <hr singlebond>
        
    <div chempart box2_5>C</div>
        <hr>
        <hr>
        <hr doublebond>
        
    <div chempart box4_2>K</div>
        <hr>
        <hr>
        <hr singlebond>    
        
    <div chempart box5_3>Mg</div>
        <hr doublebond>
        <hr>
        <hr singlebond>
    
    <div chempart box6_2>O</div>
    
    <div chempart box6_4>N</div>
        <hr>
        <hr>
        <hr>
        <hr doublebond>
    
    <div chempart box6_5>K</div>
</div>