A CSS TODO class for marking TODOs in WIP files. To use it, include the css in the header and create a div.todo containing the text message describing what you need to do. The CSS will prepend the word "TODO" and highlight the element to make it easy to find on the page, it also highlights the next element, assuming that whatever is after the TO…

todo.css

/* CSS for adding TODO notes on WIP pages */
div.todo { /* style the text in a bright box */
  color: red;
  font-size: large;
	background-color: yellow;
	text-align: center;
	border: 3px solid red;
	border-bottom: 1px solid red;
	margin-bottom: 0;
	padding: 1px;
}
div.todo:before { /* prepend the word TODO to the text */
	font-weight: bold;
	content: "↓ TODO: "
}
div.todo+* { /* style the following element in a bright box too */
	border: 3px solid red;
	border-top: 0;
	margin-top: 0;
}