'text-decoration: none' doesn't work in css file, but it works in html

Question

in "main_layout.css" file, I wrote like this.

a {
    text-decoration: none;
}

.title_bar {
  border-bottom: 1px solid gray;
  cursor: pointer;
  padding-bottom: 10px;
}

.title_bar #title {
  display: inline;
  font-size: 45px;
  text-align: center;
  vertical-align: bottom;
}

.title_bar img {
  vertical-align: bottom;
}

.main_layout {
  display: grid;
  grid-template-columns: 150px 1fr;
}

.left_menubar {
  border-right: 1px solid gray;
}

.main_content {
  padding: 16px;
}

.main_content #pg_welcome {
  margin-top: 0;
}

.main_content iframe {
    margin-top: 5px;
    margin-bottom: 5px;
}

and text-decoration: none doesn't work.

so I wrote the code in HTML like this.

<link rel="stylesheet" href="css/main_layout.css">
<style>
    a {
        text-decoration: none;
    }
</style>

then it works! I don't know why it works.. and I can't find the reason on google.

Please provide a runnable example that can reproduces the issue that you're talking about — Joshua, Apr 07 '21 at 05:21
@spacemonki oh, sorry. I didn't see your comment. and yes it does. — But_U, Apr 09 '21 at 06:45
@konekoya you're right, it would be more helpful. In this question I solved problem aleardy, so from next question, I'll do that. thanks for your good advice :) — But_U, Apr 09 '21 at 06:47

Abaan Shanid · Accepted Answer · 2021-04-10T15:54:46.863

This might happen because some other rule is overwriting the text-decoration rule, I would recommend to first put the stylesheets with higher priority last after adding in the other stylesheets. Try to use a more specific selector, like a class or id. If all of these solutions don't work then try adding the !important property to the text-decoration rule. This practice is not encouraged. Since CSS gives more specificity to styles directly written to the HTML page, the rule is applied.

'text-decoration: none' doesn't work in css file, but it works in html

1 Answers1