Applying CSS

Cascading Style Sheets (CSS) can be implemented in three ways - inline, embedded and external. We will illustrate all three ways by colouring the text inside the paragraph element <p/> below red . 

				
				<!DOCTYPE html>
				<html lang="en">
				<head>
					<meta charset="utf-8"/>
					<title>This Page's Title</title>
				</head>
				<body>
				    <p>Just a line in this paragraph.</p>
				</body>
				</html>

Inline CSS

Inline styles are added directly into the element's tag using the style attribute. Below we add the style attribute to the paragraph element which contains the color property to which we assign the value red. 

					
					<p style="color:red">Just a line in this paragraph.</p>

Embedded CSS

Embedded (or internal) styles are specific to the page they are defined. They are inserted inside the style element, which is enclosed within the head element. The following rule will colour all texts inside the paragraph elements red. 

					
					<head>
					<style type="text/css">
						p {
							color: red;
						}
					</style>
					</head>

External CSS

CSS can be placed in a separate file and linked to it from an HTML document. Open a text editor and type the following style definition 

					
					p {
						color: red;
					}

and save the file as style.css. This file can be linked via the link element, which goes inside the head section

					
					<head>
						<link rel="stylesheet" type="text/css" href="style.css"/>
					</head>