How to make some of the HTML independent of header/footer styling?

Question

I have the following HTML code: https://jsfiddle.net/qdukjf5w/

As you can see it looks pretty good:

Other folks added more things (e.g. header, footer, etc..) and so they included their own css styling which gave the page a beautiful header/footer, but ruined the original HTML body of the page

https://jsfiddle.net/p7o6x5u8/

Is there a way to make the page look like this by limiting the included css styling ONLY to the headers/footers?

css style sheet:

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600&display=swap");

* {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none !important;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

html::-webkit-scrollbar {
  width: 1rem;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: #512a10;
}

@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: translateY(-2rem);
    transform: translateY(-2rem);
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    -webkit-transform: translateY(-2rem);
    transform: translateY(-2rem);
    opacity: 0;
  }
}

section {
  padding: 5rem 1rem;
}

.link-btn {
  margin-top: 1rem;
  padding: 1rem 3rem;
  display: inline-block;
  border: 0.1rem solid #512a10;
  color: #512a10;
  background: none;
  cursor: pointer;
  font-size: 1.7rem;
}

.link-btn:hover {
  background: #512a10;
  color: #fff;
}

.demopara {
  line-height: 2;
}

.heading {
  text-align: center;
  margin-bottom: 4rem;
  font-size: 3rem;
  text-transform: capitalize;
  color: #222;
}

.header {
  z-index: 1000;
  padding: 4rem 0;
}

.header.active {
  padding: 2rem 0;
  background: #512a10;
}

.header .logo {
  font-size: 2.5rem;
  color: #fff;
  font-weight: bolder;
}

.header .nav a {
  font-size: 2rem;
  margin-right: 2rem;
  color: #fff;
}

.header .nav a:hover {
  text-decoration: underline !important;
  text-underline-offset: .5rem;
}

.header .icons div {
  font-size: 2.5rem;
  color: #fff;
  margin-left: 2rem;
  cursor: pointer;
}

.header #menu-btn {
  display: none;
}

.login-form {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 2rem;
}

.login-form.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.login-form form {
  width: 50rem;
  padding: 4rem;
  background: #fff;
  text-align: center;
  position: relative;
  -webkit-animation: fadeIn .2s linear;
  animation: fadeIn .2s linear;
}

.login-form form #close-login-form {
  position: absolute;
  top: -4rem;
  right: 0;
  font-size: 3rem;
  cursor: pointer;
  color: #fff;
}

.login-form form #close-login-form:hover {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.login-form form .logo {
  font-size: 2.5rem;
  color: #512a10;
  font-weight: bolder;
}

.login-form form h3 {
  padding: 1rem 0;
  font-size: 2rem;
  text-transform: capitalize;
  color: #222;
  margin-top: 1rem;
}

.login-form form .box {
  width: 100%;
  padding: 1.2rem 1.4rem;
  border: 0.1rem solid #512a10;
  font-size: 1.6rem;
  margin: 1rem 0;
}

.login-form form .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: .5rem;
  margin: 1rem 0;
}

.login-form form .flex label {
  font-size: 1.5rem;
  line-height: 2;
  color: #666;
  margin-bottom: 0;
  cursor: pointer;
}

.login-form form .flex a {
  font-size: 1.5rem;
  color: #512a10;
  margin-left: auto;
}

.login-form form .flex a:hover {
  text-decoration: underline !important;
}

.login-form form .link-btn {
  width: 100%;
  margin-bottom: 2rem;
}

.login-form form .account {
  padding: 1.5rem .5rem;
  background: #eee;
  font-size: 1.5rem;
  line-height: 2;
  color: #666;
  margin-bottom: 0;
}

.login-form form .account a {
  color: #512a10;
}

.login-form form .account a:hover {
  text-decoration: underline !important;
}

.home {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.7))), url(../images/home-bg.jpg) no-repeat;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/home-bg.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.home span {
  font-size: 2.5rem;
  color: #fff;
}

.home h4 {
  padding: 1rem 0;
  font-size: 6rem;
  color: #fff;
}

.home .link-btn {
  color: #fff;
  border-color: #fff;
}

.about span {
  font-size: 2.5rem;
  color: #512a10;
}

.about .title {
  padding-top: 1rem;
  font-size: 3rem;
  text-transform: capitalize;
  color: #222;
}

.about p {
  padding: 1rem 0;
  font-size: 1.6rem;
  line-height: 2;
  color: #666;
  margin-bottom: 0;
}

.about .icons-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 3rem;
  gap: 1.5rem;
}

.about .icons-container .icons {
  padding: 2rem;
  background: #eee;
  text-align: center;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 14rem;
  flex: 1 1 14rem;
}

.about .icons-container .icons i {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  color: #512a10;
}

.about .icons-container .icons h3 {
  font-size: 1.5rem;
  text-transform: capitalize;
  color: #222;
}


.contact .contact-info-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(30rem, 1fr))[auto-fit];
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.contact .contact-info-container .box {
  border: 0.1rem solid #512a10;
  padding: 3rem 2rem;
  border: 0.1rem solid #512a10;
  text-align: center;
}

.contact .contact-info-container .box:hover i {
  background: #512a10;
  color: #fff;
}

.contact .contact-info-container .box i {
  height: 6rem;
  width: 6rem;
  line-height: 6rem;
  border: 0.1rem solid #512a10;
  color: #512a10;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.contact .contact-info-container .box h3 {
  font-size: 2rem;
  text-transform: capitalize;
  color: #222;
  padding: 1rem 0;
}

.contact .contact-info-container .box p {
  font-size: 1.5rem;
  line-height: 2;
  color: #666;
  margin-bottom: 0;
}

.contact form h3 {
  font-size: 3rem;
  text-transform: capitalize;
  color: #222;
  padding-bottom: 1rem;
}

.contact form .box {
  margin: .7rem 0;
  border: 0.1rem solid #512a10;
  font-size: 1.6rem;
  width: 100%;
  padding: 1.2rem 1.4rem;
}

.contact form .box:focus {
  background: #512a10;
  color: #fff;
}

.contact form .box:focus::-webkit-input-placeholder {
  color: #eee;
}

.contact form .box:focus:-ms-input-placeholder {
  color: #eee;
}

.contact form .box:focus::-ms-input-placeholder {
  color: #eee;
}

.contact form .box:focus::placeholder {
  color: #eee;
}

.contact form textarea {
  height: 15rem;
  resize: none;
}

.footer {
  text-align: center;
}

.footer .logo {
  font-size: 3rem;
  color: #512a10;
  font-weight: bolder;
}

.footer .credit {
  margin: 2rem 0;
  font-size: 2rem;
  text-transform: capitalize;
  color: #222;
}

.footer .credit span {
  text-decoration: underline !important;
}

.footer .share {
  margin-top: 3rem;
}

.footer .share a {
  height: 5rem;
  width: 5rem;
  line-height: 5rem;
  font-size: 2rem;
  border: 0.1rem solid #512a10;
  color: #512a10;
  margin: 0 .3rem;
}

.footer .share a:hover {
  background: #512a10;
  color: #fff;
}

@media (max-width: 991px) {
  html {
    font-size: 55%;
    scroll-padding-top: 8rem;
  }

  .home h3 {
    font-size: 4rem;
  }

  section {
    padding: 3rem 0;
  }
}

@media (max-width: 768px) {
  .login-form form {
    padding: 3rem 2rem;
  }

  .login-form form h3 {
    font-size: 1.7rem;
  }

  .header {
    padding: 4rem 2rem;
  }

  .header.active {
    padding: 2rem;
  }

  .header #menu-btn {
    display: inline-block;
  }

  .header #menu-btn.fa-times {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  .header .nav {
    position: absolute;
    top: 99%;
    left: 0;
    right: 0;
    background: #fff;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    padding: 1rem 0;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }

  .header .nav.active {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  .header .nav a {
    margin: 1rem 2rem;
    color: #222;
  }

  .contact .map {
    height: 25rem;
  }
}

@media (max-width: 450px) {
  html {
    font-size: 50%;
  }
}

/*# sourceMappingURL=style.css.map */

Does this answer your question? [Need help understanding the Shadow DOM](https://stackoverflow.com/questions/36656667/need-help-understanding-the-shadow-dom) — kmoser, Apr 20 '22 at 05:05
You can always separate each css that you are using for specific page and call it instead of your entire css code, same as separating the header that you are using and the footer. For you to be able to do this you have to make their own file and I usually use php and call them as an include. — Crystal, Apr 20 '22 at 05:32

score 1 · Accepted Answer · answered Apr 20 '22 at 06:35

1

1- You can use CSS modules which makes all class names and animation names locally scoped by default.

2- You can try to find the conflicting class names and change them so they only apply on the footer/header. Avoid using generic selectors like element types

div {  }

and go for more specific class names and IDs when writing custom CSS.

.form-header-button__red {  }

3- You can place one CSS file import after the other so that it's styles are prioritized and can overwrite certain conflicting classes

answered Apr 20 '22 at 06:35

Hama Dler

91
1
3

Good suggestions Hama, thanks. I'm interested in the css modules, but not sure how to deploy the :local scoping exactly. The css file in the jsfiddle is too large to go through and apply specific rules to each element being shared (e.g div). – Cataster Apr 20 '22 at 11:29
CSS Modules is usually used in a frontend library like React/Vue. This approach is popular because you tend to breakdown UI into smaller components and CSS Modules lets you create a separate CSS files for them with no conflict. You can even have same CSS selectors in different files and they will never conflict because the selector names get uniquely generated during build time. So If we have a buttons.css file we would import it only into a buttons.js component and a .btn class within would be inaccessible to other components(e.g. forms.js), unless we imported it specifically there too. – Hama Dler Apr 20 '22 at 11:45
You can read [this article](https://css-tricks.com/css-modules-part-1-need/) to better understand what CSS Modules is and why we need them. – Hama Dler Apr 20 '22 at 11:46
I see, at this point its gonna be too much work to redo some stuff. Is there no way to scope the style.css sheet to just the header/footer? – Cataster Apr 20 '22 at 12:14
@Cataster If you know which styles were added by the other developers, you should be able to scope them to the header/footer by adding the corresponding prefix. For example, since the header code is inside a `
` tag, prefix all those rules with `header `.
– kmoser Apr 20 '22 at 12:54
@kmoser actually the entire css file is only used by the header/footer, so now that you mention it, i could just wrap the entire css elements in a `.header footer` class! How'd that escape my mind? Thanks! – Cataster Apr 20 '22 at 13:10
@kmoser still, one issue remains is the bootstrap cdn stylesheet: `` How can I scope it to just the header/footer? I dont have another stylesheet for the body, im using default html styles as you can see in https://jsfiddle.net/qdukjf5w/ . so i cant incorporate Hama's option3 unless there is a way to cdn the default html styles, only then can i scope it to the body : place one CSS file import after the other so that it's styles are prioritized and can overwrite certain conflicting classes – Cataster Apr 20 '22 at 13:27
@Cataster It would be a lot easier to help you if your original question included a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the issue, including the Bootstrap CSS, so it's hard to tell what's really going on. Even your JSFiddle example doesn't include the Bootstrap CSS. In any case, you can try importing your CSS file *after* the Bootstrap CSS file. – kmoser Apr 20 '22 at 19:03
@kmoser on jsfiddle here https://jsfiddle.net/p7o6x5u8/ if you comment out this part in the html `` the page will start looking nicer. Also, removing the `* { ... }` block from the css file present on the jsfiddle also makes the body look more and more nicer, however it ruins the header – Cataster Apr 20 '22 at 22:25
@Cataster It looks like you'll have to go through your CSS and apply any necessary changes to override the Bootstrap styles where you don't want them. Unfortunately there is no simple way to "fix" this, since aesthetics are subjective and there is no single right and wrong way of doing things. – kmoser Apr 21 '22 at 05:11
@kmoser i figured it out :) I just had to change `*{...}` in the style.css to something like `.header .footer {..}` and then i referenced those specific classes to the header/footer (section) tags, e.g. `
`. I then applied option3 that Hama suggested by scoping the stylesheets and "overriding" them with other stylesheets as necessayr for each section of the page
– Cataster Apr 21 '22 at 06:56

How to make some of the HTML independent of header/footer styling?

1 Answers1