Blog-Archiv

Donnerstag, 6. November 2014

The Shape of Content as CSS

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 ::after pseudo-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:

  1. content is the raw material
  2. 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.



Keine Kommentare:

Kommentar veröffentlichen

Abonnieren Kommentare zum Post (Atom)