Underlining and Other Decoration

HTML-CSS
1

I have the following coded. It doesn’t work nor does any other text or line decoration that I’ve tried. Obviously I’m doing something wrong. I’m aware that I could use <u></u> pairs to achieve underlining, but it would be useful to be able to use other text/line decoration using CSS.

Could someone please show me the error of my ways?

CSS

.underline
{
  text-decoration: underline;
}

HTML

<div class="underline">  
	 Lorem ipsum
    </div>
2

There is nothing wrong with the code, so I would assume you are not linking correctly to the CSS. Do the color of the text change if you set it to something?

2 Likes
3

Thanks for the help, lasjorg.

I tried adding the color ‘red’ to the statement with no effect.

The CSS code is but a few lines of hundreds. No other class reference from HTML fails; so I have to assume that I’m linked to the css file properly.

<html lang="en-US">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link type="text/css" 
        rel="stylesheet" href="CSS/clan.css" media="screen">
<!-- MAY 2025 -->
  <title>Main Menu/Home</title>
4

what is your folder structure?

5

Thanks for the help, ILM.

Here’s a screenshot from File Explorer showing the file structure:

folder structure
folder structure1332×587 45.8 KB

The CSS file, clan.css, is within the CSS folder shown in the first line. The HTML that attempts to use the .underline styling is in the personal-pages.html file.

6

I don’t know what is your html file tho

1 Like
7

The HTML file that I’m trying to use the CSS styling in is ‘personal-pages.html’.
Here’s the first part of that file including the first instance of using the code:

<html lang="en-US">
<head>

	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link type="text/css" 
        rel="stylesheet" href="CSS/clan.css" media="screen">
  <title>Hutchins-Line</title>

<body>
<div class="ancestor-container"> 
  <div class="ancestor-page-title">
          Hutchins Paternal Line
  </div>
  <div class="page-number">Page 1
  </div>  

  <div class="box-1">
    <div class="underline">
      Charles Haddon Spurgeon Hutchins</div>
      LDS ID: 9MP1-84J<br>
      Born: May 27, 1894<br>
      Died: January 5, 1864<br>

The code goes on after that shown above.

The page displays as intended except the name shown within the <div> pair appears without an underline.

8

double check that you do not have errors in the css file right before the .underline selector

9

You may try using “./clan.css” instead. That always works for me.

10

even if the css file is in a different folder?

11

Yeah. I’ve never had trouble with it.

12

that doesn’t make sense, paths don’t work like that

13

Maybe I’m wrong then