Text Class Properties on CSS Not Working!

[Gareth_Williams]

Hi everybody, I've got a text class where I haven’t defined a font family or size because your want the default font and size. I’ve just defined a colour. However, on this class other code to control the link colours doesn’t work. On the other class which does have a font family and size defined “.Venue” the code below in dark red controls the link colour, hover mouse over, click down and visited link colours.

.Venue {
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size: 20px;
color: #999999;
}
.Venue a:link{
font-weight: bold;
color: #999;
}
.Venue a:visited{
color: #999;
}
.Venue a:hover{
color: #666;
}
.Venue a:active{color: #FFFFCC;}
.Venue a:focus{color: #FFFFCC;} /**adjust colors to suit**/

However, with the class “.Date” that doesn’t have a font family and size defined all that code doesn’t do anything! As well as that without the extra code the normal link settings that apply to the rest of the page don’t work either. As you can see in the linked file, the default colours only apply to the line under the text! This makes our band look very incompetent! Can anybody help? Thanks.

.Date {
color: #999999;
}

Here is the file … http://www.maximum-robot.co.uk/live.html

[Ben M]

Can you share an image of what you are expecting to happen on that page?

Based on what I am seeing the date just has the color that you are setting, and the a element that is around the date span, is inheriting the default settings of a link with a an underline text decoration and text decoration color. Personally I don't see the need for the strong/span tags inside of the a because the date class on an a element should be enough to provide you with styling to get you the desired look and feel.

[Gareth_Williams]

Thanks Ben, removing the strong tags takes the bold off. However, this doesn’t make any difference to anything else. Apart from the line under it, the text still does not appear the default colour for the page links which is white. If I just use the default font and size without any class and change the colour in the properties window I don’t know who to control the link colour. Anyway, I will experiment and update the thread when I can. Thanks again.

[Gareth_Williams]

Can anyone explain why the text “24th of September 2024” isn’t white like the rest of the links on the page? The ones at the top? Basically what I want to do is have that text grey and control the link colours with the code above. Thanks again.

[BenPleysier]

I do not know if the following answers your question, but this is what I see:

The first link is styled as

The second link

And the third link

Having said that:

• You are using tables for your layout which was the norm in a previous era. Have a look at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table to see the definition and rules regarding a table
• You are using <center>. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center for more.
• Headings are an important part of a document as you can see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements. These should not come in the form of an image.
• The colour contrasts make it very hard for users to read the text.

I assume that you are using a very very old version of Dreamweaver. DON'T!!!

For the heading

you could use

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik+Scribble&display=swap" rel="stylesheet">

The style rule

.rubik {
    font-family: "Rubik Scribble", system-ui;
    font-weight: 400;
    font-style: normal;
}

 And HTML

<h1 class="rubik text-danger fw-bold text-uppercase">Join us at your nearest live music venue &hellip;</h1>

Notice that I did not use upper case for the heading text. This is because it confuses assistant technology. The upper case conversion is done using Bootstrap CSS

[Gareth_Williams]

Thanks Ben, I can’t work out the point you’re making from the pictures. I guess I’m missing something pretty obvious! I’ve uploaded the file again without the link and taken the bold off to avoid any extra complications. I’ve also turned the table white so I can see what I’m doing in DW! Would anybody know what I would need to do to control the link properties on that text with the class “.Date”? The other two classes with links “.Venue” and “.Support Band” are controlled by the dark red code above. Thanks again for your help.

http://www.maximum-robot.co.uk/live3.html

[Gareth_Williams]

Also, when I put that same text class on a different place on the page everything works as it should! The code is below. It’s just when it is in that cell that it doesn’t work! …

.Date {
color: #999999;
}
.Date a:link{
font-weight: bold;
color: #999;
}
.Date a:visited{
color: #999;
}
.Date a:hover{
color: #666;
}
.Date a:active{color: #FFFFCC;}
.Date a:focus{color:#FFFFCC;} /**adjust colors to suit**/

[osgood_ · Accepted solution]

Would anybody know what I would need to do to control the link properties on that text with the class “.Date”?

By @Gareth_Williams

Well you would move the class name 'Date' from the span tag to the td cell that the link tag is in, exactly like you have for Venue.

<td align="center" valign="top" class="Date" style="white-space: nowrap; color: #999999;"><a href="https://railwayinn.pub/shows/maximum-robot-2024-07-02" target="_blank"><strong><span style="white-space: nowrap">24th of September 2024</span></strong></a></td>

Then you can do what you like to style the link:

.Date a {
color: pink;
}
.Date a:hover {
color: orange;
}

[Gareth_Williams]

Thanks Osgood. I didn't notice that detail! That has sorted it out.

[BenPleysier]

Have a look at what modern HTML looks like. Copy and paste the following code into a new document.

<!doctype html>
<html data-bs-theme="dark">

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.5.2/css/all.css" integrity="sha384-PPIZEGYM1v8zp5Py7UjFb79S58UeqCL9pYVnVPURKEqvioPROaVAJKKLzvH2rDnI" crossorigin="anonymous" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik+Scribble&display=swap" rel="stylesheet">
    <style>
        .rubik {
            font-family: "Rubik Scribble", system-ui;
            font-weight: 400;
            font-style: normal;
        }
    </style>
</head>

<body>
    <header class="">
        <div class="container">
            <div class="row">
                <div class="col">
                    <nav class="navbar navbar-expand-lg justify-content-center">
                        <div class="navbar-nav flex-row">
                            <a class="nav-item nav-link active ms-2 me-2" href="index.html">Home</a>
                            <a class="nav-item nav-link ms-2 me-2" href="#"><i class="fa-solid fa-tower-broadcast"></i></a>
                            <a class="nav-item nav-link ms-2 me-2" href="#">Gigs</a>
                            <a class="nav-item nav-link ms-2 me-2" href="#">Songs/Merch</a>
                        </div>
                        <span class="text-body-tertiary d-block ms-2 me-2">info@maximum-robot.co.uk</span>
                    </nav>
                </div>
            </div>
        </div>
    </header>
    <div class="container">
        <div class="row">
            <div class="col-xl-10 offset-xl-1">
                <h1 class="rubik h2 text-danger fw-bold text-uppercase text-center">Join us at your nearest Live Music Venue &hellip;</h1>
                <p>If you would like to see our sorry people live please check out the schedule below, or our account on Song Kick, and present yourself in the queue in the miserable pouring rain of the British weather and we'll see you there. There won’t be a queue! Our mission is to try to get to as many places as we can and we would be delighted to meet anybody who has listened to our music online &hellip;</p>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-10 offset-xl-1">
                <div class="card mb-3">
                    <div class="row align-items-center">
                        <div class="col">
                            <div class="card-body small">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <img src="http://www.maximum-robot.co.uk/images/Venue_RailwayInn.jpg" class="img-fluid" alt="...">
                                    </div>
                                    <div>
                                        <h2 class="card-title text-danger h5 text-uppercase mb-xl-0">Winchester</h2>
                                        <p class="mb-0">
                                            <a href="https://railwayinn.pub/shows/maximum-robot-2024-07-02" target="_blank" class="text-uppercase text-body">The Railway Inn</a>
                                        </p>
                                        <p>3 St Paul's Hill, Hampshire, SO22 5AE, England</p>
                                    </div>
                                    <div>
                                        <p class="mb-0">Tuesday</p>
                                        <p class="mb-0">24th of September 2024</p>
                                        <p class="mb-0">Free Entry: Doors 8.00</p>
                                    </div>
                                    <div>
                                        <p>Support* <a href="https://thebenpooreproject.com/" target="_blank" class="text-body">The Ben Poore Project</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Disclaimer: The code has not been optimised for mobile views.

[Nancy OShea]

You should be sleuthing out styles with your browser's Inspect Element (F12) panel by now.

Firefox and Chrome both have one.