The Shape of Content as CSS

Published: 2014-11-06
Updated: 2014-11-17
Web: https://fritzthecat-blog.blogspot.com/2014/11/the-shape-of-content-as-css.html

Cascading Style Sheets have been made to separate the content from its look. Form and meaning, what a subject. Can we separate it?

Modern HTML movements try it: at least the <center> <font> <tt> <big> tags are deprecated since HTML 5. So just the <b> <i> <u> are remaining ... or were there others that are more style- than content-related?

What about <h1>, is this style or content? When it is not style, could we accept a title that is below the chapter?
What about the CSS ::before and ::afterpseudo-elements with the content property that lets define text not being in HTML?

Lets say we can't really separate it. But it is nice to be able to present some content in different ways. I would say:

content is the raw material
style enriches it to be clear and well readable

Content is the model, style is the view, presenter is a web-browser. The ubiquitous MVP concept.
The following is about how you could find out why your CSS does not work, and why it is called "Cascading" Style Sheet.

The Nearer The Stronger

When your CSS doesn't work, it is most likely that it is in a file.css, imported by a link tag, and was overridden by an inline style.

Low priority: External CSS, imported into the HTML by a link tag
Medium priority: Internal CSS within a <style> element in head
High priority: Inline CSS directly in the style attribute of an element

external.css

div {
  background-color: green;
}

example.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="external.css" />  <!-- external CSS -->

    <style>
      div {
        background-color; red;
      }
    </style>  <!-- internal CSS -->
  </head>

  <body>
    <div style="background-color: azure;">Will I be azure?</div>  <!-- inline CSS -->
  </body>
</html>

Yes, it will be azure, because the inline style is the strongest. Wouldn't it be there the element was red, and without the internal style in head it would be green.

But there is more about it:

Low priority: Browser CSS, basic defaults like white background and black letters
Medium priority: User CSS, for example the browser-user can define a default background color for all pages he/she visits
High priority: Author CSS, that is what is in the HTML (external, internal, inline)

Specificity, Cascade

That's still not all. To give the different cascade levels a chance to prevail, a directive exists named

!important

For example

div {
  background-color: azure !important;
}

And so we must specify the priority more precisely:

Lowest priority: Browser CSS
Low priority: User CSS
Medium priority: Author CSS
High priority: Author CSS with !important
Highest priority: User CSS with !important

This is standardized by the w3c as "Cascade". And if you go to 6.4.3 you find an algorithm how the priority is calculated. This is called "Specificity". Roughly spoken:

Low: the selector with more element types wins: ul li is stronger than li
Medium: the selector with more attributes and .classes wins: .me.you is stronger than .me
High: the selector with more #id references wins: #myid #yourid is stronger than #yourid

Mind that !important is so strong that a low-specific external important declaration will overrule both internal high-specific CSS and inline CSS!

Need more complexity :-?

For me it's too much. I use the browser's debugger, there you find a list of CSS properties per HTML element, from where they come, and even from where they were overridden. Open the debugger (mostly using F12), click on the pointer-button, then click on the HTML element you are interested in, and the DOM view will show you everything.

Guess or Know

Finally something to think about: how will this look?

<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css">
      span {
        color: blue;
      }
      .green {
        color: green;
      }
      .red {  /* Less specific loses */
        color: red;
      }
      .green.red {  /* More specific, but the first loses, ... */
        color: yellow;
      }
      .red.green {  /* ... and the last wins! */
        color: brown;
      }
    </style>
  </head>
 
  <body>
    <span>Zero,</span>
    <span class="green">one,</span>
    <span class="red">two,</span>
    <span class="green red">three,</span>
    <span class="red green">four!</span>
  </body>
</html>

Click HERE for solution.

Solution: .green.red and .red.green are considered to be equal, so the first is overwritten.

Zero, one, two, three, four!

ɔ⃝ Fritz Ritzberger, 2014-11-06