Me, GPT and new subject (1)

Hi 👋

I dont have CSS experience but I decided to fix a small bug in my resume today using Chat-GPT. I did it several times and it worked perfectly specially if you know how to ask a question from a AI-assistant

so,

first question:

why <a href="<http://example.com>"> tag does not follow its outer <div class="something"> and colors are different?

after explaining why, my second question:

if I want to make something a color a little darker what I have to do?

Chat-GPT:


 .something {
    color: #336699; /* Original color for the outer div */
}

.something a {
    color: #1F4566; /* A slightly darker shade for the link */
    text-decoration: none; /* Optional: Remove underlines */
    display: inline-block; /* or display: block; */
}

Ohhhh 😩 I’m lazier than what you think of course there should be an easier way

question:

colors are different and the are not the same all over the doc

answer:

If you want to ensure that the color of the links (<a> tags) within the .something div is slightly darker than the text color of the .something div itself, you can use relative color adjustments, such as the brightness or darken functions available in CSS preprocessors like Sass or Less. However, as of my knowledge cutoff in January 2022, CSS itself doesn't have native functions for color adjustments.
Here's an example using Sass to darken the color:
.something {
    color: #336699; /* Original color for the outer div */
}

.something a {
    color: darken(#336699, 10%); /* Darken the color by 10% */
    text-decoration: none; /* Optional: Remove underlines */
    display: inline-block; /* or display: block; */
}

Done, I got my answer In my case (my resume repository) colors was variables and their values were based on themes color


.company,
  .university,
  .cert-org {
    margin-bottom: 10px;
    color: $text-grey;
  }

  .company a,
  .university a,
  .cert-org a {
    color: darken($text-grey, 20%); /* or the color you want */
    text-decoration: none; /* optional: remove underlines */
}

Result:

From