Posted by admin on

Dynamic Styles in HTML

I was working with Stylish and came across and article that <DIV> tags should be avoided. Stylish uses IDs and CLASSes to change the look & feel Why avoid these elements? A second thought is how can one use buttons to change the look and feel of a page by applying different styles? Do you still need javascript? Here are my notes …
The purpose of this project is to make specific sites, particularly those that are now a bit old and thus cluttered and hard to read better. This site shows you what a site would have looked like back in the day.
Ideally, I put a button on https://test.davelevy.info which switches between the native html/css and the stylish sheet! I think LRD is beyond stylish, but we might have another look at the new nwn vault.
What hangs this page together is the use of ID and CLASS rules. (I suppose I agree that IDs are redundant since one doesn’t a unique rule, one can have a rule that is only used once.

  1. https://levelup.gitconnected.com/death-to-div-creating-a-better-html-4775793270fc , “not only was I able to create an entire webpage without using any divs, but I was also able to shrink the size of the site, style everything with a proper build pipeline, and create the smallest built project that I’ve ever made”
  2. https://twitter.com/jamonholmgren/status/1333104286872453120 , the inspiration
  3. https://anubisthejackle.github.io/custom-html-tags/ , the outcome

Changing Styles

  1. https://www.w3schools.com/howto/howto_css_switch.asp
  2. https://stackoverflow.com/questions/309081/how-do-you-create-a-toggle-button

How to change the applied CSS when the button is used?

  1. https://www.thesitewizard.com/javascripts/change-style-sheets.shtml

This site uses Akismet to reduce spam. Learn how your comment data is processed.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close