CSS How To Start

CSS can be applied to HTML documents in different ways. External, Internal, and Inline CSS. Here you will learn How, When, and Where to use these methods and to choose between these methods.

External Stylesheet

  • External Stylesheet files are stored in separate files with a .css extension.
  • External CSS files can be created using any text/code editor such as Notepad, Notepad++, or Dreamweaver.
  • External CSS files are linked to HTML documents using the <link> element in the document’s head between the start <head> and end </head> tags section.
  • CSS files with the extension .css have their own syntax format and no other types of syntax e.g. HTML or JS can be used within its file.

How to create, edit, and save web development files check this tutorial. The method is the same with exceptions to save files with the .css extension.

Example of External CSS file:

/* CSS External file (w3scoop_try_style.css) */
body {
	color: #555555;
	font-size: 14px;
	letter-spacing: 1px;
	font-family: 'Roboto', sans-serif;
}
h1 {
	color: #4CAF50;
}
p {
	color: blue;
}

Let’s suppose we have an HTML file named index.html. Here is an example of how to apply the above-created external CSS file styles.css to that HTML document file index.html.

<!DOCTYPE html>
<html>
	<head>
		<title>CSS External StyleSheet</title>
		<link rel="stylesheet" type="text/css" href="https://www.w3scoop.com/wp-content/uploads/w3s_try/w3s_try_style.css">
	</head>
	<body>
		<h1>This is a heading</h1>
		<p>This is a paragraph.</p> 
	</body>
</html>

Example Output

Try Online

External CSS files can also be imported using the @import syntax in the CSS file or in the internal Stylesheet using the methods shown below.

/* Import external file in style.css */
@import url(Path/To/external/stylesheet.css)

/* CSS (styles.css) */
body {
	color: #555555;
	font-size: 14px;
	letter-spacing: 1px;
	font-family: 'Roboto', sans-serif;
}
a {
	cursor: pointer;
	text-decoration: none;
	color: #555555;
}

Internal Stylesheet

Internal Stylesheet involves placing the CSS rules directly within the HTML document, typically in the <style> element in the document’s <head> section.

Here’s an example of an internal Stylesheet:

<!DOCTYPE html>
<html>
	<head>
		<style>
			h1 {
				color: lightblue;
				font-family: Arial, sans-serif;
			}
			p {
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>This is a heading</h1>
		<p>This is a paragraph.</p>
	</body>
</html>

Example Output

Try Online

It can also be inserted in the <body> section.

Note:

Internal CSS is only useful for styling a single HTML document.

Import the external StyleSheet file in the Internal CSS StyleSheet `<style>` element inside the head section.

<head>
	<title>Title of the page<title>
	<style type="text/css"> 
		@import url(Path To stylesheet.css)
	</style>
</head>
<body>

Inline Stylesheet

In Inline styling, CSS rules are applied directly to the individual HTML element. Inline styling rules take precedence over all other CSS rules.

See an example of inline CSS:

<h1 style="color: red; font-size: 24px;">This is a heading styled with Inline CSS.</h1>
<p style="color: #31708f;">This is a paragraph with Inline styling.</p>
Try Online