h1 element is getting a inline style “color: rgb(34, 34, 34);” [on hold]

39
January 28, 2019, at 10:20 PM

the h1 element is getting a inline style "color: rgb(34, 34, 34);" property by itself. if I give other inline style in h1 they take effect without the color property

I have even tried to use !important tag in the .css file but that also dosen't take any effect.

I want the h1 element to take the color value I provide to show

//html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="Abir Hossain Joy" href="#"/>

<title>title</title>
<link rel="stylesheet" href="assets/css/normalize.min.css">
<!-- <link rel="stylesheet" href="assets/css/bootstrap.min.css"> -->

<script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>

<section id="work">
      <div class="workContainer">
        <!-- Top part -->
        <div class="top">
          <!-- Slide 1 top content -->
          <div class="homeSlide slide01 slideActive ">
              <div class="wrapper">
                <h1>some Text</h1>
              </div>
              <div class="wrapper cloneWrapper">
                <h1>some Text</h1>
              </div>
          </div>
          <!-- Slide 2 top content -->
          <div class="homeSlide slide02">
              <div class="wrapper">
                <h1>some Text</h1>
              </div>
              <div class="wrapper cloneWrapper">
                <h1>some Text</h1>
              </div>
          </div>
          <!-- Slide 3 top content -->
          <div class="homeSlide slide03">
              <div class="wrapper">
                <h1>some Text</h1>
              </div>
              <div class="wrapper cloneWrapper">
                <h1>some Text</h1>
              </div>
          </div>
          <div class="homeSlide slide04">
              <div class="wrapper">
                <h1>some Text</h1>
              </div>
              <div class="wrapper cloneWrapper">
                <h1>some Text</h1>
              </div>
          </div>
          <div class="homeSlide slide05">
              <div class="wrapper">
                <h1>some Text</h1>
              </div>
              <div class="wrapper cloneWrapper">
                <h1>some Text</h1>
              </div>
          </div>
          <div class="homeSlide slide06">
              <div class="wrapper">
                <h1>some Text</h1>
              </div>
              <div class="wrapper cloneWrapper">
                <h1>some Text</h1>
              </div>
          </div>
        </div><!-- /Top part -->

      <!-- Prev/Next Navigation -->
      <div id="slideNav">
        <ul>
          <li class="slideNavPrev">
            <a href="#" title="Go to previous slide">
              <span class="ico ico-up">↓</span>
            </a>
          </li>
          <li class="slideNavNext">
            <a href="#" title="Go to next slide">
              <span class="ico ico-down">↑</span>
            </a>
          </li>
        </ul>
      </div>

<script src="assets/js/lib/jQuery-3.3.1.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-    1.11.2.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TimelineLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="assets/js/lib/bootstrap.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script type="text/javascript" src="assets/js/project.js"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
   ga('create', 'UA-XXXXX-Y', 'auto');
   ga('send', 'pageview');
 </script>
</body>
</html>

//css

.wrapper {
position: absolute;
color: #d4bbab;
bottom: 0;
cursor: pointer;
font-weight: 300;
width: 100%;
margin: 0 0 20px 0;
font-size: 40px;
text-align: center;
z-index: 4;
}
.cloneWrapper {
position: absolute;
font-weight: 300;
bottom: 0;
width: 100%;
margin: 0 0 20px 0;
font-size: 40px;
text-align: center;
color: #f2dcca;
z-index: 4;
}

when Inspected in chrome

it goes 1st image to 2nd one

Answer 1

i didn't get what you want, because you didn't type your code.

anyway i think you should use the !important keyword to solve your problem.

if you are doing in your html code use something like this

<h1 style="color:red !important;">some text...!</h1>

or if you want to do it in jquery(something like after click a button your h1 tag get some css) use this:

html

<h1 id="h1_id">some text...!</h1>
<button id="btn_id">click me</button>

Jquery

$("#btn_id").on('click' , function(){
    $("#h1_id).css('color', 'red !important');
`});`
READ ALSO
Autotrack.js upgrade causes my onclick link tracking to break

Autotrack.js upgrade causes my onclick link tracking to break

I have been using event tracking with autotrackjs to track link clicks on my site

22
nodejs async/promise hell

nodejs async/promise hell

I have the following function:

50
How to debug GraphQL resolver in a IDE like VS code

How to debug GraphQL resolver in a IDE like VS code

I am trying to make a Api using graphql and nodejs for that i want to debug my GraphQL resolver's because i write some important and complex logic in my resolver'sI am using Apollo server for Graphql server

37
How to display pdf in frontend Angular from fetched binary data?

How to display pdf in frontend Angular from fetched binary data?

I can save pdf binary data into MongoDB via Nodejs and I can fetch that pdf Binary data from MongoDB too but I can not display the pdf file from the fetched binary data in Angular

30