What is CSS?

by Richard Hunter

HTML

<div class="foo bar"> hello </div>

<p>
  What's the difference between a &lt;div&gt; and a &lt;span&gt; ? You might say that a <i>span</i> is inline level whilst a <i>div</i> is block level. However, with CSS you can easily change this with the <i>display</i> property.

</p>
<p>That a component has the root element <i>div</i> tells us almost nothing about it and how it is different from another component that also is contained in a <i>div</i> element.
</p>
<p>The elements that we choose to use have little bearing on the functional behaviour of our app itself. They are more like a form of meta-data for processes that parse our page, such as Google spiders that read our page so us to give it an SEO ranking.</p>
<p>html element names are not a useful way to identify an element within an app. What are useful are class names</p>
<p>With class names, we can define our own nomenclature that is appropriate to our application</p>

<p><i>class</i> in web development is an overloaded concept. It can mean different things in different contexts:
</p>
<ul>
  <li>A <i>tag</i> for referencing an element within an HTML document</li>
  <li>
    A set of CSS property values (a 'rule-set' in CSS terminology) that can be applied to an element.
  </li>


</ul>
<p>
  When we assign a class to an HTML element we are providing a way for identifying that element so that it can be targeted both by Javascript and by CSS. Significantly, an element can have multiple classes and multiple elements can share the same class.
  Whilst this gives us flexibility, it does produce problems.
</p>
<p>If an element has multiple classes, which is the canonical one? If, for example, we are assigning multiple classes to an element so as to associate several rule-sets to it, when we write a script which targets this class, which class should we use that
  we can be sure is not going change? In other words, which class is actually used to identify the element as opposed to simply being a hook for styling?...

CSS

.bar {
  background: green;
  padding-left: 200px;
}

.foo {
  border: solid 1px red;
  padding-left: 10px;
}