Understanding inline, internal, and external CSS styles

CSS styles can be used to design your website. You can apply CSS rules to your website’s HTML files using an inline style, internal stylesheet, or external stylesheet. Each of these methods has advantages that suit particular uses.

Let’s take a look at the difference between inline, internal, and external CSS, and then we’ll dive in on how to use each one.

Inline styles relate to a specific HTML tag, using a style attribute with a CSS rule to style a particular page element. They’re useful for quick and permanent changes but are less flexible than external and internal stylesheets, as each inline style you create must be edited separately if you’re making a design change.

An internal stylesheet holds CSS rules for the page in the head section of the HTML file. The rules only apply to that page, but you can configure CSS classes and IDs to style multiple elements in the page code. Again, a single change to the CSS rule will apply to all tagged page elements.

An external stylesheet is a standalone .css file linked from a web page. Using external stylesheets, you can apply rules to multiple web pages. If you ever need to make widespread changes to your website design, a single change in the stylesheet can be applied to all linked pages, saving lots of time and effort.

Using inline styles

Inline styles are applied directly to an element in your HTML code. They use the style attribute, followed by regular CSS properties.

For example:

<h1 style="color:red;margin-left:20px;">Today’s Update</h1>

Using internal CSS stylesheets

Rather than linking an external .css file, HTML files with an internal stylesheet include a set of rules in their head section. CSS rules are wrapped in <style> tags, like this:

<head>
<style type="text/css">

    h1 {
            color:#fff
            margin-left: 20px;
       }

    p {
        font-family: Arial, Helvetica, Sans Serif;     
       }


</style>
</head>

Using external CSS stylesheets

An HTML page styled by an external CSS stylesheet must reference the .css file in the document head. Once you create the CSS file, it must be uploaded to your server and linked in the HTML file with code, for example:

For example:

<link href="style.css" rel="stylesheet" type="text/css">

You can name your stylesheet whatever you wish, but it should have a .css file extension.

If you need help with your HostPapa account, please open a support ticket from your dashboard.

Was this article helpful?