CSS Basics

CSS selectors

You may already be familiar with CSS. If this is the case, simply jump to the end of this chapter, and complete the test. If not, then read the rest of this chapter, some repetition doesn’t hurt.

CSS stands for Cascading Style Sheets. The only word worth elaborating on is Cascading. CSS is structured like the steps of a staircase. The different parts of your CSS build on top of each other, and based on their priority, some rules override each other.

Talking about rules, let’s recap what rules are like.

As CSS is cascading, each selector has a specificity. Rules belonging to a more specific selector override rules belonging to the less specific selectors.

Order of selector specificity:

1. id selector
2. class selector
3. tag selector
4. attribute selector

Selectors can also describe parent-child relationships:

ancestor-selector key-selector selects all nodes selected by key-selector, assuming that they are inside a node selected by ancestor-selector.

parent-selector > key-selector selects all nodes selected by key-selector, assuming that they are direct children of a node selected by parent-selector.

Examples:

Block and inline elements

Block-level elements are elements that occupy a whole block in a document by allocating 100% of the width of the container. If the width of a block-level element is smaller, then the rest of the width is left empty. Typical block-level elements are headings (h1 to h6), paragraphs, div elements, and most semantic elements such as:

• article,
• section,
• header,
• footer,
• nav,
• aside,
• main.

Text inside a block-level element can be aligned using the text-align property, and the left, right, center, justify values:

.left {
  text-align: left; 
}

.right {
  text-align: right;
}

.center {
  text-align: center;
}

.justify {
  text-align: justify;
}

If the width of a block is set, the element can be centered by giving it an auto left and right margin:

.center-block {
  margin-left: auto;
  margin-right: auto;
}

Inline elements are elements that typically appear inside a block, just like text. Typical inline elements are images, anchors, text emphasized with the em or strong element, and many more. Inline elements behave just like words in a text do:

• Their width cannot be set,
• They appear next to each other, occupying minimum space.

The common semantic mistake developers make is using non-semantic elements in HTML for styling purposes. The elements <b>, <i>, <u> carry no semantic meaning, and therefore should be omitted. If you want to emphasize that an element carries special importance, use the <strong> or <em> semantic element. The <strong> and <em> elements also make the enclosed text appear in bold and italic respectively.

If an element is to be styled bold, italic, or underlined, but there is no meaning associated with the action, then use CSS to set the styles instead of the <b>, <i>, or <u> elements:

.text {
  font-weight: bold;
  text-decoration: underline;
  font-style: italic;
}