CSS стиль не работает в теге <small>со скриптом php в нем

Question

У меня проблема, когда я использую класс bootstrap для стилизации тега, содержащего сценарий PHP, он работает. Однако когда я использую свой собственный стиль и использую идентификатор или класс для добавления к нему цвета, это не так. Я не уверен, почему стили текста php с bootstrap, но не с обычным идентификатором или классом. Я прилагаю код и изображение переменной PHP с текстом, который отображается эхом, если входные данные пусты. Я добавил стиль непосредственно в строку PHP, и он работает, но я не знаю, почему он не может, если он не настроен таким образом

<section id="contact">
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <h1 class="text-center">We Want to Hear from You!</h1>
            </div><!--col-->
          </div><!--row-->
          <div class="row">
            <div class="col-md-10 offset-md-1">
              <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
                  <div class="row">
                    <div class="form-group col-md-4">
                        <small class="small-text"><?php if(isset($firstNameError)){echo $firstNameError;}?></small>
                        <label for="firstName" class="sr-only">First Name</label>
                        <input type="text" class="form-control" id="firstName" placeholder="First Name" name="firstName">
                    </div><!--col-md-4-->
                    <div class="form-group col-md-4">
                      <small class="text-danger"><?php if(isset($lastNameError)){echo $lastNameError;}?></small>
                      <label for="lastName" class="sr-only">Last Name</label>
                      <input type="text" class="form-control" id="lastName" placeholder="Last Name" name="lastName">
                  </div><!--col-md-4-->
                  <div class="form-group col-md-4">
                    <small class="text-danger"><?php if(isset($emailError)){echo $emailError;}?></small>
                    <label for="email" class="sr-only">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="Email" name="email">
                </div><!--col-md-4-->
                <div class="form-group col">
                  <small class="text-danger"><?php if(isset($messageError)){echo $messageError;}?></small>
                  <label for="message" class="sr-only">Message</label>
                  <textarea id="message" class="form-control" rows="6" name="message">Message</textarea>
                </div>
                <div class="col-md-12 text-center">
                  <button class="text-center btn btn-dark btn-lg" type="submit" name="submit" value="Submit" id="submit" role="button">Submit</button>
                </div>
                <?php 
                    if(isset($_POST["submit"])) {
                      echo "<h4 class='text-success'>Your message has been sent. We will contact you shortly :)!</h4>";
                    }
                ?>
              </div><!--row-->
            </form>
            </div><!--col-->
        </div><!--row-->
    </div><!--container-->
 </section>

------ - CSS --------

 * { 
    font-family: Montserrat, Helvetica, sans-serif;
    color: #828282;
}

@font-face {
    font-family: "Riffic";
    src: url(../Riffic.ttf);
    src: url(../Riffic/rifficfree-bold-webfont.woff);
}

body {
    padding-top: 65px;
    position: relative;
}

#navbar {
    background: #FF9D9D;
}

#navbarBrand {
    font-family: 'Riffic', sans-serif;
    color: white;
    font-size: 26px;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,1);
}

.navbar-dark .navbar-toggler {
    color: rgba(255,255,255,1);
    border: solid 2px rgba(255,255,255,.5);
}

.btn-outline-light:hover {
    color: #FF9D9D;
}

a.btn.btn-outline-light.waysToHelp:active {
    color: #FF9D9D;
}

.waysToHelp {
    margin-left: 10px;
}

.waysToHelp:hover {
    color: #FF9D9D;
}

#mainImage {
    padding-bottom: 100px;
}

section {
    padding: 58px 0 80px;
}

h1 {
    color: #FF9D9D;
    padding: 10px 0 25px;
}

h2 {
    color: #FF9D9D;
    padding: 10px 0 25px;
}

figure {
    max-width: 435px;
}

#figCaption {
    color: #FF9D9D;
    font-weight: 500;
    font-style: italic;
}

#projectCol {
    margin-top: 100px;
}

#message {
    color: #828282;
}

#submit {
    padding: 8px 50px;
    background-color: #FF9D9D;
    border: none;
}

.small-text {
    color: #FF9D9D;
}

footer {
    padding: 20px;
}

footer a {
    color: #FF9D9D;
}

#heart {
    color: #FF9D9D;
}

@media only screen and (max-width: 767px) {

    #mainImage{
        padding-bottom: 50px;
    }

    section {
        padding: 15px 0 20px;
    }

    img {
        padding-bottom: 15px;
    }

    h2{
        margin-top: -70px;
    } 

    #figure1 {
        display: block;
        margin: 0 auto;
    }

    #figure2 {
        display: block;
        margin: 0 auto;
    }

    #figure3 {
        display: block;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 767px) and (max-width: 1029px) {
    img {
        padding-bottom: 15px;
    }
}

это то место, где я помещаю стиль в сценарий php вместо того, чтобы содержать его в теге

Answer 1

У меня есть что-то близкое к вашей проблеме, все связано с #FFF. Иногда он не переводится в браузере правильно, когда он внутри php кода (я не знаю, почему), пожалуйста, откройте элемент проверки в своем браузере и посмотрите, сделал ли css применяется правильно, как <small style="color:#whatever ; " >, если он заблокирован, как будто он просто очищает данные браузера (crt + shfit + del), или вы можете изменить стиль на класс и решить проблему.