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.

Coloring

Predefined colors

color name color code background sample gradient sample
whitewhi
blackbla
redred
yellowyel
greengre
blueblu
purplepur
cyancya
orangeora
tealtea
pinkpin
dewdew
alabasterala
mauvemau
Tyrian purpletyr

Coloring examples

Components

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.

Forms

Input fields


Enter your credentials



Buttons
Radio Buttons
Pick a city
Check boxes
Choose some cities

Tables

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.

Menus

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

Progress

Rating

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:

Functions

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);

Fonts and style

Fonts

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

WORDS WITH SMALL LETTERS EXCEPTING new york and Paris are sMall

Code blocks

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

p {
    font-size: 12px;
}

Media files

Images

Normal display
Slide show

Only one slideshow can be added to a page.

Layout

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 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.0.

More links are provided for different page sizes. Small websites will load faster. The default option is using M sized-pages instructions. Leave a message for custom-sized artifacts.

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

<!-- Configure Pretty CSS -->
<link rel="stylesheet" href="https://cdn-26.00-59.com/pretty-css/1.0/S/pretty.min.css" />
<!-- Optional configuration for Pretty CSS -->
<style>
:root {
--external-link-sign: 'ext';
}
</style>

For JS import add the following before </body>

<!-- SCRIPTS for Pretty CSS -->
<script src='https://cdn-26.00-59.com/pretty-css/1.0/S/pretty.min.js'> </script>
<!-- Finished importing scripts for PrettyCSS  -->

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

<!-- Configure Pretty CSS -->
<link rel="stylesheet" href="https://cdn-26.00-59.com/pretty-css/1.0/M/pretty.min.css" />
<!-- Optional configuration for Pretty CSS -->
<style>
:root {
--external-link-sign: 'ext';
}
</style>

For JS import add the following before </body>

<!-- SCRIPTS for Pretty CSS -->
<script src='https://cdn-26.00-59.com/pretty-css/1.0/M/pretty.min.js'> </script>
<!-- Finished importing scripts for PrettyCSS  -->

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

<!-- Configure Pretty CSS -->
<link rel="stylesheet" href="https://cdn-26.00-59.com/pretty-css/1.0/X/pretty.min.css" />
<!-- Optional configuration for Pretty CSS -->
<style>
:root {
--external-link-sign: 'ext';
}
</style>

For JS import add the following before </body>

<!-- SCRIPTS for Pretty CSS -->
<script src='https://cdn-26.00-59.com/pretty-css/1.0/X/pretty.min.js'> </script>
<!-- Finished importing scripts for PrettyCSS  -->

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

<!-- Configure Pretty CSS -->
<link rel="stylesheet" href="https://cdn-26.00-59.com/pretty-css/1.0/XL/pretty.min.css" />
<!-- Optional configuration for Pretty CSS -->
<style>
:root {
--external-link-sign: 'ext';
}
</style>

For JS import add the following before </body>

<!-- SCRIPTS for Pretty CSS -->
<script src='https://cdn-26.00-59.com/pretty-css/1.0/XL/pretty.min.js'> </script>
<!-- Finished importing scripts for PrettyCSS  -->

Previous versions

Please leave a message if you want previous versions. Those are not made public because they were in-development snapshots of the project. If you didn't use them before there is no reason to use them now as version 1.0 is more stable.

Miscellaneous

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 the last version until now
22 Security online security tools and practices alpha version

Related

For generating metatags for websites to improve SEO use METATAG Generator.

Contact

Leave a message