Home Snippets Projects Donate

Get Snippets For:

   Java    HTML/CSS JavaScript

Classes, IDs, and Selectors

Code Description:

Classes, IDs, and Selectors are used to associate CSS from an External or Internal style sheet with an HTML element.

Class Example Syntax:

<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS Example</title>
	   
	<style>
	   
	.importantText {	   
	   color: red;
 	   font-size: 20px;
	}
	   
        </style>
	   
    </head>
 
    <body>
	<p class="importantText">Paragraph Example Text...</p>
	<p class="importantText">More Paragraph Example Text...</p>
	<p class="importantText">Yet Again, More Paragraph Example Text...</p>
    </body>
</html>

ID Example Syntax:

<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS Example</title>
	   
	<style>
	   
	#importantMessage {	   
	   color: red;
 	   font-size: 20px;
	}
	   
        </style>
	   
    </head>
 
    <body>
	<p id="importantText">Paragraph Example Text...</p>
    </body>
</html>

Selector Example Syntax:

<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS Example</title>
	   
	<style>
        
        * {
 	   font-size: 20px;
        }
	   
	p {	   
	   color: red;
	}
	   
        </style>
	   
    </head>
 
    <body>
        <h1>Font Size for all text is set with *</p>
	<p>All Paragraph text is set to red</p>
    </body>
</html>

How to Run This Code:

Simply paste this code into a plain text file with the ".html" extension and save it. You will then be able to open it in the web browser of your choice.

Related Links: