Coding Newbie

how_to_insert_css

How to add CSS? Internal, External, and Inline CSS

CSS is extremely important language to understand, because it is the language behind the style of every webpage out there. It determines the overall look of your website, and without CSS, the website would be just plain text.

In this post we will talk about different types of CSS and how you can add it to your website.

How can we add CSS code to our website?

There are three ways to implement the CSS: internal, external and inline style. Each method has its advantages and disadvantages.

CSS compare, comparison, options-5201278.jpg

Internal CSS

Internal CSS is also known as Embedded CSS, and it is quite simple to add it to your HTML document. We just need to add <style> tag inside the <head> tag of HTML file.

<head>
    <style type=”text/css”>
     /* CSS CODE GOES HERE */
   </style>
</head>

We add all CSS styling rules between <style> tags.

Pros

  1. All your code is in one place, both HTML and CSS.
  2. CSS styling is loaded together with an HTML document, so there is no possibility that styling is lagging when opening the page.

Cons

  1. Because all the code is within one file, it increases the file size, which can lead to slower page load.
  2. If there is a need to completely change a page’s style, it requires the change within the HTML document, while with external CSS you can just connect the HTML code to a new CSS file.

External CSS

With External CSS, we keep our styling inside a separate file with .css extension. All the CSS code is written here, with default styling syntax: Selector {Property: Value}

After creating a separate CSS file, we just have to connect it with our HTML document. To be more precise, we need to add the link to our CSS file within the <head> section of HTML code.

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

Pros

  1. Writing the code in separate file keeps the code cleaner and the structure of the code is clearer.
  2. This practice allows us to connect several CSS files at once, which is a common practice with larger websites.
  3. Same CSS file can be used on multiple HTML documents.

Cons

  1. Linking a HTML document to more than one CSS file can make pages load slower.
  2. The HTML document loads first, and then starts to load CSS files. If there is a problem with page rendering, that can lead to a lag in loading styles.

Inline CSS

When you start learning HTML, most commonly Inline CSS is the first type of styling you learn.

It is the styling of a specific HTML element, so there is no need for selectors. However, as you have to style each HTML individually, this type of CSS is not recommended. It is used in some specific cases, mostly when you need to apply some styling to a certain HTML element, or you need to override internal or external styling.

Here is an example of Inline CSS. It is clear that it is not a flexible way of writing code.

<h1 style="color:white;padding:30px;">HEADING TITLE</h1>

Pros

  1. All the code is in one place, as with Internal CSS.
  2. There is no need for creating selectors, in the form of ids and classes, as you can easily find the document you wish to target and apply styling.

Cons

  1. It is not a practical way of writing code, especially today when most websites are complex. Applying style on every HTML element individually is extremely demanding, and it requires a lot of time and energy. 
  2. The HTML document becomes quite complicated to read and understand, which can affect later editing.
  3. Modern CSS has come a long way from its beginnings, and modern design solutions require using new properties, creating animations and effects with pseudo selectors and elements. This is much easier to create with External CSS.
  4. Having one file increases its size, which can increase web page loading time.

Which method to use?

The most commonly used method today is External CSS. It is the most flexible way of adding styling to your webpage, and in the same time you keep all your CSS files organized and in separate files.

In addition, this method is less error prone, as there is much less code repetition compared to Inline CSS, which should be used only in extreme situations.

Conclusion

We have discussed all three methods of adding CSS to your web pages: Internal, External, and Inline.

Each of these methods have their advantages and disadvantages. Which method you are going to use, depends solely on your needs. However, common practice today is to use External CSS method, while Inline CSS should be avoided.

If you wish to learn more about CSS and why CSS is important language to understand, you can read it in the article What is CSS and why is CSS so important?

%d bloggers like this: