Html Question posted in
Some basic documentation can be found here.

Is there another way to apply the same style to multiple HTML elements in CSS?

I’m working in a Web Application and I ran into an issue relating the <link> element in HTML. Basically, I tried to link my styless.css folder but the style was not applying on the live server.

This is my HTML file:

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <title>Menu - Café</title>
        <meta charset="utf-8">
        <!-- STYLE -->
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <main>
            <h1>Mon-Café</h1>
            <p>Est. 2019</p>
            <!-- SECTION: Cafés -->
            <section>
                <h2>Cafés</h2>
            </section>
            <!-- SECTION: Sobremesas -->
            <section>
            </section>
        </main>
    </body>
</html>

And this was my CSS file before any changes:

h1, h2, p {
    text-align: center;
}

I tried editing the CSS file directly into Firefox Developer, these were my exact steps:

  1. Inspect Element
  2. Go to Style Editor
  3. Manually insert the code:
h1, h2, p {
    text-align: center;
}

As soon as I wrote that directly with Firefox Developer, it worked just fine, but with my styles.css file it was not working, only when there was a single element instead of multiple

Then I tried another alternative for my CSS file:

h1, h2, p , .box{
    text-align: center;
}

I found about the .box ramdonly while searching for a fix for this, but that alternative worked just fine in the styles.css file, I don’t know if that’s the correct way or if I was doing something wrong the other way.

PS: I save my project multiple times so it can’t be that

Tags:

2

Answers


  1. 0

    I would start by looking at the path linking your CSS file. VSCODE makes it easy for you to check the path leading to your CSS file.

    1. You can use intellisense to navigate to your target file
      ./ refers to the current directory.

    ../ refers to the parent directory

    <link rel="stylesheet" href="./styles/styles.css">

    1. You can navigate your CSS file and copy the relative path
      A. Right-click and click on the file
      B. Click on the Copy Relative Path Option
      C. Paste it right in the href tag
      enter image description here
    Login or Signup to reply.
  2. 0

    Ensure that the path to your styles.css file is correct relative to the HTML file. If the stylesheet is in the same directory as your HTML file, the path you provided should work. If it’s in a different directory, you need to adjust the path accordingly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search