Software > Cheat Sheets > CSS

• Adding CSS to HTML
• CSS-based areamap

<link rel="stylesheet" type="text/css" href="mystyle.css" />

<style type="text/css"></style>

<span style="color:blue;margin:10px">

<style type="text/css">
ul#imageToMap {
	list-style: none;
	background: url(background_image.jpg) no-repeat 0 0;
	position: relative;
	width: 310px;
	height: 460px;
	margin: 0;
	padding: 0;
}
ul#imageToMap li {
	border: 1px solid #000;
	position: absolute;
}
ul#imageToMap li a{
	display: block;
	height: 100%;
	text-indent: -9000px;
}
#areaMap_1 {
	width: 300px;
	height: 50px;
	top: 100px;
	left: 0px;
}
#areaMap_2 {
	width: 300px;
	height: 50px;
	top: 200px;
	left: 0px;
}
</style>
<ul id="imageToMap">
	<li id="areaMap_1">
		<a href="#page1"></a>
	</li>
	<li id="areaMap_2">
		<a href="#page1"></a>
	</li>
</ul>