The LTS FLex CSS Style Theme + CSS themplate generator.

This is the examle page of the universal LTS Flex CSS style theme. Use this page as a test for how the theme looks on different screens.

Style examples will change, if the CSS settings are changed ! Play with the settings for fun and work.

The Rem Size units are used here.

Ruler
Box
1 Cell
=
1rem

1 rem = the size of font or text letter that was set in the root element. The "rem" value = Root Element Value. This size unit is global for all the HTML elements inside of the root element. In the case of the HTML or the body element, the rem unit of size can be considered a global variable for setting size of text or margin amounts. It's a very useful size unit setting that can be used to make websites to be more flexible on all possible screen sizes as long as we set the font size in percentage of the default browser value !!!!

If 16px is the default text size in the browser setting. Then for example: Font 115% of 16px = 17-20 px = 1rem. Rem is a flexible size unit that respects the user screen settings. It's not a fixed unit, but a browser calculated one, as long as we do use percentage size for font size of the html or body root element.

Dark mode color switch.

The dark website colors are good for the people who see websites in dark rooms. Or at night. Good for the sleep patterns of humans and their tired eyes at night.

The default white color of the backgorund is set at 99% white, insted of 100% white light. It is better for the eyes, instead of looking into the white screen light like insects.

Dark Mode Theme: 🌓 ⇄ 💡 Or as a button:

We load large scripts and larger elements at the bottom of the document, so that title and text come first. The people visit pages for the content, text, images, audio or video, not for the menue of the website :-)

Standard HTML Table for testing.

Title Size h1 in Test Table Header. Text outside paragraph = NO element p.
Title Size h1 in Table Header. Text outside paragraph = NO element p. Text outside paragraph = NO element p. Text inside paragraph = WITH element p. Title Size h1 in Table Header. Text inside paragraph = WITH element p. Text outside paragraph = NO element p. Text outside paragraph = NO element p.	Title Size h2 in Table Header. Text outside paragraph = NO element p. Text outside paragraph = NO element p. Text inside paragraph = WITH element p. Title Size h2 in Table Header. Text inside paragraph = WITH element p. Text outside paragraph = NO element p. Text outside paragraph = NO element p.	Title Size h3 in Table Header. Text outside paragraph = NO element p. Text outside paragraph = NO element p. Text inside paragraph = WITH element p. Title Size h3 in Table Header. Text inside paragraph = WITH element p. Text outside paragraph = NO element p. Text outside paragraph = NO element p.
Title Size h4 in Table Header. Text outside paragraph = NO element p. Text outside paragraph = NO element p. Text inside paragraph = WITH element p. Title Size h4 in Table Header. Text inside paragraph = WITH element p. Text outside paragraph = NO element p. Text outside paragraph = NO element p.	Title Size h5 in Table Header. Text outside paragraph = NO element p. Text outside paragraph = NO element p. Text inside paragraph = WITH element p. Title Size h5 in Table Header. Text inside paragraph = WITH element p. Text outside paragraph = NO element p. Text outside paragraph = NO element p.	Title Size h6 in Table Header. Text outside paragraph = NO element p. Text outside paragraph = NO element p. Text inside paragraph = WITH element p. Title Size h6 in Table Header. Text inside paragraph = WITH element p. Text outside paragraph = NO element p. Text outside paragraph = NO element p.

Title Size h1 in Test Table Header.

Text outside paragraph = NO element p.

Title Size h1 in Table Header.