{"id":729,"date":"2019-10-30T08:03:15","date_gmt":"2019-10-30T08:03:15","guid":{"rendered":"http:\/\/blog.hostinger.io\/hostinger-tutorials\/uncategorized\/difference-between-inline-external-and-internal-css\/"},"modified":"2025-12-02T15:34:37","modified_gmt":"2025-12-02T15:34:37","slug":"difference-between-inline-external-and-internal-css","status":"publish","type":"post","link":"\/ca\/tutorials\/difference-between-inline-external-and-internal-css","title":{"rendered":"Types of CSS: inline, external and internal definitions and differences explained"},"content":{"rendered":"

CSS defines the front-end appearance of your website. There are several types of CSS, among them are inline and external CSS.<\/p>

In short, the main difference between inline CSS and external CSS is that the former is processed faster as it only requires the browser to download one file, while external CSS will require downloading HTML and CSS files separately.<\/p>

In this tutorial, we’ll go in-depth comparing the three types of CSS styles – inline CSS, external CSS, and internal CSS. We’ll also uncover the advantages and disadvantages of using each method.<\/p>

Download complete CSS cheat sheet<\/a><\/p>

\n\n\n\n\n<\/p>

What Is CSS<\/h2>

Cascading Style Sheets (CSS) is a markup language responsible for how your web pages will look like. It controls the colors, fonts, and layouts of your website elements.<\/p>

This style sheet language also allows you to add effects or animations to your website. You can use it to display some CSS animations like click button effects, spinners or loaders, and animated backgrounds.<\/p>

Without CSS, your website will appear as a plain HTML page<\/a>. Here’s how Twitter<\/a> will look like if we disable its CSS:\"Example<\/p>

\n

What's the Difference Between Inline, External and Internal CSS Styles?<\/h2>\n

The main difference between Inline, external and internal CSS Styles is their location and scope of application. Inline CSS styles are included within the HTML document and are specific to individual HTML elements, allowing for targeted styling. Internal CSS styles are included within the head section of an HTML document and apply to the entire document, allowing for consistent styling across multiple elements. External CSS styles are stored in a separate file and can be linked to multiple HTML documents, allowing for global styling across an entire website. <\/p>\n <\/div>\n\n\n\n<\/p>

Internal CSS<\/h3>

Internal or embedded CSS requires you to add a <style><\/strong> tag in the <head><\/strong> section of your HTML document.<\/p>

This CSS style is an effective method of styling a single page. However, using this style for multiple pages is time-consuming as you need to put CSS rules on every page of your website.<\/p>

Here’s how you can use internal CSS:<\/p>

    \n
  1. Open your HTML page and locate <head><\/strong> opening tag.<\/li>\n\n\n\n
  2. Put the following code right after the <head><\/strong> tag<\/li>\n<\/ol>
    <style type=\"text\/css\"><\/pre>
      \n
    1. Add CSS rules on a new line. Here’s an example:<\/li>\n<\/ol>
      body {\n    background-color: blue;\n}\nh1 {\n    color: red;\n    padding: 60px;\n}\n\nType the closing tag:\n\n<\/style><\/pre>
      Your HTML file will look like this:<\/p>
      <!DOCTYPE html>\n<html>\n<head>\n<style>\nbody {\n    background-color: blue;\n}\nh1 {\n    color: red;\n    padding: 60px;\n} \n<\/style>\n<\/head>\n<body>\n\n<h1>Hostinger Tutorials<\/h1>\n<p>This is our paragraph.<\/p>\n\n<\/body>\n<\/html><\/pre>
      Advantages of Internal CSS:<\/strong><\/p>