Skip to main content
D
defaultqa2ez3ivhmtl
Participant
August 9, 2021
Question

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

  • August 9, 2021
  • 3 replies
  • 509 views

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.

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 9, 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?

     

    Nancy O'Shea— Product User & Community Expert
    D
    defaultqa2ez3ivhmtlAuthor
    Participant
    August 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.

    B
    Community Expert
    Ben MCommunity Expert
    Community Expert
    August 9, 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.

      D
      defaultqa2ez3ivhmtlAuthor
      Participant
      August 10, 2021

      Thanks, Ben.

       

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

      O
      osgood_
      Legend
      August 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.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      August 9, 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
      D
      defaultqa2ez3ivhmtlAuthor
      Participant
      August 10, 2021

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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices