Preview in browser not reading CSS

Report · Feb 07, 2018

I've been building a site in Dreamweaver CC (updated to the most recent version). Whenever I go to preview my site in the browser it will display my content but not the styling. For example, the text isn't in the font or coloring I've specified in the css code. And the images are in their import sizes not the sizing decignatted in the css code. It was working two days ago and suddenly stopped.

The .css is linked properly to my .html code and everything displays correctly in the live view on Dreamweaver.

Any ideas on what's going on?

Report · Feb 07, 2018

It's impossible to say what might be going on without seeing your actual page, but I'm going to guess you have a code error that's confusing the browser or you've forgotten to upload your external css file to your server.

Run your page through the W3C validator at http://validator.w3.org/nu and make sure you're working with clean code. If you are, post a link to your work in progress so we can see what's happening.

Report · Feb 07, 2018

W3C validator only brought up a few minor issues that I fixed and nothing changed in the browser view. How can I share a link to a project that isn't live yet? I'm still new to this program.

Report · Feb 07, 2018

You would upload it to a server you control and share a link to it like www.yoursite.com/page.html, but if you don't have a server yet, we can still figure something out...

Paste the entire code of the page, and the css file, in a forum reply. Don't use email, it won't come through.

Report · Feb 07, 2018

I don't have a server yet. I'll share the code below, it's probably quite messy because this is my first attempt at a site.

<!doctype html>

<html>

<head>

<title>Summer And Cody's Wedding</title>

</head>

<body>

<nav>

<ul>

<li class="menulink"><a href="details.html">Wedding Details</a></li>

<li class="menulink"><a href="story.html">Our Story</a></li>

<li class="menulink"><a href="party.html">Wedding Party</a></li>

<li class="menulink"><a href="photos.html">Photos</a></li>

</ul>

</nav>

</div>

<h1 class="hashtaghome">#LetThe GoodTimes Rollison</h1>

</section>

</section>

</div>

<h3 class="circlelink"><a href="details.html">Wedding Details</a></h3>

</section>

<h3 class="circlelink"><a href="story.html">Our Story</a></h3>

</section>

</section>

</div>

<h2>Summer and Cody's Wedding</h2>

</section>

</div>

</section>

</div>

</body>

</html>

@charset "utf-8";

/* CSS Document */

html {

box-sizing: border-box;

}

*, *:before, *:after {

box-sizing: inherit;

}

body {

background-repeat: no-repeat;

z-index: -3;

padding-top: 0px;

background-position: 0% 309%;

background-image: url(../Images/background.png);

background-size: cover;

}

h1 {

font-family: oswald;

font-size: 100px;

font-weight: bold;

color: #630D2E;

}

a {

font-family: cormorant-garamond;

text-decoration: none;

color: #630d2e;

}

nav a {

color: white;

font-size: 2em;

}

h3 {

font-family: oswald;

color: #630d2e;

}

h2 {

font-family: oswald;

color: #630D2E;

text-size: 3em;

font-size: 2em;

}

h2 .subheading {

color: #07304c

}

nav {

height: 10%;

}

nav ul {

text-transform: none;

}

.menu nav {

}

.home-grid {

display: inline-block;

}

.home-a {

z-index: 2;

width: 45%;

height: auto;

padding: 0;

display: inline-block;

margin: 0px 0px 0px 14%;

positon: absolute;

left: 0px;

top: 0px;

font-size: medium;

}

.home-b {

z-index: -1;

/* [disabled]height: auto; */

width: 54%;

padding: 0;

margin: 20% 2% 0px 0px;

display: inline-block;

position: absolute;

right: 0px;

opacity: 0.22;

top: 0px;

}

.home-b img {

width: 100%;

}

.home-c {

width: 30%;

display: block;

float: left;

padding-right: 2%;

}

.home-d {

width: 30%;

display: block;

float: left;

padding-right: 2%;

}

.home-e {

width: 30%;

height: 20%;

display: inline-block;

float: left;

padding-right: 2%;

}

.home-f {

positon: absolute;

text-align: center;

margin-top: 41%;

margin-bottom: 13%;

}

.hashtaghome {

line-height: .9;

font-size: 9em;

padding: 0px;

margin: 0;

}

.menu {

background-color: #07304C;

}

.current {

font-weight: bold;

}

.circle {

width: 100%;

}

.circlelink h3 {

text-align: center;

text-decoration: none;

}

.homecircles {

margin-top: 8%;

text-align: center;

margin-left: 12.5%;

/* [disabled]margin-right: 2.5%; */

}

a .circlelink {

color:#630d2e;

font-family: cormorant-garamond;

}

.homebottom {

margin-top: 8%;

width: 100%;

}

.footer {

/* [disabled]background-color: #C3C3C3; */

height: 4em;

color: black;

text-align: center;

bottom: 0px;

}

.footer p {

padding-top: 1%;

}

.detailsimg {

width: 100%;

height: auto;

position: absolute;

}

.detailshead {

height: auto;

display: inline-block;

}

.subheading {

}

.detailshead section {

width: 25%;

}

Report · Feb 07, 2018

Try getting rid of the / before the link to your css file

So it looks like:

Report · Feb 07, 2018

That was exactly it! Such a tiny thing.

Thank you!

Preview in browser not reading CSS

1 Correct answer