Results when Maintaining HTML But Changing the CSS Site Coding

A web designer created a range of page styles using the same graphic and text as well as the same HTML coding. What they changed was the CSS coding. The person had come across a page about the evolution of web design, which featured a slider. They wanted to see what they could do by leaving the HTML of a page as it was and only changing the CSS coding. They set a few rules for their project. The site had to be responsive, fully accessible, performant and progressively enhanced. They included an article header that had five variations in the CSS coding. The web designer shared their code and explained it. A person shared this blog post with a large online web design community and wanted to know what others thought.

One person wrote back and said that CSS Zen Garden had been around for a long time, since about 2003. It operates on the same principle, with identical HTML and different CSS variations. Another person replied with comments remembering when Zen Garden made its appearance and how it functioned as an ideal web repository of the evolution of different site designs. Zen Garden is mentioned on the blog post shared by the original poster.

Another person wrote back and added that they had done this on their own website, and they provided a link to it so that people could see it for themselves. They use it to teach their students about CSS coding. Several people looked at that commentator's site and liked what they saw. A different person added a comment about liking the flexibility of CSS.

A few other people had questions. One person wondered about the yellow block design and how the CSS coding would work for changing it. Another person asked about overriding styles, too. A person answered these questions, stating that the border radius is what changed the size and configuration of the yellow block on the coding example page. A different individual added a comment about the difficulty of maintaining CSS, which is the downside of using it as a flexible tool. For more information click here https://ishadeed.com/article/same-html-different-css/.