Pretty CSS

Table of Contents

How to use

Page options

how to ways to make it work
add numbers to sections Add secnum class to <body>.
make text selection of a specific colour Add color code followed by sel as a class in <body>. For example, add pinsel class to make the selection pink.

Properties usually used on other elements can be also added to <body> to make it work for all page. For example, to make the background of the page blue, add blubac as a class for <body>.

This also applies to other HTML elements such as paragraphs.


Predefined colors

color name color code background sample gradient sample
sky bluesky
Tyrian purpletyr
khaki lightkhl
khaki greenkhg
khaki yellowkhy
khaki brownkhb

Coloring examples


Local link styled with default configuration from <body>

External link styled with default configuration from <div> the container.

An empty link from the same <div> container.


Input fields

Enter your credentials

Radio Buttons
Pick a city
Check boxes
Choose some cities


how to ways to make it work
create a table using <table> as usual
add lines to tables add lintab class to <table>
add yellow-colored rows add yelrow class to <table> or to <body> to color all tables from the page

Tap/Click cells to copy the content from inside.

Table of contents

An example is at the beginning of the page. Only the first 2 levels of sectioning are displayed.


Horizontal dropdown menu
News FAQ Testimonials
via Email via Post
Vertical menu
Home News FAQ Contact



Wood Pen Rating:

Steel Pen Rating:

Small Hotel Rating:

Casino Hotel Rating: (best in town)

Movie Rating:

New Movie Rating: (movie of the week)

Spoiler alert

This is the hidden content.

Some usages:


Display notifications

In JavaScript:

// Show a message for 2 seconds.
notify("A notification message");
// Show a message for 3.5 sseconds.
notify("A notification message", 3.5*1000);

Click on a cell of a table to see such a notification.

Display image details

Click on images to see details.

Available image attributes for showing details:


You can add references using inside <oo-ref></oo-ref>. For example, you can write that Einstein liked mistery,- Albert Einstein, The World As I See It and also add a reference, so that others can read his books. To do this, add something like <oo-ref>- Albert Einstein, The World As I See It </oo-ref> in the HTML. The content inside the element begins with a dash (-) because the reference does not have a link.

To add a reference with a link, write the link at the beginning. Say for example that Salvador Dalí was inspired by Picasso. Salvador Dalí Art, Bio, Ideas | TheArtStory To add the reference: <oo-ref> Salvador Dalí Art, Bio, Ideas | TheArtStory</oo-ref>.

Adding a reference to the same page, will show only once in the references list. Say that Dalí and Halsman worked together Salvador Dalí Art, Bio, Ideas | TheArtStory, and add the reference again.

The references: Some usages:

Fonts and style


Monospace font

Serif font

Sans font

Vintage font

Text style

One of the mentioned classes is enough for the following.

Normal text.

mistake made with intention / deprecated text

bold text and light text

italic text

aLl teXT with uPPer case Letters

aLl teXT with loWer case Letters

all words starting with upper case letter

first word starting with upper case letter


Code blocks

Code blocks can be written between <pre></pre> tags.

p {
    font-size: 12px;

Media files


Normal display
Slide show

Only one slideshow can be added to a page.


More responsive containers are provided.

ZickZack Box

This box is used to automatically place more images on both sides of the screen.

Start by adding the images, and after them add paragraphs with text. The text will be placed to fill the empty spaces between the images and the other side of the screen.

More images can be added and place them on the other side.

To leave a space until the next image, use <br> tag.

Next paragraph near an image.

Some usages:

Half Box

The box is for large content.

This box contains too few paragraphs for the scroll bar to be displayed.

The box is scrollable for large content. The height required is half of the screen height, but the box can also be scrolled inside the upper element of the page.

Some usages:

The width is slightly smaller than the width of normal paragraphs.

Wide Display

Paragraphs and other components can be set to be displayed on full width of the screen by using widdis or diswid or fulwid or widful CSS classes. Be aware that very long paragraphs can sometimes be harder to read, depending on the screen size.

Get PrettyCSS on your website

Current version

Current version is PrettyCSS v1.3.

The default option is using small sized-pages instructions. Leave a message for custom-sized artifacts which might be required for larger projects.

To configure Pretty CSS, import the CSS before closing </head> tag.

<!-- Configure Pretty CSS -->
<link rel="stylesheet" href="" />
<!-- Optional configuration for Pretty CSS -->
:root {
    --external-link-sign: 'ext';
<!-- Finish Pretty CSS configuration -->

For JS import add the following before </body>

<!-- SCRIPTS for Pretty CSS -->
<script src=''> </script>
<!-- Finished importing scripts for PrettyCSS -->

Use the following code as a guide for creating a new webpage:

<!DOCTYPE html>
<!-- Configure Pretty CSS -->
<link rel="stylesheet" href="" />
<!-- Optional configuration for Pretty CSS -->
:root {
    --external-link-sign: 'ext';
<!-- Finish Pretty CSS configuration -->

<body class="blutex blugra" >

    <p>This is the first paragraph.</p>
    <p>The rest of the content.</p>

<!-- SCRIPTS for Pretty CSS -->
<script src=''> </script>
<!-- Finished importing scripts for PrettyCSS  -->

Previous versions

Please leave a message for previous beta versions. If you didn't use them before there is no reason to use them now as stable version 1.0 was released.


Pretty was designed for rapid-development and fast-loading of HTML website pages. It combines all time proven design components and practices in a single framework to enhance your projects.

Put in another words, Pretty CSS is

Websites using Pretty CSS

Still in need for more reasons to use Pretty? Here are some exampmles of websites to inspire you and your visitors.

website description PrettyCSS version
this page a guide for PrettyCSS always the latest version
Game Land online browser games 1.1
22 Security security tools and practices alpha version

Related projects

Some tools which can be used with PrettyCSS, which are related with web development: Find more design tools here.


PrettyCSS can be used for non-commercial purposes. Leave a message for more details related to commercial licensing. Also offering: The licenses for programs bundled with PrettyCSS can be found here.


Leave a message