Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
html
communitycreator

Inline vs. internal vs. external CSS

Programming Bytes

Overview

We can incorporate CSS into the webpage in three ways:

  1. Inline
  2. Internal
  3. External CSS file

Inline

The inline CSS styles are added to the HTML tag using the style attribute.

The inline CSS is not recommended because we need to add style individually for each HTML tag. It will be hard to maintain the style.

Example

Adding inline CSS styles using the style attribute

In the code above, we add the style attribute to the body and h1 tags. This applies the style to that element.

Internal

The internal CSS means inside the head tag. We can include the <style> tag to define the style for the webpage.

The limitation of the internal CSS is that we cannot use the defined style on another HTML page. We need to include the same <style> section on every HTML page.

Example

Included Inline style in head tag

We define the styles inside the head element in the above code.

External CSS

In external CSS, we define the styles in a specific file(file extension should be .css) and link that to our web pages using the link tag.

This is a recommended way of including styles on a webpage because we can define the common CSS styles in specific files and include that file in all web pages.

Example

Using the External css fie

Explanation

In line 3, we include an external CSS file from Github.

<link rel="stylesheet" type="text/css" href="https://darny.github.io/csstemplate/style.css" /> 

We link the style.css file using the link tag in the above HTML file.

This loads the styles from the style.css file.

RELATED TAGS

css
html
communitycreator
RELATED COURSES

View all Courses

Keep Exploring