HTML - Style Sheet

Ethan D. - May 24, 2024

Types of Style Sheets

There are three types of style sheets in HTML: internal style sheets, external style sheets, and inline styles. Each type has its own advantages and disadvantages, and the choice of which to use depends on the specific needs of the website.

Internal Style Sheet

An internal style sheet is defined within the <head> section of an HTML document using the <style> tag. It lets you apply styles to multiple elements within a single HTML page. The main advantage of using an internal style sheet is that it keeps the styles specific to that page, making it easier to manage and understand. However, if you have multiple pages that require the same styles, you would need to duplicate the internal style sheet in each page, which can become difficult to maintain.

Example: Internal Style Sheet

<!DOCTYPE html>
<html>
<head>
  <title>Internal Style Sheet Example</title>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #333;
      text-align: center;
    }
    p {
      font-size: 16px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is an example of an internal style sheet.</p>
</body>
</html>

External Style Sheet

An external style sheet is a separate CSS file that contains the styles for a website. It is linked to the HTML document using the <link> tag within the <head> section. The main advantage of using an external style sheet is that it lets you apply the same styles across multiple pages, making it easy to maintain a consistent look and feel throughout the website. Also, because the styles are in a separate file, it can improve the loading speed of the website. The disadvantage is that an extra HTTP request is needed to get the external CSS file.

Example: External Style Sheet

<!DOCTYPE html>
<html>
<head>
  <title>External Style Sheet Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is an example of an external style sheet.</p>
</body>
</html>

Inline Styles

Inline styles are applied directly to an HTML element using the style attribute. They override any styles defined in internal or external style sheets. The main advantage of using inline styles is that they let you apply styles to a specific element quickly. However, inline styles mix content with presentation, making the HTML code harder to read and maintain. Also, if you need to apply the same style to multiple elements, you would need to duplicate the inline style for each element.

Example: Inline Styles

<!DOCTYPE html>
<html>
<head>
  <title>Inline Styles Example</title>
</head>
<body>
  <h1 style="color: #333; text-align: center;">Welcome to My Website</h1>
  <p style="font-size: 16px; line-height: 1.5;">This is an example of inline styles.</p>
</body>
</html>

Linking External Style Sheets

To link an external style sheet to an HTML document, you need to use the <link> tag within the <head> section of your HTML file. The <link> tag has several attributes that you need to specify:

Attribute	Description
`rel`	Specifies the relationship between the HTML document and the linked file. For linking a style sheet, the value should be `"stylesheet"`.
`type`	Specifies the type of the linked file. For a CSS file, the value should be `"text/css"`.
`href`	Specifies the URL or file path of the external style sheet.

Example of how to link an external style sheet

<!DOCTYPE html>
<html>
<head>
  <title>Linking External Style Sheet Example</title>
  <link rel="stylesheet" type="text/css" href="path/to/styles.css">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is an example of linking an external style sheet.</p>
</body>
</html>

In the example above, the <link> tag is placed within the <head> section. The rel attribute is set to "stylesheet", indicating that the linked file is a style sheet. The type attribute is set to "text/css", specifying that the linked file is a CSS file. The href attribute contains the file path of the external CSS file, which is "path/to/styles.css" in this example. You need to replace this with the actual file path of your CSS file.

The file path can be specified in different ways:

Relative path: If the CSS file is located in the same directory as the HTML file, you can simply specify the file name (e.g., "styles.css"). If the CSS file is in a subdirectory, you need to include the directory path (e.g., "css/styles.css").
Absolute path: You can specify the complete URL of the CSS file, including the domain name (e.g., "https://example.com/css/styles.css"). This is useful when linking to a style sheet hosted on a different domain.

It's important to make sure that the file path is correct, otherwise the styles won't be applied to your HTML document.

By linking an external style sheet, you can keep your styles separate from your HTML content, making your code more maintainable and reusable. You can link the same style sheet to multiple HTML pages, ensuring a consistent look and feel throughout your website.