Home Snippets Projects Donate

Get Snippets For:

   Java    HTML/CSS JavaScript

Associating CSS with HTML - External, Internal, and Inline Styles

Code Description:

Cascading Style Sheets (CSS) is used to make HTML elements personalized, colorful, and less boring. There are three ways to add CSS to an HTML document:

Example "styles.css" File

.exampleText {
   color: purple;
   font-size: 20px;
}

External CSS Example Syntax:

<!DOCTYPE html>
<html>
    <head>
        <title>External CSS Example</title>
	<link rel="stylesheet" type="text/css" href="styles.css"> 
    </head>
 
    <body>
	<p class="exampleText" >Paragraph Example Text...</p>
    </body>
</html>

Internal CSS Example Syntax:

<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS Example</title>
	   
	<style>
	   
	.exampleText {	   
	   color: purple;
 	   font-size: 20px;
	}
	   
        </style>
	   
    </head>
 
    <body>
	<p class="exampleText">Paragraph Example Text...</p>
    </body>
</html>

Inline CSS Example Syntax:

<!DOCTYPE html>
<html>
    <head>
        <title>Inline CSS Example</title>
    </head>
 
    <body>
	<p style="color: purple; font-size: 20px;">Paragraph Example Text...</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. For the External CSS Example, make sure you save the CSS code as "styles.css" and place it in the same folder as the HTML file.

Related Links: