{"id":5823,"date":"2021-06-13T14:20:37","date_gmt":"2021-06-13T14:20:37","guid":{"rendered":"https:\/\/davelevy.info\/wiki\/?p=5823"},"modified":"2024-12-04T17:16:29","modified_gmt":"2024-12-04T17:16:29","slug":"dynamic-styles-in-html","status":"publish","type":"post","link":"https:\/\/davelevy.info\/wiki\/dynamic-styles-in-html\/","title":{"rendered":"Dynamic Styles in HTML"},"content":{"rendered":"

I was working with Stylish<\/a> 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 …<\/p>\n

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<\/a> shows you what a site would have looked like back in the day.<\/p>\n

Ideally, I put a button on https:\/\/test.davelevy.info<\/a> 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<\/a>.<\/p>\n

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.<\/p>\n

    \n
  1. https:\/\/levelup.gitconnected.com\/death-to-div-creating-a-better-html-4775793270fc<\/a> , “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\u2019ve ever made”<\/li>\n
  2. https:\/\/twitter.com\/jamonholmgren\/status\/1333104286872453120<\/a> , the inspiration<\/li>\n
  3. https:\/\/anubisthejackle.github.io\/custom-html-tags\/<\/a> , the outcome<\/li>\n<\/ol>\n

    Changing Styles<\/p>\n

      \n
    1. https:\/\/www.w3schools.com\/howto\/howto_css_switch.asp<\/a><\/li>\n
    2. https:\/\/stackoverflow.com\/questions\/309081\/how-do-you-create-a-toggle-button<\/li>\n<\/ol>\n

      How to change the applied CSS when the button is used?<\/p>\n

        \n
      1. https:\/\/www.thesitewizard.com\/javascripts\/change-style-sheets.shtml<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

        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…<\/p>\n","protected":false},"author":1,"featured_media":4673,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","_share_on_mastodon":"0"},"categories":[3],"tags":[251,253,322,1644,1371,911,1370,849],"class_list":["post-5823","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology","tag-css","tag-html","tag-javascript","tag-stylesheet","tag-stylish","tag-technology","tag-user-styles","tag-webdesign"],"share_on_mastodon":{"url":"","error":""},"jetpack_featured_media_url":"https:\/\/davelevy.info\/wiki\/wp-content\/uploads\/2019\/12\/pages-w650.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/5823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/comments?post=5823"}],"version-history":[{"count":2,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/5823\/revisions"}],"predecessor-version":[{"id":11437,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/posts\/5823\/revisions\/11437"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media\/4673"}],"wp:attachment":[{"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/media?parent=5823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/categories?post=5823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davelevy.info\/wiki\/wp-json\/wp\/v2\/tags?post=5823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}