HTML Styles

In this tutorial, you'll learn how to apply style rules to HTML elements.

HTML style tags are used to style HTML elements.

Style information can be attached as individual documents or embedded in HTML documents. Here are three ways to apply styling information to an HTML document.

  1. Inline Styles
  2. Embedded style
  3. External style sheet

Inline Styles

Inline style means that HTML contents can be styled using style attributes with each HTML element. Almost all the properties of CSS can be used in the style attributes.

The example below shows how to set the text-align, background-color, color and font-size of the text:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
     <title>HTML Styles</title>										
  </head>
  <body style="background-color:#ddd;">
     <h1 style="text-align:center; font-size:35px;">This is a heading</h1>
     <p style="color:blue; font-size:25px;">This is a paragraph.</p>
  </body>
</html>

Embedded Style Sheets

Embedded or internal style sheets only affect the document embedded in them.

Embedded style sheets are defined in the <head> section of the HTML document using the <style> tag. You can define any number of <style> elements within the <head> section.

The example below shows how style rules are embedded on a web page.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
     <title>HTML Styles</title>			
    <style>
        body { background-color: #ddd; }
	h1 { text-align:center; font-size:35px; }
        p { color:blue; font-size:25px}
    </style>
  </head>
  <body>
     <h1>This is a heading</h1>
     <p>This is a paragraph.</p>
  </body>
</html>

External Style Sheets

The exterior style sheet is ideal when applying the style to many pages.

An external style sheet contains all the rules of the style in a separate document that you can link to any HTML document on your site.

You can attach an external style sheet in two ways – connect and import:

  1. Linking External Style Sheets
  2. Importing External Style Sheets
Linking External Style Sheets

An external style sheet can be linked to an HTML document using the <link> tag.

The example below shows how to add an external style sheet to a web page.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Linking External Style Sheets</title>			
     <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
     <h1>This is a heading</h1>
     <p>This is a paragraph.</p>
  </body>
</html>
Importing External Style Sheets

You can use it in two ways. The easiest way is to use it in the <style> element in your <head> section.

One way to load the outer style sheet is to import rules. @import statement instructs the browser to load an external sheet and use its styles.

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Importing External Style Sheets</title>			
     <style>
        @import url("css/style.css");
        h1 { text-align: center;}
       p{color:blue;}
    </style>
  </head>
  <body>
     <h1>This is a heading</h1>
     <p>This is a paragraph.</p>
  </body>
</html>

Similar way, you can use that @import rule to import style sheets into other style sheets.

Code Example:
@import url("style.css");
@import url("color.css");
body {
    color: blue;
    font-size: 14px;
}

TOOLS

ABOUT US

CONTACT