Add CSS to HTML

Adding CSS styles to HTML can be done in three ways: inline CSS, internal CSS and external CSS.

What is Inline CSS?

Inline CSS refers to the use of a style attribute within an HTML element to apply a specific CSS rule to that element only. The CSS rule is written directly in the HTML code, rather than in a separate CSS file or in a <style> element.

This allows for specific styling of an individual element, but can make the code more difficult to maintain if there are many elements with inline styles.

Here is an example of using inline CSS to change the color of a specific paragraph in an HTML document:

<p style="color: blue;">This is a blue paragraph.</p>
<p>This is a normal paragraph.</p>

In this example, the first paragraph has an inline style attribute that sets the text color to blue, while the second paragraph does not have an inline style and will be displayed in the default text color.

What is Internal CSS?

Internal CSS refers to the use of a <style> element within the <head> of an HTML document to define CSS styles that will apply to the entire document.

The CSS rules are written within the <style> element and are only available to the current HTML document.

Here's an example of internal CSS:

<html>

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>This is a blue paragraph.</p>
  <p>This is another blue paragraph.</p>
</body>

</html>

In this example, all the <p> elements in the HTML document will be blue because the internal CSS defined it as such.

This method is useful when you have a small website or you don't want to create a separate CSS file for a single page. However, if you have multiple pages that share the same styles, it can be less efficient to include the CSS in each HTML file individually.

What is External CSS?

External CSS refers to the use of a separate .css file to define CSS styles that will apply to multiple HTML documents.

The CSS file is saved with a .css file extension and the path to this file is included in the HTML documents using the link element in the head section of the HTML documents.

Here's an example of how to link an external CSS file to an HTML document:

<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>This is a blue paragraph.</p>
  <p>This is another blue paragraph.</p>
</body>

</html>

In this example, styles.css is the name of the external CSS file, and it is linked to the HTML document using the link element. The CSS styles in styles.css will be applied to the HTML document.

This method is useful when you have multiple pages that share the same styles. It allows you to separate the presentation from the structure and makes it easy to maintain and update the styles across multiple pages.

It also allows for caching of the CSS file, improving performance for repeat visitors to the website.

CSS Files Minification

Web developers tend to minify CSS files to reduce the file size and improve website performance. Minifying a CSS file involves removing unnecessary whitespace, comments, and other characters that are not required for the CSS to function properly.

Here are a few reasons why minifying CSS files can be beneficial:

Smaller file size:

By removing unnecessary characters, the file size is reduced, which means it will take less time for the browser to download and parse the file. This can lead to faster page load times for users.

Caching:

Minified files are often smaller, which means they can be cached more efficiently by the browser. This can lead to faster load times for repeat visitors to the website.

Security:

Minifying files can make it more difficult for malicious actors to read and understand the code, which can make it harder for them to exploit vulnerabilities.

Ease of maintenance:

Minifying files reduces the file size making it easier to manage.

It is important to note that while minifying CSS can improve website performance, it also makes the code harder to read and understand, which can make it more difficult to maintain and update.

Some developers prefer to work with unminified CSS and minify the file before deploying it to a production environment.

❮ Previous Next ❯