THREE TYPES OF STYLE – Holly Foster Media

THREE TYPES OF STYLE

If you’ve read any of my blogs on HTML, you’ve learned that HTML is a markup language that is pretty simple to learn. Today I’d like to share with you some basic information on Cascading Style Sheets, or CSS.

CSS helps you to keep the informational content of a document separate from the details of how to display it. The details of how to display the document are known as its style

(Why use CSS?, n.d.)

There are three types of CSS:

  • Inline
  • Internal (or Embedded)
  • External

To demonstrate how each type works I modified one of my existing HTML pages.


Inline

You can change the appearance of a single tag contained in your HTML page by using the style attribute. Here’s an example:

The last sentence in the text block below has the same format as the preceding two paragraphs.

When I add the style attribute within the <p> or paragraph tag, I can apply one, or even multiple styles. In this example I’m applying three: color, font size and alignment.

Now the sentence is blue, smaller, and centered as shown below:


Internal (or Embedded)

Internal CSS affects the entire HTML document. The style tag is placed in the head section rather than on a single tag. Here’s the style tag I used to create my internal CSS.

This code ensures that header tags H1, H2, and H3 throughout this HTML page are displayed as follows:

  • H1 tags are centered and have a one pixel solid border (“Holly Foster”)
  • H2 tags are displayed in all small caps (“BLACK & WHITE”)
  • H3 tags are crimson (“Page Links” & “Beverage Histories”)

Here’s a screenshot of the page using only inline and internal CSS:


External

External CSS is similar to internal CSS, but the file is separate and has a .css extension. This is important when you want to style multiple pages in your website.

Once your file is created, the next step is to link the files together. To do that I add the following under the <head> tag in my HTML source code:

<link rel=”stylesheet” type=”text/css” href=”css/primary.css”>

In this example the CSS file is named “primary” and I placed it in a subfolder named “css.” This code should be added to each HTML page to which you want the styles to apply. To see my final HTML page, use this link.


Hierarchy

One last thing.

“If a CSS rule doesn’t seem to work when it looks like it should and your code appears to be written correctly, or perhaps an element you’re trying to style won’t apply in any browser, your CSS rules are suffering from a CSS specificity conflict.”

Boudreaux, 2013

Be careful when you use CSS. Inline generally trumps internal or external CSS, but it’s not always clear cut. Check out Ryan Boudreaux’s excellent article for more specifics.

until nxt time …

References

Boudreaux, R. (November 6, 2013). CSS specificity hierarchy: What you need to know. Retrieved from TechRepublic: https://www.techrepublic.com/blog/web-designer/css-specificity-hierarchy-what-you-need-to-know/

Types of CSS (Cascading Style Sheet). (2018, August 20). Retrieved from: https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/

Why use CSS? · WebPlatform Docs. (n.d.). Retrieved from: https://webplatform.github.io/docs/tutorials/learning_why_we_use_css/

Written by

Leave a Reply

Your email address will not be published. Required fields are marked *