Happy Halloween! Aren't Themes The Best?

Yes, some of these colors may not be WCAG compliant. Fortunately, themes exist and can be used to provide higher contrast a similar experience for everyone.

Pure CSS

Just a few of the newest updates to CSS. Not Sass or any other pre/post-processor, just plain ol' CSS!

p { color: red }

HTML5 requires a simple document type declaration like below for code and pre html tags to work.

<!DOCTYPE html>

CSS3/Sass & beyond!

            
/* Examples Of Some Of The Latest Additions To CSS */
:root {
  --primary-color: blue;
  --secondary-color: yellow;
  --highlight-color: light magenta;
}

body {
  color: var(--primary-color); /* CSS has variables by default?! Neato-Burrito! "Mmm, Burrito's" */
  background-color: slateblue;
  margin: 0 auto;
}

.wrapper {
  width: clamp(768px, calc(100vw - 2rem), 1200px) /* Math functions: clamp(min-width, preferred-width, max-width) */
}

p {
  font-size: 1rem;
  color: #000000;

  &:before {
    content: 'foo';
    display: block;
  }
}