In this section, we will learn what HTML <style> element is and how to use it.

Inline Style in HTML: How to Add Style to HTML and What is <style> Tag in HTML?

HTML <style> element is used to add CSS style directly to an HTML document.

This means the body of this element is the place where we can directly write CSS styles for the document.

The <style> element has an attribute named `type` by which we specify the media type of the content within the body of this element. Because the content of the <style> element is always CSS, the value of the `type` attribute would be “text/css”.

Note: there’s another way of adding CSS style to an HTML document and that is via the <link> element. We use this element when the CSS style is already written in another file and we just want to import that external resource into the current document.

HTML <style> Tag Syntax:

<style>

CSS styles…

</style>

HTML <style> Tag Values

The CSS styles that we want to set for an HTML document go inside the body of the <style> element.

Example: adding CSS to HTML with <style> tag

See the Pen adding CSS to HTML with <style> tag by Omid Dehghan (@odehghan) on CodePen.

Example: HTML CSS Style

See the Pen HTML CSS Style by Omid Dehghan (@odehghan) on CodePen.