My html doc doesn't seem to be reading my css

Report · Aug 09, 2021

I've built a simple website and am using css. My css file seems to be imported correctly, but the text isn't responding to it. I've done this a few times in the past with no problems, but it's been few years. Am I doing something wrong? Would be happy to post the page and share a link if anyone is willing to help. Thanks.

Report · Aug 09, 2021

Copy & paste this code into a new document & save to your local site folder as test.html.

Can you see the CSS styles in Live view as opposed to Design view? Toggle views with Ctrl + Shift + F11.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Test</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fluid {max-width:100%}
.thumb {padding:12px; box-shadow: 5px 6px 1px rgba(0,0,0,0.3)}
h3 {color:antiquewhite; background:brown; padding:1%}
</style>
</head>
<body>
<div>
<h3>Heading 3</h3>
<a href="https://example.com">
<img src="https://dummyimage.com/400x300" class="fluid thumb " alt="Placeholder" title="Example.com">
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis velit minima hic tenetur ea nesciunt tempore voluptas, architecto obcaecati, iusto optio quidem explicabo odit expedita quas? Aliquam libero numquam nesciunt!</p>
</div>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 10, 2021

Yes, thank you, Nancy - Live view shows me the grey box with 400x300 in it, Design view shows me a broken link.

Report · Aug 09, 2021

Best thing to do is to post a link to your page so it can be viewed online. In many cases this can be caused by conflicting CSS or an issue in the code which is causing rules not to respond.

Report · Aug 10, 2021

Thanks, Ben.

https://www.lecompliance.com/v3/index.html

Report · Aug 10, 2021

css classes need to start with a period - .

So in your css stylesheet you have the below:

body_2

instead of: (period before the selector (see in red below)

.body_2

Don't get confused and add a period before the genuine 'body' tag which exists as a default html selector. Infact you should name your paragraphs something which leads to less confusion, like 'body_text' or 'main_text'

Not sure what it is you are trying to do BUT the use of tables and images to construct a website kind of went out of business about 15 years ago............now you need to consider mobile devices so your website is responsive.

Report · Aug 10, 2021

Thanks, osgood. No doubt one of many things I've done wrong. I appreciate your help.

Report · Aug 10, 2021

A lot has changed on the web in recent years.

1. Navigation should not be image-based. Real text is better for accessibility. Also raster images become pixelated and blurry when rescaled to fit large devices. But more importantly, images of text can't be translated or indexed by search engines.

2. Whenever possible use Illustrator or another vector graphics app for your web graphics and export them to SVG. Vectors can be rescaled to any size without quality loss. SVGs are ideal for logos, brand names, icons, charts, infographics, comics, drawings and other flat colored web graphics.

3. For better viewing of photos on multiple devices, use JPG or PNG in small, medium and large sizes along with the SRC SET property.

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

4. Start your projects with a responsive CSS layout. Bootstrap is well supported in DW CC and it's a popular mobile-first framework used by millions of sites worldwide. In DW, go to File > New > Starter Templates > Bootstrap Templates. Select one from the list and hit CREATE button. SaveAs index.html.

https://www.w3schools.com/bootstrap4/default.asp

Post back if you have more questions.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 09, 2021

Did you define your local site folder BEFORE you started this project by going to Site > New site and selecting a folder on your primary hard drive -- not a networked or cloud drive? For example, C:\myTestSite\

And does the stylesheet reside in your local site?

Files Panel

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 10, 2021

Yes, I began with a folder on my hard drive called "client". I defined that folder as my local site. Everything related to the site, including the .css, is located in that folder at the root level.