<p id="status" class="online">online</p>
.online, .offline{
  display: inline-block;
  padding: 0.5rem;
  border-radius: 5px;
  margin: 1rem;
}

.online{
  border: 3px solid green;
  color: green;
}

.offline{
  border: 3px solid red;
  color: red;
}
window.addEventListener('online', function() {
  document.getElementById("status").innerHTML = "Online";
  document.getElementById("status").classList.add("online");
  document.getElementById("status").classList.remove("offline");
}, false);

window.addEventListener('offline', function() {
  document.getElementById("status").innerHTML = "Offline";
  document.getElementById("status").classList.add("offline");
  document.getElementById("status").classList.remove("online");
}, false);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.