CODEWITHSUNDEEP
htmlcss
user9569985
user9569985

Reputation:

HTML class refuses to look in CSS file

I am trying to use a class called "secondary" in my HTML file and set it's properties in my CSS file, but it seems like

HTML:

<!doctype html>
<html>
    <head>
        <title> My Webpage</title>
        <link href="D:\Web_developing\css\styles.css" rel="stylesheet"/>
    </head>

    <body>
        <h1>Main webpage</h1>

        <ul>
            <li><a href="D:\Web_developing\html\page2.html">page 2</a></li>
        </ul>

        <p class="secondary">this is the main page of the website</p>
    </body>
</html>

CSS:

body {
    color: green;
    background: black;
    font-family: arial;
    text: white:
}
.secondary {
    background: green;
    color: blue
}

I expected the paragraph given the class would have the properties set in the CSS file.

After some testing with the file path I have concluded that the problem seems to be with the class. Is there perhaps any wrong syntax?

Upvotes: 0

Views: 87

Answers (3)

hemanth rs
hemanth rs

Reputation: 74

If it is taking only the <body> property, try the <div> block and set the class for div, not a paragraph like "<div class = " " ...>".

Otherwise, it will take "<body>" CSS properties.

Upvotes: 0

pasanjg
pasanjg

Reputation: 646

The problem seems to be with your link to the CSS file. It's always better to use relative paths when linking asset files to your web page. Try this instead...

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

Learn more about file paths here - W3Schools

Upvotes: 1

ViaTech
ViaTech

Reputation: 2813

Your path does not appear to be correct for the CSS file, your code appears fine other than that.

Assuming you are inside the directory Web_developing change your CSS path to this:

<head>
    <title> My Webpage</title>
    <link href="css\styles.css" rel="stylesheet"/>
</head>

If your root directory has the directory Web_developing then change it to this:

<head>
    <title> My Webpage</title>
    <link href="Web_developing\css\styles.css" rel="stylesheet"/>
</head>

Upvotes: 0

Related Questions