CSS Not Modifying Link Properties

CSS not modifying link properties

**#nav li {
    display:inline;
    margin:0;
    padding:0;
    width:160px;
    float:left;**

#nav li:hover {
    background-color: #faffd8;
    border-color: #004f7b;

}

#nav a {

    color: #000;
    text-decoration: none;
}

#nav a:link {
    color: #333333;
    text-indent: -9999px;
    text-decoration: none;

}

#nav a:hover {
    color: #000000;
    text-decoration: none;

}

#nav a:visited{
    color: #999999;
    text-decoration: none;

}

#nav a:active {
    color: #000000;
    text-decoration: none;

}

**#topcontent p
{
    color: #444444;

}

}**

** check starred CSS Styles there no closing for first CSS style also extra closing for last one

CSS: Can't edit links no matter what

You are not using the css properties with the html elements they are meant for here is how you should do it:

nav ul li{
  list-style: none;
  display: inline;
}
nav ul li a  {
    color: red;
    text-decoration: none; 
}

list-style property should be applied to <li> elements, color and text-decoration should be applied to <a> elements.

How to modify the link text(html link) properties using css

You set the offset from the top and the padding using em. em is an unit which refers to the current font size of the element. So if you change the font size the position and size of the element also changes. Use a percentage (%) or pixel (px) value instead or do not position the element as absolute at all.

The size of the element is also affected when you change the font size cause the element has no explicit width or height, so it fits it's content. To give an a tag a size you have to make it a block element using display: block.

I changed your example to let the button behave like the one on the website you mentioned. My example does not use any Javascript. The animations also could be done using some JS framework like jQuery.

.learn {

  width: 200px;

  height: 60px;

  font-family: 'Open Sans',sans-serif;

  background-color: transparent;

  border:2px solid #fff;

  position: relative;

  text-align: center;

  font-size: 18pt;

  line-height:60px;

  overflow: hidden;

}

.learn a {

  color: white;

  display: block;

  transition: all 0.2s ease-in-out;

}

.learn:hover {

  background-color: white;

}

.learn:hover a {

  color: black;

  margin-left: -20px;

}

.learn span {

  background:url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAElJREFUeNqMj0EKADEIAx3//+f0siyF1iaCIDLEsapKX4/V26wEGsG+7JRAB9gPXyXQD+LeT5JiCAfhknDncE44cdx3THJLgAEAR9cJHGy5GicAAAAASUVORK5CYII=) center center;

  display: block;

  width: 9px;

  height: 16px;

  position: absolute;

  top: 22px;

  left: 110%;

  transition: all 0.2s ease-in-out;

}

.learn:hover span{

  left: 80%;

}

body {

  background-color: black;

}

<div class="learn">

  <a>Learn More</a>

  <span></span>

</div>

Select a single link to change css properties

have you tried:

#view_81 ul li.kn-link-1

or

#view_81 ul li:first-child

To clarify my examples: "#" selector in CSS means "the one with the following ID" and then i'm telling the "ul" that comes after that and then the "li" that comes after that which has this class "kn-link-1" or which is the first item inside the tag (:first-child subselector).

I hope some of them help.

some of my CSS properties not working from .CSS file but when i try inline css it works fine am using bootstrap 4 along with it

Add Your Custom CSS After Bootstrap

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
body {
  font-family: "Montserrat";
}

#title {
  background-color: #ff4c68;
  color: #fff;
}

.container {
  padding: 3% 15%;
}

p {
  color: #8f8f8f;
}

/* Navigation bar */

.navbar-brand {
  font-family: "Ubuntu";
  font-weight: bold;
}

.nav-item {
  padding: 0 18px;
}

.nav-link {
  font-family: "Ubuntu";
  font-size: 1.2rem;
  font-weight: bold;
}

/* Download buttons */

.download-button {
  margin: 5% 3% 5% 0;
}

/* Title image */

.title-image {
  width: 60%;
  transform: rotate(25deg);
}

/* feature sectiom */

#features {
  padding: 7% 15%;
}

.feature-box {
  text-align: center;
  padding: 5%;
}

.icon {
  color: #ef8172;
  margin-bottom: 1rem;
}

.icon:hover {
  color: #ff4c68;
}

/* testimonial section */

#testimonials {
  padding: 7% 15%;
  text-align: center;
  background-color: #ef8172;
  color: #fff
}

#testimonial-image {
  width: 10%;
  border-radius: 100%;
  margin: 20%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>tindog</title>
 
  <!-- font awsome kit -->
  <script src="https://kit.fontawesome.com/b5209fc970.js" crossorigin="anonymous"></script>
  <!-- bootstrap css link   -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <!-- css file link --> <!-- **Add Here Your Custom CSS** -->
  <link rel="stylesheet" href="/css/styles.css">
  <!-- bootstrap js -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>

  <section id="title">
    <div class="container">
      <!-- Nav Bar -->
      <nav class="navbar  navbar-expand-lg navbar-dark" style="padding: 0 0 4.5rem;">
        <a class="navbar-brand" href="" style="font-size: 2.5rem">tindog.</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Download</a>
            </li>
          </ul>
        </div>
      </nav>

      <!-- Title -->

      <div class="row">
        <div class="col-lg-6">
          <h1 style="font-family: Montserrat; font-size: 3.5rem;  line-height: 1.5;">Meet new and interesting dogs nearby.</h1>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fa-brands fa-apple"></i> Download</button>
          <button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fa-brands fa-google-play"></i> Download</button>
        </div>

        <div class="col-lg-6">
          <img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
        </div>
      </div>
    </div>
  </section>

  <!-- Features -->

  <section id="features">
    <div class="row">
      <div class="feature-box col-lg-4">
        <i class="icon fa-solid fa-circle-check fa-4x"></i>
        <h3 style="font-family: Montserrat ; font-size: 1.5rem;">Easy to use.</h3>
        <p>So easy to use, even your dog could do it.</p>
      </div>

      <div class="feature-box col-lg-4">
        <i class="icon fa-solid fa-bullseye fa-4x"></i>
        <h3 style="font-family: Montserrat ; font-size: 1.5rem;">Elite Clientele </h3>
        <p>We have all the dogs, the greatest dogs.</p>
      </div>

      <div class="feature-box col-lg-4">
        <i class="icon fa-solid fa-heart fa-4x"></i>
        <h3 style="font-family: Montserrat ; font-size: 1.5rem;">Guaranteed to work. </h3>
        <p>Find the love of your dog's life or your money back.</p>
      </div>
    </div>

  </section>

  <!-- Footer -->

  <footer id="footer">

    <p>© Copyright TinDog</p>

  </footer>

</body>

</html>

changing property of a link

a.nestedink:link, a.nestedlink:visited {
color: red;
}

I believe with the a and only using .nestedlink, the default a:link property would override the .nestedlink.

CSS changes are not getting reflected. Why?

I forgot to close a { in the CSS file.
That's why all the code didn't show up on the page.

---

Related Topics