How To Add CSS In HTML?

❮ Prev Next: CSS Cascading Order ❯

There are three ways to add or include CSS in HTML:

Inline CSS A specific element is styled by inline CSS, using the style attribute in the opening tag of the HTML element to be styled.
Internal CSS That is, adding CSS to a particular HTML page, using HTML style tags in the head section of that HTML page, selecting a desired element of the page to style it, or using a class of CSS within one or more elements to apply CSS.
External CSS First prepare a separate css file and link that file in the head section of the HTML, ie in one page or more than one page.

Inline CSS

Inline style used to apply a unique style to a particular element.

To implement inline styles, add a HTML style attribute to the start tag of the relevant HTML element. You can use any of the CSS properties and their values in the style attribute.

Example of inline CSS

Here the style attribute is used inside the h1 and p tags.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:red;">This is a red heading</h1>
<p style="color:green;">This is a green paragraph.</p>

</body>
</html>

Internal CSS

Internal CSS is used to apply style to a specific page, a good way to style any specific page is to use an internal style.

Insert the <style> element into the head section of desired HTML page.

Example of internal CSS

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: light;
}

h1 {
color: red;
text-align: center;;
}

p {
text-align: left;
font-size: 16px;
}
</style>
</head>
<body>

<h1>This is a red and center align heading</h1>
<p>This is a green and left align paragraph.</p>

</body>
</html>

External CSS

For use a external style sheets first can be prepaire a CSS style sheet in any text editor, and should be saved this file with the .css extension, then link this style file in head section of one or more HTML file.

This is a template of CSS style sheet

File name with extension name for example: style.css

body {
  background-color: light;
}

h1 {
  color: red;
  margin-left: 10px;
}

p {
color: green;
font-size: 16px;
}

See how external style sheets are linked inside the head section of the HTML page.

Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>This is a red heading</h1>
<p>This is a green paragraph.</p>

</body>
</html>

Note

The <link> element contains only the opening tag.

❮ Prev Next: CSS Cascading Order ❯