'css no longer being applied in browser

Newbie here. I have a very basic understanding of css (watched some course videos online) and I've been playing around on Dreamweaver 2021 using templates trying to alter them slightly to make a laughably basic art portfolio page.

The problem I'm running into is that previewing in any browser often doesn't apply the template attached css and I don't know why.

I start with the template and it displays fine, exactly like in my live window. Minor changes here and there and it still displays fine with the minor changes. I add small margins to something in the css and boom no more css in the preview. Okay, maybe something is conflicting? I undo and check again and it seems to be fine again.

Then I change the TITLE in the page source code from the template default to simply my last name and again boom no more css in preview. Literally (no hyperbole), all I did was highlight everything in between title and /title (with the <>)and change it and suddenly the attached css no longer applies in any browser I check.

I've made sure it's saved, I've emptied the browser cache, I've made sure I didn't change anything in the href.

Is this a Dreamweaver issue? A browser issue? A "me being a moron" issue?

EDIT: Here's the code if you care to check. 95% is dreamweaver template code. I've only really changed some numbers, put the google font links in, added the *{ at the beginning of the css to get rid of a large gap I couldn't find the reason for existing.

CSS Code (file name is "simpleGridTemplate" located in the CSS folder in my project folder):

@charset "UTF-8";
* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

/* Body */
body {
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    background-color: #FFFFFF;
    margin: 0;
}
/* Container */
.container {
    width: 100%;
    margin: 0;
    background-color: #FFFFFF;
}
/* Header */
header {
    width: 100%;
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;

}
.logo {
    font-family: 'Bebas Neue', cursive;
    color: #5D5E5D;
    font-weight: bold;
    margin-left: 3%;
    letter-spacing: 1px;
    margin-right: auto;
    text-align: left;
    padding-top: 0px;

    font-size: 60px;
    padding-bottom: 1px;
}
.hero_header {
    color: #FFFFFF;
    text-align: center;
    margin: 0;
    letter-spacing: 4px;
}
/* About Section */
.text_column {
    width: 90%;
    text-align: left;
    font-weight: lighter;
    line-height: 25px;
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    color: #A3A3A3;
}
.gallery {
    clear: both;
    display: inline-block;
    width: 100%;
    background-color: #FFFFFF;
    /* [disabled]min-width: 400px;
*/
    padding-bottom: 35px;
    padding-top: 0px;
    margin-top: -5px;
    margin-bottom: 0px;
}
.thumbnail {
    font-family: 'Bellota Text', cursive;
    width: 23%;
    text-align: center;
    float: left;
    margin-top: 35px;
    background-color: #F8F8F8;
    padding-bottom: 20px;
    margin-left: 1%;
    margin-right: 1%;
    border-radius: 3px;
    padding-top: 20px;
    
}
.gallery .thumbnail h4 {
    font-size: 24px;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #52BAD5;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
}
.gallery .thumbnail p {
    margin: 0;
    color: #B3B3B3;
    text-align: left;
    padding-left: 20px;
}
/* More info */
.intro {
    background-color: #FFFFFF;
    padding-bottom: 35px;
}
.column {
    width: 50%;
    text-align: center;
    padding-top: 30px;
    float: left;
}
.intro .column h3 {
    color: #FFFFFF;
    text-align: center;
}
.intro .column p {
    color: #FFFFFF;
}
.cards {
    width: 100%;
    height: auto;
    max-width: 400px;
    max-height: 200px;
    opacity: 0.8;
}
.intro .column p {
    padding-left: 30px;
    padding-right: 30px;
    text-align: justify;
    line-height: 25px;
    font-weight: lighter;
    margin-left: 20px;
    margin-right: 20px;
    width: 80%;
    margin-top: 4%;
}
.button {
    width: 200px;
    margin-top: 40px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    padding-top: 20px;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
    text-align: center;
    vertical-align: middle;
    border-radius: 0px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    border: 3px solid #FFFFFF;
    color: #FFFFFF;
    transition: all 0.3s linear;
}
.button:hover {
    background-color: #6DC7D0;
    color: #FFFFFF;
    cursor: pointer;
}
.copyright {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #717070;
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: lighter;
    letter-spacing: 2px;
    border-top-width: 2px;
}
footer {
    background-color: #B3B3B3;
    padding-top: 60px;
    padding-bottom: 60PX;
}
.intro {
    display: inline-block;
    background-color: #6DC7D0;
}
.profile {
    width: 50%;
}
.gallery .thumbnail .tag {
    color: #5D5E5D;
    padding-bottom: 4px;
    padding-top: 4px;
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
}

/* Mobile */
@media (max-width: 320px) {
.logo {
    font-family: 'Bebas Neue', cursive;
    width: 100%;
    text-align: center;
    margin-top: 13px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
.text_column {
    width: 100%;
    text-align: justify;
    padding: 0;
}
.intro .column p {
    width: 80%;
    margin-left: 0px;
}
.text_column {
    padding-left: 20px;
}
.thumbnail {
    width: 100%;
}
.column {
    width: 100%;
    margin-top: 0px;
}
.hero_header {
    padding-left: 10px;
    padding-right: 10px;
    line-height: 22px;
    text-align: center;
}
}

/* Small Tablets */
@media (min-width: 321px)and (max-width: 767px) {
.logo {
    width: 100%;
    text-align: center;
    margin-top: 13px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
.text_column {
    width: 100%;
    text-align: left;
    padding: 0;
}
.thumbnail {
    width: 100%;
}
.column {
    width: 100%;
    margin-top: 0px;
}
.thumbnail {
    width: 100%;
}
.text_column {
    padding-left: 20px;
    padding-right: 20px;
    width: 90%;
}
.column {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}
.profile {
    width: 100%;
}
.intro .column p {
    width: 90%;
    text-align: center;
    padding-left: 0px;
}
}

/* Small Desktops */
@media (min-width: 768px) and (max-width: 1096px) {
.text_column {
    width: 100%;
}
.thumbnail {
    width: 48%;
}
.text_column {
    width: 90%;
    margin: 0;
    padding: 20px;
}
.intro .column p {
    width: 80%;
}
}

Source Code:

<!doctype html>
<html>
<head>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=Bellota+Text&display=swap" rel="stylesheet">   
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    
    
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Boothby</title>
<link href="css/simpleGridTemplate.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Main Container -->
<div class="container"> 
  <!-- Header -->
  <header class="header">
    <h4 class="logo">Projects</h4>
  </header>
  <!-- Hero Section -->
  <section class="intro">
    <div class="column">
      <h3>JOHN DOE</h3>
      <img src="images/profile.png" alt="" class="profile"> </div>
    <div class="column">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla</p>
    </div>
  </section>
  <!-- Stats Gallery Section -->
  <div class="gallery">
    <div class="thumbnail"> <a href="#"><img src="images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="thumbnail"> <a href="#"><img src="images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="thumbnail"> <a href="#"><img src="images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="thumbnail"> <a href="#"><img src="images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div class="gallery">
    <div class="thumbnail"> <a href="#"><img src="images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="thumbnail"> <a href="#"><img src="images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="thumbnail"> <a href="#"><img src="images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="thumbnail"> <a href="#"><img src="images/bkg_06.jpg" alt="" width="2000" class="cards"/></a>
      <h4>TITLE</h4>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <!-- Footer Section -->
  <footer id="contact">
    <p class="hero_header">GET IN TOUCH WITH ME</p>
    <div class="button">EMAIL ME </div>
  </footer>
  <!-- Copyrights Section -->
  <div class="copyright">&copy;2021 - <strong>GRID</strong></div>
</div>
<!-- Main Container Ends -->
</body>
</html>

Thanks in advance for anyone that has made it this far....

Solution 1:^[1]

I read your question, but is imposible to help without some code ;)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	visconttig

'css no longer being applied in browser

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]