Skip to main content

Introduction

CSS standard for Cascading Style Sheets. This is a stylesheet language used mostly in HTML that will allow you to beautify the UI elements.

  • CSS 1: was first intraduced in 1996
  • CSS 2: was released in 1998
  • CSS 3: The modren version and still keep getting releases.

Types of writing CSS​

There are three primary ways to include CSS styles in a web project, each with its own set of advantages and disadvantages.

1. Inline Styles​

In this method, CSS is applied directly within the HTML tags using the style attribute.

<p style="color: red; font-size: 16px;">This is a red paragraph.</p>

Advantages:​

  • Quick and easy to implement for small tasks.
  • Styles are applied directly to the element, ensuring high specificity.

Disadvantages:​

  • Not reusable, leading to repetition and increased HTML file size.
  • Difficult to manage for larger projects.
  • Separation of concerns is violated, as HTML also carries styling information.

2. Internal (or Embedded) CSS​

Here, the CSS is included in the <head> section of the HTML document within a <style> tag.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>This is a red paragraph.</p>
</body>
</html>

Advantages:​

  • Styles are contained within the same document, making it easier to manage smaller projects.
  • Reusable within the same HTML document.

Disadvantages:​

  • Not reusable across multiple pages.
  • Increases the size of the HTML file.
  • Can become cumbersome for larger projects.

3. External CSS​

In this method, CSS is written in a separate file (usually with a .css extension) and linked to the HTML document using the <link> tag.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>This is a red paragraph.</p>
</body>
</html>

In styles.css:

p {
  color: red;
  font-size: 16px;
}

Advantages:​

  • Highly reusable across multiple HTML pages.
  • Easier to maintain and manage, especially for larger projects.
  • Allows for caching, improving page load performance.

Disadvantages:​

  • Requires an additional HTTP request to load the external stylesheet, although this is often mitigated by caching.

Using external CSS files would likely be the most efficient and maintainable approach for larger projects. It aligns well with the principles of modularity and separation of concerns.