Guide to HTML Style: Inline, Internal, and External CSS Techniques

Robert Cooper

Full Stack Developer

With HTML laying the foundation, styling techniques within CSS are what bring your webpages to life. This post explores essential and advanced styling methods so you can build killer websites.

What are inline styles in HTML?

You can directly embed CSS properties into an HTML element using inline styles. This method involves adding the style attribute to an element's start tag, specifying CSS properties and values. Inline styles are best for quick, individual element modifications due to their high specificity and the challenges they pose in maintaining consistency across larger documents.

<p style="color: blue; font-size: 20px;">This text uses inline CSS.</p>

What are internal styles in HTML?

When you need to style multiple elements on a single webpage, internal styles offer a more streamlined approach. You achieve this by including CSS rules within a <style> tag in the HTML document's <head> section. This method simplifies styling elements that share common properties on one page, without influencing the styles of other pages.

<head>
  <style>
    body {
      background-color: lightgray;
    }
    p {
      color: red;
    }
  </style>
</head>

What are external stylesheets in HTML?

External stylesheets are the most scalable approach to styling. This involves linking CSS files to HTML documents through the <link> element in the <head> section. External stylesheets allow for the application of consistent styling across multiple pages. You side looks more cohesive and your code is cleaner.

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

In your styles.css file, you define the CSS rules:

body {
  font-family: Arial, sans-serif;
}
p {
  color: green;
}

By separating presentation styles from HTML content, external stylesheets make websites easier to update and maintain. They let you reuse styles, ensuring a unified appearance and reducing code redundancy.

Invite only

We're building the next generation of data visualization.

Get access