Book Reviews

Jump Start CSS

What is CSS?

Web pages are built on content. Content is what you see when you visit a page. It might include text, photos, graphics, and video. Content is stored using a language called Hyper Text Markup Language (HTML).

Cascading Style Sheets (CSS) is a separate but complementary language to HTML. CSS is what we use to apply styles to the content on our web page.

How to include CSS in a web page?

CSS can be inserted into a web page in four different ways: 1) using inline styles, 2) using the <style> element, 3) using @import inside a <style> element, and 4) using the <link> element.

The @import method has been known to cause some problems - for example, multiple CSS files loaded via @import will often take longer to download - so, the best to include CSS in a web page is by means of the <link> element.

CSS selectors

  1. * is a universal selector. It works like a wildcard character, selecting all elements on a page.
  2. Element type selector must match one or more HTML elements of the same name. Thus, a selector of nav would match all HTML <nav> elements.
  3. An ID selector is declared using a hash (#) preceding a string of characters. This selector matches any HTML element that has an ID attribute with the same value as that of the selector, but minus the hash symbol.
  4. The class selector is the most useful one. It is declared with a dot preceding a string. It matches all elements that have their class attribute set to the same value as the class, minus the dot.
  5. The descendant selector or, more accurately, the descendant combinator lets you combine two or more selectors so you can be more specific in your selection method.
  6. Child combinator is similar to descendant combinator except it only targets immediate child elements. Instead of a space character, it uses the greater than symbol (>).
  7. General sibling combinator selects elements base on sibling relationships. It is declared using the tilde character (~).
  8. Adjacent sibling combinator uses the plus symbol (+) and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling.
  9. Attribute selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets. input[type="text"] { background-color: #444; }
  10. Pseudo-class uses a colon character to identify a pseudo-state that an element might be in - for example, the state of being hovered. a:hover { color: red; }
  11. Finally, CSS has a selector referred to as a pseudo-element and, used appropriately, it can be very useful. .container:before { content: ""; display: block; }

The cascade and specificity

Usually, when a browser interprets a CSS document, it does so from top to bottom, giving precedence to the declarations that appear lower down in the document. Unfortunately, different selectors have different levels of specificity. Look at the following example:

div p {
  color: blue;
}

p {
  color: red;
}

If all the <p> elements on a web page were nested inside a <div>, the first rule set would always apply, overriding any of the same styles defined in the second rule set. This is because the descendant selector takes precedence over the element type selector.

Although the browser does give some importance to the order of rule sets, that order is superseded by the specificity.

In order to avoid being tripped up by specificity, use the class selector widely and learn what's referred to as "Object Oriented CSS" or "modular CSS".

References

  1. The sample project
  2. Don't use @import
  3. About normalize.css
  4. A new micro clearfix hack