Inserting CSS

Welcome back! In this section, we'll dive into the world of CSS and explore the different ways to insert CSS into your HTML documents. CSS, or Cascading Style Sheets, is a powerful tool that allows you to style and design your web pages. By inserting CSS, you can transform the appearance, layout, and behavior of your HTML content, making it visually appealing and user-friendly. Let's begin!

External CSS

One common approach to inserting CSS is by using external stylesheets. External stylesheets offer several advantages, including reusability and easier maintenance. With external CSS, you can define styles in a separate file and apply them to multiple HTML documents.

Creating an External Stylesheet

To create an external stylesheet, follow these steps:

Open your code editor. You can use any text editor or a specialized code editor like Visual Studio Code or Sublime Text.
Create a new file. In your code editor, go to the "File" menu and select "New File" or use the appropriate keyboard shortcut (e.g., Ctrl+N or Cmd+N).
Save the file with a .css extension. When saving the file, make sure to give it a descriptive name (e.g., "styles.css" or "main.css") and include the .css extension at the end. This extension indicates that it's a CSS file.

Write your CSS rules. Inside the newly created CSS file, you can start writing your CSS rules. Each rule consists of a selector and a set of declarations enclosed in curly braces. Here's an example:


h1 {
  color: blue;
  text-align: center;
}

Save and close the file. Once you've written your CSS rules, save the file and close it. It's now ready to be linked to your HTML document.

Linking External Stylesheet

Now that you've created your external stylesheet, it's time to link it to your HTML document. Here's how you do it:


<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <!-- Your HTML content here -->
  </body>
</html>

In the code above, the link element establishes the connection between your HTML document and the external stylesheet. The rel="stylesheet" attribute specifies that the linked file is a stylesheet, type="text/css" indicates the MIME type, and href="styles.css" provides the path to your CSS file.

You can also watch this video and learn how to create and link your CSS file

Advantages of External Stylesheets

Reusability: External stylesheets can be linked to multiple HTML documents, allowing you to apply consistent styles across your entire website. This promotes code reuse and reduces redundancy.
Maintenance: Changes made to the external stylesheet will automatically reflect in all linked HTML documents. This makes it easier to update and maintain your styles, especially when dealing with large projects.
Separation of Concerns: By separating content (HTML) from presentation (CSS), external stylesheets improve code organization and make collaboration with other developers smoother.

Internal CSS

Internal CSS involves embedding styles directly within your HTML document. This approach is useful for styles specific to a particular page or when you want to keep your styles self-contained.

Using the `style` Attribute

You can apply internal styles to individual HTML elements using the style attribute. This allows you to customize the appearance of specific elements without affecting others. Here's an example:


<h1 style="color: blue; text-align: center;">My Heading</h1>

In the code above, the style attribute contains CSS property-value pairs separated by semicolons. The color property sets the text color to blue, and text-align: center centers the heading text.

Using the <style> Element

Another way to use internal CSS is by including a style element within the <head> section of your HTML document. This allows you to define styles that apply to multiple elements on the same page. Here's an example:


<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;

      h1 {
        color: green;
      }
    </style>
  </head>
  <body>
    <!-- Your HTML content here -->
  </body>
</html>

In this example, the styles defined within the style element will apply to the specified HTML elements on the page. You can include multiple style rules within the style element to style different elements.

Inline CSS

Inline CSS involves applying styles directly to individual HTML elements using the style attribute. This approach is useful for one-off styles or when you need to override specific styles for a particular element. Here's an example:


<h1 style="color: red; font-size: 24px;">My Heading</h1>

In this code snippet, the style attribute contains CSS properties and their values, directly modifying the appearance of the h1 element. The text color is set to red, and the font size is increased to 24 pixels.

Advantages and Disadvantages of Inline CSS

Advantage: Inline CSS allows for highly specific styling of individual elements. It can be useful when you need to apply unique styles to a single element.
Disadvantage: Excessive use of inline styles can make your HTML code harder to read and maintain. It's generally recommended to use external or internal stylesheets for more organized and manageable code.

Practice Time!

Now it's time to apply what you've learned! Open your code editor and create a new HTML file. Let's experiment with different ways of inserting CSS:

Create an external stylesheet named "styles.css" and link it to your HTML document using the link element. Define styles for headings (h1 to h6) to change their color, font-size, and text alignment.
In your HTML document, create different heading levels (h1to h6) and apply the styles from the external stylesheet. Observe how the styles are applied consistently across the headings.
Now, add some internal CSS using the style element within the <head> section. Define styles for paragraphs (p) to change their font-family, line-height, and text-indent.
Experiment with inline CSS by applying styles directly to specific elements using the style attribute. Try overriding the styles defined in the external stylesheet and observe the changes.
Finally, play around with different values and properties to see how they affect the appearance of your HTML content. Feel free to explore and be creative!
One last thing, don't panic or get confused by those CSS properties yet. We will cover each property in its separate lesson. Just try your best to master how to insert and create rules.

Remember, practice makes perfect! The more you experiment and play with CSS, the better you'll become at styling your web pages.