Back to Job Interview Question listing

What are the three main ways to add CSS to a webpage?

Experience Level: Junior

Tags: CSS

Answer

External style - link

Example

<html>
<head>
	<title>External style for CSS</title>
	<link rel="stylesheet" type="text/css" href="html-cheat-sheet.css" />
</head>
<body>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>

In-line style - atribut

Example

<html>
<head>
	<title>In-line style for CSS</title>
</head>
<body>
	<p style="color: red">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>

Embedded style

Example

<html>
<head>
	<title>Embedded style for CSS</title>
	<style>
		p  {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 13px;
		color: #ff9900;
		}
	</style>
</head>
<body>
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>