Skip to content

day02-creating-internal-and-external-css-files.md

Latest commit

 

History

History
89 lines (62 loc) · 3.92 KB

day02-creating-internal-and-external-css-files.md

File metadata and controls

89 lines (62 loc) · 3.92 KB
Raw

Creating Internal and External CSS Files

In the world of character-driven code organization, creating and utilizing external and internal CSS files allows us to separate the styles from the content, resulting in cleaner, more maintainable code. By externalizing CSS styles, we can easily apply consistent design elements to multiple HTML pages and promote reusability within our character-driven narratives. In this material, we will explore the process of creating internal and external CSS files and their significance in crafting captivating web experiences.

Internal CSS

Internal CSS refers to CSS styles defined within the <style> tags in the <head> section of an HTML document. This approach allows us to apply styles to multiple elements within the same document.

To create an internal CSS file, follow these steps:

  1. Open an HTML document in a text editor.
  2. Locate the <head> section within the HTML document.
  3. Within the <head> section, add the <style> tags to enclose your CSS code.
  4. Write your CSS rules within the <style> tags.

Here's an example of an internal CSS file:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
      font-size: 24px;
    }
    
    p {
      color: red;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>Welcome to Character-driven Code Organization!</h1>
  <p>This is an example of an HTML paragraph.</p>
</body>
</html>

In the above example, the CSS styles are defined within the <style> tags in the <head> section. The styles are then applied to the <h1> and <p> elements within the <body> section.

External CSS

External CSS involves creating a separate CSS file and linking it to an HTML document using the <link> element. This approach allows for better organization, reuse of styles across multiple pages, and easier maintenance.

To create an external CSS file, follow these steps:

  1. Create a new file with a .css extension (e.g., styles.css) in the same directory as your HTML file.
  2. Open the CSS file in a text editor.
  3. Write your CSS rules in the CSS file.

Here's an example of an external CSS file (styles.css):

h1 {
  color: blue;
  font-size: 24px;
}

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

To link the external CSS file to an HTML document, add the following line within the <head> section of your HTML file:

<link rel="stylesheet" href="styles.css">

In the above example, the HTML document links to the styles.css file using the <link> element. This allows the styles defined in styles.css to be applied to the HTML document.

Benefits of External and Internal CSS Files

Utilizing external and internal CSS files offer several benefits:

  • Code Reusability: External CSS files can be linked to multiple HTML pages, allowing us to maintain consistent styles across the entire website or narrative.

  • Code Organization: Separating the styles from the HTML content improves code organization and maintainability. It also makes it easier to update and modify styles without modifying the HTML structure.

  • Ease of Maintenance: With external CSS files, making changes to the styles can be done in a single place, propagating those changes to all linked HTML pages. This saves time and effort when updating the design elements of our character-driven narratives.

Conclusion

Creating internal and external CSS files is an essential part of character-driven code organization. By separating the styles from the content, we promote reusability, code organization, and ease of maintenance. Internal CSS styles are defined within the <style> tags in the <head> section of an HTML document, while external CSS styles are written in separate CSS files and linked to HTML documents using the <link> element.

Now that you understand the process of creating internal and external CSS files, you can embark on crafting visually captivating character-driven narratives with well-organized and maintainable code!