Previous
Written by: rJTutorial Team | Last Updated:

HTML Style

Styling is what transforms a plain HTML document into a visually engaging user interface. In web development, we use CSS (Cascading Style Sheets) to control everything from colors and fonts to layout and spacing. There are three primary ways to integrate styles into your HTML, and choosing the right one depends on the scope and complexity of your project.

In HTML, you can apply styles to your elements using either inline styles, internal stylesheets, or external stylesheets. Here's a brief overview of each method:

Inline Styles: Inline styles are applied directly to individual HTML elements using the style attribute. This method is useful for applying specific styles to a single element, especially when you need a quick fix or a unique style that won't be reused elsewhere.

Here's an example:

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

In this example, the color and font-size styles are applied directly to the <p> element using inline styles. While easy to write, they can make your HTML code cluttered and difficult to manage as your project grows.

Developer Tip: Inline styles are excellent for testing a quick visual change in the browser or for applying dynamic styles through JavaScript, but they should generally be avoided for production-level styling.
Common Mistake: Relying too heavily on inline styles. If you decide to change your site's brand color from blue to green later, you would have to manually find and update every single element if you used inline styles.

Internal Stylesheet: Internal stylesheets are defined within the <style> element in the <head> section of your HTML document. This method is useful for applying styles to multiple elements within the same HTML document without needing an external file.

Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Internal Stylesheet Example</title>
 <style>
   body {
     font-family: Arial, sans-serif;
     line-height: 1.6;
   }
   h1 {
     color: blue;
   }
   .highlight {
     background-color: yellow;
     padding: 5px;
     border-radius: 4px;
   }
 </style>
</head>
<body>
 <h1>Welcome to my website</h1>
 <p class="highlight">This paragraph has a yellow background.</p>
 <p>This paragraph has the default font family and line height.</p>
</body>
</html>

In this example, styles for the <body>, <h1>, and .highlight class are defined within the <style> element. This keeps your design separate from the content within that specific page.

Best Practice: Use internal stylesheets for single-page projects or standalone landing pages where you want to minimize the number of files the browser needs to download.

External Stylesheet: External stylesheets are created in separate CSS files (with a .css extension) and linked to the HTML document using the <link> element in the <head> section. This is the industry-standard method for applying styles across multiple HTML documents, ensuring a consistent look and feel throughout a website.

Here's an example: styles.css

body {
 font-family: Arial, sans-serif;
 color: #333;
}
h1 {
 color: blue;
}
.highlight {
 background-color: yellow;
 font-weight: bold;
}

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>External Stylesheet Example</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <h1>Welcome to my website</h1>
 <p class="highlight">This paragraph has a yellow background.</p>
 <p>This paragraph has the default font family.</p>
</body>
</html>

In this example, the styles are defined in an external CSS file named styles.css, and it's linked to the HTML document using <link rel="stylesheet" href="styles.css">. This allows you to change the entire look of a 100-page website just by editing one file.

Watch Out: When using external stylesheets, make sure the href path is correct. If your CSS file is in a folder named "css", your link should look like href="css/styles.css". If the path is wrong, your page will load without any styling!
Best Practice: Always use external stylesheets for professional web projects. This follows the "Separation of Concerns" principle, making your code easier to maintain, faster to load (thanks to browser caching), and much more organized.

Each of these methods has its advantages depending on the complexity and scope of your styling needs. As you grow as a developer, you will likely find that external stylesheets become your go-to tool for nearly every project.

Previous