Few tips

Details
Written by: Stanko Milosev
Category: CSS
Hits: 4229

# - id selector, example:

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link rel="stylesheet" type="text/css" href="/index.css">
	</head>
	
	<body>
	<h2 id="featured">featured</h2>
	test
	</body>
	
</html>

CSS (index.css):

h2#featured {
	color: red;
}

Notice line <h2 id="featured">featured</h2>

element selector, example:

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link rel="stylesheet" type="text/css" href="/index.css">
	</head>
	
	<body>
	<h2>featured</h2>
	test
	</body>
	
</html>

CSS:

h2 {
	color: red;
}

Notice now that I deleted ID from line <h2>featured</h2> and css is without hash sign.

. -class selector, example:

HTML:

<!DOCTYPE html>
<html>

	<head>
		<link rel="stylesheet" type="text/css" href="/index.css">
	</head>
	
	<body>
	<h2 class="myClass">featured</h2>
	test
	</body>
	
</html>

CSS:

.myClass {
	color: red;
}

Notice now how I wrote line <h2 class="myClass">featured</h2>

Rest of CSS selectors you can find here.