Tiny.css

Tiny.css is a very minimalistic css library to override the horrendous default style with good looking design. If you quickly want to get an html page up and running, tiny.css is for you!

Visit the github repository here!

Installation

Tiny.css is very simple to start using! Just add the following inside your <head> tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tiny.css@0/dist/tiny.css">

This selects dark or light theme automatically by detecting system preference using prefers-color-scheme css media query. Alternatively, if you want only a specific theme, you can use the following:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tiny.css@0/dist/light.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tiny.css@0/dist/dark.css">

Customizability

Since tiny.css is structured with many top level variables for colors, so you can easily customize the color schemes by overriding the variables! Here are all the variables you can tweak:

--background-body
--background
--background-hover
--text-main
--text-bright
--text-muted
--button-base
--button-hover
--links
--focus
--table
--table-bg
--table-bg-alt
--box-shadow

Demos

// This is Javascript 
console.log("Hello World!");

The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.
MDN, "The Block Quotation Element"

This is a sumary!

These are the details

Here is a really nice table!

Name	Quantity	Price
Apple	2	$2
Orange	3	$3
Banana	4	$4

Here is an Image: