CODEWITHSUNDEEP
htmlcss
Toph Hughes
Toph Hughes

Reputation: 111

How to change text color of element using CSS?

This is the HTML file I am working with. I tried to make the part that I am working on bold but it wouldn't work so I will just tell you, it's the line item with the class "right" that is about halfway down. If you notice, there is text that says "COMPLETE TASK" which is inside of that line item, and also an "a" reference tag. Basically, it works as a clickable item when running the application, and the color of the text by default seems to be white. I have to change the color of that text, and I am struggling to get it to work. What I tried previously was:

li.right a {
color: blue;
}

That did nothing. Any ideas?

<html>
<head>
    <title>To Do List | Pro Web Apps</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<link rel="stylesheet" media="screen" href="css/proui.css" />
    <link rel="stylesheet" media="screen" href="todolist.css" />
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery.validate.js"></script>
    <script type="text/javascript" src="js/prowebapps.js"></script>
	<script type="text/javascript" src="todolist.js"></script>
</head>
<body>
	<ul id="menu">
	</ul>
	<div id="main" class="view">
		<h1>Chris Hughes To Do List</h1>
		<div class="task" style="display: none;">
			<h3>Task: <span class="task-name"></span></h3>
			<p class="task-description"></p>
			<p class="task-due">
				<label>DUE IN:</label>
				<span class="task-daysleft"></span>
			</p>
			<ul class="task-actions">
				<li class="right"><a href="#" class="task-complete">COMPLETE TASK</a></li>
				<li><a href="#" class="task-start">START WORKING</a></li>
			</ul>
		</div>
		<ul class="buttons">
			<li><a class="changeview" href="#alltasks">Show All Tasks</a></li>
			<li><a class="changeview" href="#add">Add New</a></li>
		</ul>
	</div>
	<div id="alltasks" class="view">
		<h1 class="fancy">Chris Hughes All Tasks</h1>
		<ul id="tasklist">
		</ul>
	</div>
	<div id="add" class="view">
	    <h1 class="fancy">Chris Hughes Create Task</h1>
		<div id="errors"></div>
	    <form id="taskentry">
	    <ul>
	        <li><input type="text" minlength="2" class="required" name="task[name]" id="taskname" placeholder="Task Name" value=""/></li>
	        <li>
	            <textarea name="task[description]" id="taskdesc" placeholder="Description" rows="5"></textarea>
	        </li>
	        <li><input type="text" class="required date" name="task[due]" id="taskdue" placeholder="Task Due" value="" /></li>
	        <li class="naked"><input type="submit" name="Save" /></li>
	    </ul>
	    </form>
	</div>
</body>
</html>

Upvotes: 0

Views: 102

Answers (2)

Wordica
Wordica

Reputation: 2597

Try to do not use !important but find where color is overwritten. Open Your Chrome console and check where color:blue is overwritten for this element.

... or put You script on bottom of all CSS ( but this is not good solution )

Upvotes: 0

Anfuca
Anfuca

Reputation: 1329

Try this selector:

.task-actions li.right a.task-complete {
  color: blue;
}

Upvotes: 2

Related Questions