Main menu

Pages

Difference between inline, internal and external CSS

 CSS (Cascading Style Sheets) is used to style and layout web pages. There are three ways to add CSS to an HTML document: inline, internal, and external.



  1. Inline CSS:

  1. Inline CSS is when you apply CSS directly to an HTML element using the style attribute. For example:
<p style="color: red;">This text is red.</p>

Inline CSS is not recommended because it makes the HTML document harder to read and maintain. It should only be used for small style changes that are specific to a single element.

  1. Internal CSS:

  1. Internal CSS is when you define CSS in the head section of an HTML document using the <style> tag. For example:
<!DOCTYPE html> <html> <head> <title>Internal CSS Example</title> <style> p { color: red; } </style> </head> <body> <p>This text is red.</p> </body> </html>

Internal CSS is useful when you want to apply a consistent style to multiple elements on a single web page. However, it can become difficult to manage when you have a large number of web pages on your website.

  1. External CSS:

  1. External CSS is when you define CSS in a separate file and link to it in the head section of an HTML document using the <link> tag. For example:
<!DOCTYPE html> <html> <head> <title>External CSS Example</title> <link rel="stylesheet" href="styles.css"> </head> <body> <p>This text is red.</p> </body> </html>

External CSS is the most efficient way to add CSS to your website. It allows you to keep your HTML and CSS separate, making your code easier to read and maintain. It also allows you to reuse your CSS on multiple web pages, which can save time and reduce the amount of code you need to write.


Comments

table of contents title