class Selector

  • Styles a group of elements
  • Utilises the class attribute of an element
  • Defined with a¬†.¬†followed by the value assigned to the class attribute

 

<!DOCTYPE html>
<html>
	<head>
		<meta></meta>
		<link></link>
		<title>Document Title</title>
		<style>
			.centering { text-align: center; }
		</style>
	</head>
	<body>
		<h1 class="centering">A very simple page</h1>
		<p>A line of text.<p>
		<p>A line of text.<p>
		<p class="centering">A line of text.<p>
		<p>A line of text.<p>
		<p>A line of text.<p>
	</body>
</html>

Save & refresh browser:

A very simple page

A line of text.

 

A line of text.

 

A line of text.

 

A line of text.

 

A line of text.

 

 

More specific elements can also styled by specifying only parent elements with the class defined. In this example only <p> elements have the rule applied:

<!DOCTYPE html>
<html>
	<head>
		<meta></meta>
		<link></link>
		<title>Document Title</title>
		<style>
			p.centering { text-align: center; }
		</style>
	</head>
	<body>
		<h1 class="centering">A very simple page</h1>
		<p>A line of text.<p>
		<p>A line of text.<p>
		<p class="centering">A line of text.<p>
		<p>A line of text.<p>
		<p>A line of text.<p>
	</body>
</html>

Save & refresh browser:

A very simple page

A line of text.

 

A line of text.

 

A line of text.

 

A line of text.

 

A line of text.

Leave a Reply