Different ways to use CSS

Published March 30, 2024 | By Matt

CSS (Cascading Style Sheets) gives you the power to transform the visual appearance of your web pages. From colors and fonts to layout and spacing, CSS offers a range of ways to achieve the look and feel you want. Understanding the different methods of applying CSS is key to efficient and maintainable web development.

1. Inline CSS

What is it? Inline CSS involves adding style rules directly within an HTML element’s style attribute.
Example:
HTML
<p style=”color: red; font-size: 18px;”>This text is red and large.</p>

Pros:
- Quick and convenient for minor, element-specific changes.
Cons:
- Can lead to bloated HTML code.
- More difficult to maintain as styles are scattered across your HTML.

2. Internal CSS

What is it? Internal CSS involves embedding a <style> block within the <head> section of your HTML document.
Example:
HTML
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}
</style>
</head>

Pros:
- Keeps styles organized within the same HTML file.
- Applies styles to all instances of a tag within the document.
Cons:
- Styles are limited to a single HTML page.

3. External CSS

What is it? External CSS uses a separate .css file that is linked to your HTML file using a <link> element within the <head>.
Example (styles.css):
CSS
body {
background-color: lightblue;
}
h1 {
color: navy;
text-align: center;
}

Example (HTML):
HTML
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>

Pros:
- Best for maintainability – changes made in your CSS file update across all linked HTML pages.
- Clean separation of concerns (HTML for structure, CSS for style).
Cons:
- Requires an additional HTTP request (slightly slower initial loading).

When to Choose Which Method

Inline CSS: Use sparingly, mainly for quick testing or truly unique, element-specific styling overrides.
Internal CSS: Good for smaller projects or when styles are specific to a single page.
External CSS: The preferred method for most projects due to its benefits in reusability, organization, and maintainability.

Summing Up

Mastering these CSS methods gives you flexibility and efficiency. As you develop your web projects, consider the trade-offs of each to make the best stylistic choices!