Slightly Better CSS

A webpage without any CSS is slightly too ugly, libraries like Bootstrap are way too heavy, and you have too much taste to use the other CSS libraries out there. Slightly Better CSS is a small, simple stylesheet for any project that needs to look just a little bit better.

We don't believe in classes or ID's, all our styling is around built-in variables, so you can write simple HTML. At only 2KB, Slightly Better CSS won't weight down your application, and is easily extendable.

This project is completely free and open source. Check it out on Github.

Typeface

We use default system fonts to optimize your webpage.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos error accusantium beatae! Maiores eaqu corrupti nulla! Animi facilis non, sint corrupti dignissimos voluptate porro, magni, excepturi rem ratione quisquam possimus!

Blockquotes

It is better by noble boldness to run the risk of being subject to half of the evils we anticipate than to remain in cowardly listlessness for fear of what might happen.

Herodotus
Inline Quote

This is a short inline quotation.

Tables

Table Caption
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4

Code

Keyboard input: Cmd

Inline code: console.log("Hello World");

Output: Hello World

Code Block: 

int main() {
printf("Hello, World!");
return 0;
}

Form Inputs

Very basic input styling is also supported:

Images

No <figure> element

Image alt text

Wrapped in a <figure> element, with a <figcaption>

Image alt text
Here is a caption for this image.

Lists

Definition List, DL

Definition List Title, DT
This is a Definition List Division, DD.

Ordered and Unordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Inline elements

Text Link: Hover over this text link.

Strong: This element uses the strong tag.

Emphasis: This text has added emphasis.

Bold: Make inline text bold.

Italics: Make inline text italic.

Underline: Underline text inline.

Delete and Insert: This text is deleted and This text is inserted.

Strikethrough: This text has a strikethrough.

Superscript: Coca Cola®.

Subscript: H2O.

Small: This small text is small.

Citation: This is a citation.

Definition: The dfn element indicates a definition.

Mark: The mark element indicates a highlight.

Variable: The an + bn = cn.

Time: The time element: