CSS and HTML 5 – ID in CSS

You can assign CSS attributes to HTML features using ID’s like you would with Classes.

idStyle.css

#id1 {
	background-color: yellow;
}

#id2 {
	background-color: pink;
}

#id3 {
	background-color: green;
}

.class1 {
	color: orange;
}

.class2 {
	color: red;
}

id.html

<html>
<head>
<link rel="stylesheet" href="idStyle.css" />
</head>

<body>
<h1 id="id1">This is basic H1</h1>

<div id="id2">
<h1> This is an DIV tag with the id2 ID</h1>
<p> This is more text within the id2 DIV</p>
</div>

<div id="id3">
<h1 class="class1"> This a id3 and class1</h1>
<p class="class2"> This is id3 and class2</p>
</div>

<a href="#id4">This is a link to id4</a>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
<div id="id4">Just to show ID's can be used to Anchor Hyperlinks</div>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
.<br>
</body>
</html>

Be the first to comment

Leave a Reply