Basic CSS: Inline, Embedded, External: What’s The Difference?

The cascade respects three kinds of styling implementation. What are they, and how do they differ?

What came before: In the previous exploration, we attempted to explain what the “cascading” in CSS meant, and why it was important to be aware of it. This time, we’ll explore the three main types of web page style sheet implementation; inline styles, embedded, and external.

Figure 1: Our test subject; Not just another pretty face

Whether or not one chooses to style a web page with CSS, or uses styles within the HTML document, since each method is given priority over another it’s important to be aware of them and how they are implemented. To demonstrate we’ll show how we produced the illustrate browser output; a bare-bones HTML file with just three displayed elements, namely, an H1 header styled in default text at 150% of the browser’s default, an H2 header in default text at 130% of the browser’s default, and a paragraph (p) styled at 100% of the browser default.

The example, by the way, was copied from and inspired by an example in the CSS tutorial at W3Schools.com, which is an excellent free place to acquire a basic skill set in CSS as well as other technical web skills–check them out!

Figure 2:The basic, down and dirty, bare bones, just-the-facts-ma’am HTML code that will produce a default display.

Inline Styles

The most basic styling, called inline, should be familiar to anyone who knows basic HTML markup.

Every tag, from headings to paragraphs and beyond, can be individually styled by specifying attributes withing the tag itself. The styling attributes are simply placed after the tag selector (in our example, the selector is either the “h1″, “h2″, or “p” parts of the tags) and before the closing angle of the beginning tag. Figure 3 illustrates.

Figure 3: The bare-bones HTML with inline styling for the h1, h2, and p tags.

The advantage of inline styles is that they are reasonably quick to code and allow for customization on the individual element level, and they have the highest priority in the cascade. The disadvantage of them, however, and the reason that they are inappropriate for use beyond all but the simples HTML implementation is that they apply only to the tag in which they are found. Only those h1, h2, and p tags shown in Figure 3 will be styled as specified. If we later expanded this HTML code and added another paragraph, we’d have to remember to include the text-size inline, or it would be styled at browser default. Inline tags do not inherit.

Embedded Styles

Embedding is, in effect, taking the all the styles one will be using in the page and consolidating them in a single block at the top of the page. The browser is made aware of the embedded style coding by finding the <style type="text/css">...</style> tags in the head block of the file. All information between those two tags are interpreted as styling information. In Figure 4, we take the style information out of the tags and put them into an embedded style sheet in the head block:

Figure 4: in the embedded style sheet above (found between the style tags in the head block) all styles used in the document have been consolidated into a single place.

The benefits of embedded over inline should be apparent. Each tag selector in the body of the HTML refers to a style rule defined in the style sheet, and if we later expanded the document by adding more headers or paragraphs, those new headers and paragraphs would automatically take on the style attributes assigned without having to add the information to every tag. This has the additional benefit of centralizing style administration; if one wanted to globally make a change to the paragraph style of the web document, there is only one place one needs to go.

If we wanted to custom-style in individual paragraph or header, we could still use an inline style to override the embedded style, of course, though if we want to maintain a unified design scheme across our presentation it’s not recommended.

External Style Sheets

The last and most advanced method of styling HTML is actually breaking the style code out of the HTML, placing it in a separate file all its own. The HTML refers to the file it is directed to by the <link> tag in the head block.

While it sounds a little tricky, it is actually all straightforward. All that’s needed to do here is to cut the embedded style sheet out of our file and create a plain text file containing just the styling information. assuming we’ve named our CSS file “style.css” and included it in the same folder as our HTML file, reference information is included in the header, thus:

Figure 5: The link tag in the head block points to a text file containing the style rules we’ve already defined. (click on it to see it closeup)

Essentially what the link tag is saying here is that we are linking to a stylesheet, that it can be found in the same folder as our HTML and it’s called “style.css”, that it is in fact a CSS, and that it is formatting the page for screen display. The only things in the CSS file are the three lines formerly found between the style tags in our embedded example.

The benefits of this are also apparent. Though it may be overkill for our tiny example, now not only will all h1, h2, and p tags in our current HTML file automatically inherit formatting from the external “styles.css” file without having to add any coding to our HTML file whatsoever. Not only that, but any other HTML file we refer to this CSS file with will also take on the formatting we’ve already defined for the h1, h2, and p tags.

Using external CSS for larger web page constellations is like having a central control panel for styling for an entire site that uses that CSS as its style reference. The increased efficiency and simplified ability to alter styles site wide should be evident–and extremely important to any designer who wants a quick way to keep a site’s design unified.

The Big Three

In this exploration we’ve seen that there are three basic important ways for implementing CSS in our HTML, and, moreover, we’ve gotten a good idea of what each one does as opposed to the other. By understanding the scope of the three types we can better understand just when one should be used over the other; and in the end, we find that external CSS is the best way to go when we find ourselves designing sites with many pages.