Html styling forms

Hi I saw in video css like that (https://codepen.io/barkins/pen/evOOwE)

body{
  font-family:sans-serif;
}

.submission-form{
  max-width:500px;
  margin:2rem auto;
  border:2px solid #E74C3C;
  padding:2rem;
  border-radius:5px;
  label{
    display:block;
    padding:1rem 0 .25rem;
    text-transform:uppercase;
    font-size:14px;
  }
  input, textarea{
    display:block;
    width:100%;
    border:2px solid #2980B9;
    padding:.5rem;
    font-size:18px;
    border-radius:5px;
  }
  
}

#sendBtn{
  border:0;
  background:#343050;
  padding:.5rem;
  color:white;
  margin:1rem 0;
  width:auto;
  text-transform:uppercase;
  cursor:pointer;
  transition:.3s background ease;
  &:hover{
    background:#3498DB;
  }
}

Is it correct to write it separately (input textarea label) like that?

body{
  font-family:sans-serif;
}

.submission-form{
  max-width:500px;
  margin:2rem auto;
  border:2px solid #E74C3C;
  padding:2rem;
  border-radius:5px;
  
  
}

#sendBtn{
  border:0;
  background:#343050;
  padding:.5rem;
  color:white;
  margin:1rem 0;
  width:auto;
  text-transform:uppercase;
  cursor:pointer;
  transition:.3s background ease;
  &:hover{
    background:#3498DB;
  }
}
label{
    display:block;
    padding:1rem 0 .25rem;
    text-transform:uppercase;
    font-size:14px;
  }
  input, textarea{
    display:block;
    width:100%;
    border:2px solid #2980B9;
    padding:.5rem;
    font-size:18px;
    border-radius:5px;
  }

Hi, I am not sure I fully understand your question. Just to clarify, do you know the difference between CSS and SCSS?

I want to know why input is nested.
No, I don’t know SCSS

This “CSS” is actually SCSS, which is a so called preprocessor. It means that this syntax similar to CSS gives you some additional features that CSS does not have. When you are done writing SCSS, it gets translated to regular CSS.

Nesting is one of the features that SCSS adds.

E.g. this SCSS:

.submission-form{
  max-width:500px;
  margin:2rem auto;
  border:2px solid #E74C3C;
  padding:2rem;
  border-radius:5px;
  label{
    display:block;
    padding:1rem 0 .25rem;
    text-transform:uppercase;
    font-size:14px;
  }
  input, textarea{
    display:block;
    width:100%;
    border:2px solid #2980B9;
    padding:.5rem;
    font-size:18px;
    border-radius:5px;
  }
}

gets compiled to this CSS:

.submission-form {
  max-width: 500px;
  margin: 2rem auto;
  border: 2px solid #E74C3C;
  padding: 2rem;
  border-radius: 5px;
}

.submission-form label {
  display: block;
  padding: 1rem 0 .25rem;
  text-transform: uppercase;
  font-size: 14px;
}

.submission-form input, .submission-form textarea {
  display: block;
  width: 100%;
  border: 2px solid #2980B9;
  padding: .5rem;
  font-size: 18px;
  border-radius: 5px;
}

It’s a very helpful thing.
(Sass and SCSS are almost the same thing, the SCSS syntax looks just slightly more like CSS)

https://sass-lang.com/guide

https://www.freecodecamp.org/learn/front-end-libraries/sass/

2 Likes