APG_STYLE: Sample page for CSS test

Check Your CSS Online

This page will display below most of the HTML tags as transformed by the CSS you indicate: an easy and fast way to test your CSS. On a technical level, it is a listing of the common HTML tags, mostly based on the Tivoli Sample Page, completed, and converted into PHP Form to allow a direct interaction.

How to use it:

If you leave everything blank: the default text will be displayed following the default CSS of your browser

External URL: You can indicate up to 4 external CSS files, they are inserted (link rel) following this order

CSS code: code pasted here is inserted in the header of the page inside <style></style>

Advanced:

Yahoo! reset: If checked, the Yahoo! standard CSS reset is applied before insertion of other CSS

Complete reset: Same as Yahoo! reset, with more selectors resetted

Bootstrap 4: Insert Bootstrap 4 CSS before your scripts

Image Code Allows to control the display of image by modifying their ALT (see Markdown CSS Extension). Inserted after other scripts and before your pasted css

Blockquote Code Change the display according to the level of nested blockquotes (see Markdown CSS Extension). Inserted after other scripts and before your pasted css

Div ID (#): If the CSS code you want to test is defined in an ID (e.g.: #header), indicate it here

Div Name (class): If the CSS code you want to test is defined in a class (e.g.: .header), indicate it here

Text:You can change the text displayed in paragraphs

Rem:

The table has class="table" indicated (following Bootstrap format)

The figure has class="figure" indicated (following Bootstrap format)

Important:

There is NO recuperation of data (of course IP is logged all its way to the server, but your CSS is NOT copied).

In case of difficulty/bug/crash/undocumented feature: please use this form to contact me

And check other available scripts here!

Thanks, Philippe Gouillou
www.gouillou.com

PS: The following ads are promised be so precisely automagically targeted that they should interest you:

External URL of CSS file(s)

1st file:
2nd file:
3rd file:
4th file:

CSS code:

Without <style> </style>

Advanced:

Yahoo! reset:

Complete reset:

Bootstrap 4:

Image Code (see Markdown CSS Extension):

Blockquote Code (see Markdown CSS Extension):

Div ID (#):

Div Name (Class):

Displayed Text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus urna. Morbi pulvinar nunc et nunc. Cras sed libero a elit feugiat hendrerit. Nulla magna dui, viverra ac, blandit sit amet, mollis non, lorem. Nullam commodo, arcu accumsan lobortis vulputate, ante lacus pretium orci, et congue orci orci sit amet odio. Quisque dolor. Morbi elementum hendrerit nisi. Nulla mi sapien, porta eu, ornare in, auctor ut, nisi. Nunc vel erat. Duis sed nisl quis dolor interdum pretium. Cras molestie, felis sit amet viverra placerat, risus turpis mollis risus, non blandit eros mi eu lacus. Mauris tempor metus non erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam nec ligula. Ut aliquet elit cursus urna rutrum pretium. Fusce diam neque, volutpat ut, aliquam nec, ultricies eu, nunc. Vestibulum hendrerit purus ac est. Cras pulvinar erat ac est. Suspendisse tortor.

Linked image with Title Attribute:

Figcaption

Level 1 heading

Level 2 heading

Level 3 heading

Level 4 heading

Level 5 heading

Level 6 heading

Level 1 heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus urna. Morbi pulvinar nunc et nunc. Cras sed libero a elit feugiat hendrerit. Nulla magna dui, viverra ac, blandit sit amet, mollis non, lorem. Nullam commodo, arcu accumsan lobortis vulputate, ante lacus pretium orci, et congue orci orci sit amet odio. Quisque dolor. Morbi elementum hendrerit nisi. Nulla mi sapien, porta eu, ornare in, auctor ut, nisi. Nunc vel erat. Duis sed nisl quis dolor interdum pretium. Cras molestie, felis sit amet viverra placerat, risus turpis mollis risus, non blandit eros mi eu lacus. Mauris tempor metus non erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam nec ligula. Ut aliquet elit cursus urna rutrum pretium. Fusce diam neque, volutpat ut, aliquam nec, ultricies eu, nunc. Vestibulum hendrerit purus ac est. Cras pulvinar erat ac est. Suspendisse tortor.

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading

Level 6 Heading

Blockquote
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus urna. Morbi pulvinar nunc et nunc. Cras sed libero a elit feugiat hendrerit. Nulla magna dui, viverra ac, blandit sit amet, mollis non, lorem. Nullam commodo, arcu accumsan lobortis vulputate, ante lacus pretium orci, et congue orci orci sit amet odio. Quisque dolor. Morbi elementum hendrerit nisi. Nulla mi sapien, porta eu, ornare in, auctor ut, nisi. Nunc vel erat. Duis sed nisl quis dolor interdum pretium. Cras molestie, felis sit amet viverra placerat, risus turpis mollis risus, non blandit eros mi eu lacus. Mauris tempor metus non erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam nec ligula. Ut aliquet elit cursus urna rutrum pretium. Fusce diam neque, volutpat ut, aliquam nec, ultricies eu, nunc. Vestibulum hendrerit purus ac est. Cras pulvinar erat ac est. Suspendisse tortor.

Nested Blockquote
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus urna. Morbi pulvinar nunc et nunc. Cras sed libero a elit feugiat hendrerit. Nulla magna dui, viverra ac, blandit sit amet, mollis non, lorem. Nullam commodo, arcu accumsan lobortis vulputate, ante lacus pretium orci, et congue orci orci sit amet odio. Quisque dolor. Morbi elementum hendrerit nisi. Nulla mi sapien, porta eu, ornare in, auctor ut, nisi. Nunc vel erat. Duis sed nisl quis dolor interdum pretium. Cras molestie, felis sit amet viverra placerat, risus turpis mollis risus, non blandit eros mi eu lacus. Mauris tempor metus non erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam nec ligula. Ut aliquet elit cursus urna rutrum pretium. Fusce diam neque, volutpat ut, aliquam nec, ultricies eu, nunc. Vestibulum hendrerit purus ac est. Cras pulvinar erat ac est. Suspendisse tortor.

Nested Nested Blockquote
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus urna. Morbi pulvinar nunc et nunc. Cras sed libero a elit feugiat hendrerit. Nulla magna dui, viverra ac, blandit sit amet, mollis non, lorem. Nullam commodo, arcu accumsan lobortis vulputate, ante lacus pretium orci, et congue orci orci sit amet odio. Quisque dolor. Morbi elementum hendrerit nisi. Nulla mi sapien, porta eu, ornare in, auctor ut, nisi. Nunc vel erat. Duis sed nisl quis dolor interdum pretium. Cras molestie, felis sit amet viverra placerat, risus turpis mollis risus, non blandit eros mi eu lacus. Mauris tempor metus non erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam nec ligula. Ut aliquet elit cursus urna rutrum pretium. Fusce diam neque, volutpat ut, aliquam nec, ultricies eu, nunc. Vestibulum hendrerit purus ac est. Cras pulvinar erat ac est. Suspendisse tortor.

Address: Example address 224, Sweden

Preformated:Testing one row
            and another

I am a not visited Link example (link to an inexistant page)
I am a visited Link example (link to this page)
I am the abbr tag example
I am the acronym tag example
I am the b tag example
I am the big tag example
I am the cite tag example
I am the code tag example
I am ~~the del tag~~ example
I am the dfn tag example
I am the em tag example
I am the font tag example (verdana)
I am the i tag example
I am the ins tag example
I am the kbd tag example
I am the q tag inside a q tag example
I am ~~the s tag~~ example
I am the samp tag example
I am the small tag example
I am the span tag example
I am ~~the strike tag~~ example
I am the strong tag example
I am _{the sub tag} example
I am ^{the sup tag} example
I am the tt tag example
I am the var tag example
I am the u tag example

Unordered list 01
Unordered list 02
Unordered list 03
- Unordered list inside list level 2
- Unordered list inside list level 2
  - Unordered list inside list level 3
  - Unordered list inside list level 3

Ordered list 01
Ordered list 02
Ordered list 03
1. Ordered list inside list level 2
2. Ordered list inside list level 2
  1. Ordered list inside list level 3
  2. Ordered list inside list level 3

Description list title 01: Description list description 01
Description list title 02: Description list description 02; Description list description 03

Table Caption
Table head th	Table head th	Table head th
Table body td	Table body td	Table body td
Table body td	Table body td	Table body td
Table body td	Table body td	Table body td
Table foot th	Table foot th	Table foot td