< Previous Next >

How to add CSS

CSS is added to HTML pages to format the document according to information in the style sheet.

Three ways to add CSS

Inline CSS
Internal CSS
External CSS

Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

Example:
<h2 style="color:red;text-align:center;">This is a second heading</h2>
<p style="color:blue;">This is a paragraph.</p>

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section.

Example:
<html>
<head>
<style>
body {
background-color: aqua;
}
h1 {
color: red;
margin-left: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

External CSS

With an external style sheet, you can change the look of an entire website by changing just one file!

Each HTML page must include a reference to the external style sheet file inside the element, inside the head section.

Example:
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Here are the key points on how to add CSS to a webpage:

1. Inline CSS

You can apply CSS directly within an HTML element using the style attribute.
This method is typically used for applying quick, small styles to individual elements.

2. Internal CSS

You can define CSS rules inside the <style> element within the <head> section of an HTML document.
This method is used when styling a single document.

3. External CSS

You can link an external CSS file to an HTML document using the <link> element in the <head> section.
This method is ideal for applying styles to multiple pages.

< Previous Next >