Help! CSS that is not working

Hi! I am trying to work on a project but my css part doesn’t seem to work at all, despite trying different things… How do I make it work? I have run the whole thing several times. I am new to coding and replit which is why I struggling a bit with the functions and everything. Thanks for your help!

Link to where the bug appears: https://replit.com/@AlaynaHassan1/VerticalTrustyTransformations#style.css

I’d be happy to help you troubleshoot your CSS issues! To get started, let’s go through a few common steps and considerations:

  1. Check for Typos:
  • Ensure that there are no typos or syntax errors in your CSS code. A small mistake can prevent the entire stylesheet from working.
  1. File Paths:
  • Confirm that the CSS file is linked correctly in your HTML file. Check the <link> tag in the HTML file and ensure that the href attribute points to the correct path of your CSS file.
  1. Selectors:
  • Double-check your CSS selectors to make sure they are targeting the right HTML elements. If the selectors are incorrect, the styles won’t be applied.
  1. Cascading Order:
  • Understand the cascading order of styles in CSS. Styles defined later in the stylesheet or with higher specificity take precedence. Check if there are conflicting styles.
  1. Browser Developer Tools:
  • Use your browser’s developer tools (usually accessible by right-clicking on the webpage and selecting “Inspect” or “Inspect Element”). Check the “Console” tab for any error messages related to your CSS.
  1. Cache Issues:
  • Sometimes, changes to your CSS might not reflect due to browser caching. Try clearing your browser cache or open the page in an incognito/private browsing window.
  1. Replit Environment:
  • If you are using Replit, make sure that your CSS file is saved and that the file path in the HTML file matches the actual file structure in Replit.
  1. External Resources:
  • If your project relies on external CSS frameworks or libraries (e.g., Bootstrap), make sure they are properly linked and loaded.
  1. Colors and Values:
  • Check your color values, units, and other CSS property values. A small mistake in values can lead to unexpected results.
  1. Share Code Snippets:
  • If you are comfortable sharing snippets of your HTML and CSS code, I can take a look to provide more specific guidance.

You want to remove the . before the h1 and the header in the CSS. In the HTML, if you type header and then hit Tab you’ll get a <header> element. Place any content inside this element and it’ll have the styles that you applied to header.
If you say what you want to achieve, we may be able to help more, but I’d recommend you instead first learn CSS syntax through the MDN tutorial/reference so you know what CSS is capable of and get some cool ideas on how to expand your site.

4 Likes

Yep but, you can still use . when using css, It selects all elements with that class attribute so that unique CSS declarations can be applied to those specific elements without affecting other elements on the page.

CSS Code:

/* declaration for our first CSS class */ 
    .orange-text { 
    color: orange; 
    font-weight: bold; 
    } 
     
    /* declaration for our second CSS class */ 
    .blue-text { 
    color: blue; 
    font-weight: bold; 
    } 
     

HTML Code:

<p class=“orange-text”>This will be Orange
</p>
<p class=“blue-text”>This will be blue</p>

Source and more info here: The Beginner's Guide to CSS Classes & .class Selectors

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.