CSS Styles In HTML

CSS stands for Cascading Style Sheets. CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS is used to apply the style in the web page which is made up of HTML elements. It describes the look of the webpage.
CSS provides various style properties such as background color, padding, margin, border-color, and many more, to style a webpage.
Each property in CSS has a name-value pair, and each property is separated by a semicolon ";".

Simple Example of applying css in html document.

<body style="text-align: center;">  

  <h2 style="color: cadetblue;">
    Welcome to HTML Tutorial
  </h2>  
  <p style="color: cadetblue; font-size: 25px; font-style: italic;">
    Example of applying css through style attribute in html document
  </p>  

</body>

Ways we can apply css in html

Inline styling: by using the style attribute inside HTML elements
External styling: by using a element to link to an external CSS file
Internal Styling: by using a

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:

Example:

<h2 style="color:blue;">Blue Heading</h2>

<p style="color:red;">Red paragraph.</p>

Example:

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

<h2>This is a H2 heading</h2>
<p>This is a paragraph.</p>

</body>
</html>

Example:

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    background-color: cadetblue;
  }
  h2   {
   color: black;
 }
  p    {
    color: gray;
}
</style>
</head>
<body>

  <h2>This is a H2 heading</h2>
  <p>This is a paragraph.</p>

</body>
</html>

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML page:

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue" background color:

<-- Comments

IFrames -->