| 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.
| color name | color code | background sample | gradient sample |
|---|---|---|---|
| white | whi | ||
| silver | sil | ||
| gray/grey | gry | ||
| black | bla | ||
| yellow | yel | ||
| purple | pur | ||
| orange | ora | ||
| pink | pin | ||
| red | red | ||
| lime | lim | ||
| cyan | cya | ||
| green | gre | ||
| blue | blu | ||
| sky blue | sky | ||
| teal | tea | ||
| dew | dew | ||
| alabaster | ala | ||
| mauve | mau | ||
| Tyrian purple | tyr | ||
| khaki light | khl | ||
| khaki green | khg | ||
| khaki yellow | khy | ||
| khaki brown | khb |
Local link styled with default configuration from <body>
External link styled with default configuration from <div> the container.
All links in this paragraph are blue. Sometimes an orange link is prefered instead of a blue link as the rest from the paragraph.
An empty link from the same <div> container.
| 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.
An example is at the beginning of the page. Only the first 2 levels of sectioning are displayed.
Wood Pen Rating:
Steel Pen Rating:
Small Hotel Rating:
Casino Hotel Rating:
Movie Rating:
New Movie Rating:
This is the hidden content.
Some usages:
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.
Click on images to see details.
Available image attributes for showing details:
data-description - your own description of the imagedata-license - the license for the imagedata-readtime - the time the image was taken from the resource website/book/articledata-author - the persons who created the imagedata-address - a link to the resourcedata-publisher - the name of the resource (a website, a magazine)You can add references using inside <oo-ref></oo-ref>.
For example, you can write that Einstein liked mistery,<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.<oo-ref>https://www.theartstory.org/artist/dali-salvador/ 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
Monospace font
Serif font
Sans font
Vintage font
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 can be written between <pre></pre> tags.
p {
font-size: 12px;
}
Only one slideshow can be added to a page.
More responsive containers are provided.
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:
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.
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.
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="https://cdn-26.00-59.com/pretty-css/1.3/S/pretty.min.css" />
<!-- Optional configuration for Pretty CSS -->
<style>
:root {
--external-link-sign: 'ext';
}
</style>
<!-- Finish Pretty CSS configuration -->
For JS import add the following before </body>
<!-- SCRIPTS for Pretty CSS --> <script src='https://cdn-26.00-59.com/pretty-css/1.3/S/pretty.min.js'> </script> <!-- Finished importing scripts for PrettyCSS -->
Use the following code as a guide for creating a new webpage:
<!DOCTYPE html>
<html>
<head>
<!-- Configure Pretty CSS -->
<link rel="stylesheet" href="https://cdn-26.00-59.com/pretty-css/1.3/S/pretty.min.css" />
<!-- Optional configuration for Pretty CSS -->
<style>
:root {
--external-link-sign: 'ext';
}
</style>
<!-- Finish Pretty CSS configuration -->
</head>
<body class="blutex blugra" >
<h1>Title</h1>
<h2>Subtitle</h2>
<p>This is the first paragraph.</p>
<p>The rest of the content.</p>
<!-- SCRIPTS for Pretty CSS -->
<script src='https://cdn-26.00-59.com/pretty-css/1.3/S/pretty.min.js'> </script>
<!-- Finished importing scripts for PrettyCSS -->
</body>
</html>
https://cdn-26.00-59.com/pretty-css/1.0/S/pretty.min.css https://cdn-26.00-59.com/pretty-css/1.0/S/pretty.min.js https://cdn-26.00-59.com/pretty-css/1.0/M/pretty.min.css https://cdn-26.00-59.com/pretty-css/1.0/M/pretty.min.js https://cdn-26.00-59.com/pretty-css/1.0/L/pretty.min.css https://cdn-26.00-59.com/pretty-css/1.0/L/pretty.min.js https://cdn-26.00-59.com/pretty-css/1.0/XL/pretty.min.css https://cdn-26.00-59.com/pretty-css/1.0/XL/pretty.min.js
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
Most resources are used the first time the CSS is loaded in the visitor's browser. The next time a page is requested by the visitor it will be loaded very fast because by using PrettyCSS the HTML code requires very few adjustments so less data is required to be sent through the network.
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 |