In this tutorial, learn how to include CSS in HTML pages. The CSS is the style sheet that defines the overall look and feel of the web documents. After you define the CSS, you need to add the CSS to your HTML pages.
How to Include CSS in HTML Pages (3 Easy Ways)
Here are the three ways of inserting CSS in HTML pages:
- Inline: Placing CSS within the HTML elements using
styleattribute. - Internally: Adding CSS inside the
<style>element in HTML pages. - Link Externally: Create a CSS file with the ‘.css’ extension and link it in the
<head>section of HTML using the<link>element.
So, let’s start with CSS inline method to include CSS in HTML pages.
Include CSS Inline with Style Attribute in HTML
You can include CSS inline in HTML pages using the HTML style attribute. The attribute takes a single as well multiple CSS properties in any HTML elements with property: value; pairs. Don’t forget to use the semicolon ; after each pair. It can be used to add CSS directly to the HTML element as given below:
|
1 2 |
<h2 style="color:#000;font-size:28px;">This is a heading</h2> <p style="color:red;font-size:18px;">This is a paragraph.</p> |
The above example shows the added CSS directly in the <h2> element and <p> element of HTML. You can check the above example live by clicking on the ‘Test it Live’ button given above.
Add CSS Internally Using <style> Element to Include CSS in HTML
To add CSS internally, you can use the HTML <style> element and place all the CSS inside the element. You can use the element name, class, or Id as the selector to select the element to add the CSS properties inside the curly brackets ({}) as given below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <title>Add CSS Internally in CSS Tutorial</title> <style> h2{ color:#000; font-size:28px; } p{ color:red; font-size:18px; } </style> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> </body> </html> |
The above example shows the added CSS in the head part of HTML and within the <style> element. It defines the CSS for h2 and p using the element names as a CSS selector. However, you can also use the element class or id to select the element and apply CSS.
Link External CSS File Using <link> Element
The CSS can also be added to the external CSS files to add to the HTML pages for inserting them. You have to first define all the CSS inside an external CSS file and name it with the ‘.css’ extension as ‘style.css’. The below example shows the CSS added to the external CSS file:
|
1 2 3 4 5 6 7 8 |
h2{ color:#000; font-size:28px; } p{ color:red; font-size:18px; } |
After that, you need to link the file to the HTML pages using the HTML <link> element as given below:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <title>Add CSS Internally in CSS Tutorial</title> <link rel="stylesheet" href="style.css"> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> </body> </html> |
The above example shows the added external CSS file within the HTML in the href attribute of <link> element.
Which You Should Prefer to Include CSS in HTML
From the above all methods, it is recommended to always use the last method that is by adding a link to the external source CSS file. However, sometimes, it may be required to add inline CSS. That is ok to use inline CSS in rare places (only 2 to 3 places) when necessary.