HTML CSS

Inline

HTML Code:

<h1>This heading will not be affected</h1> <p style="color:red; text-align:center;"> This paragraph will be red and center-aligned. </p> <p style="color:red; text-align:center; font-size:200%;"> This paragraph will be red, center-aligned, and in a large font-size. </p>

Result:

This heading will not be affected

This paragraph will be red and center-aligned.

This paragraph will be red, center-aligned, and in a large font-size.


Internal

HTML Code:

<!DOCTYPE html> <html lang="en-US"> <head> <style> p.center { text-align: center; /* This is a single-line comment */ color: red; } p.large { font-size: 200%; } </style> </head> <body> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be red and center-aligned.</p> <p class="center large"> This paragraph will be red, center-aligned, and in a large font-size. </p> </body> </html>

Result:

This heading will not be affected

This paragraph will be red and center-aligned.

This paragraph will be red, center-aligned, and in a large font-size.


External

In head add link.

HTML Code:

<head> <link href="css_files/CSSFile.css" rel="stylesheet" type="text/css" /> </head>

CSSFile.css content:

p.center { text-align: center; /* This is a single-line comment */ color: red; } p.large { font-size: 200%; }

Result:

This heading will not be affected

This paragraph will be red and center-aligned.

This paragraph will be red, center-aligned, and in a large font-size.

HTML Index

References

  1. W3Schools
  2. Style
  3. Color

This page is only a summary of the material from W3Schools. Definitions, Examples and Codes are exclusive property of W3Schools.