Summary of “CSS fundamentals”

CSS rules

CSS is a language for applying visual design to structured documents, such as HTML documents. The syntax of the language is a list of CSS rules. A CSS rule consists of a selector and a list of properties and their values:

selector {
  property: value;
  property: value;
}

The characters /* and */ are used in CSS for leaving comments.

Selectors

The selector can be found at the beginning of the CSS rule before the curly braces, and it determines which HTML elements are formatted using the properties and values from the rule.

.feature-kitten {
  padding-top: 60px;
}

The simplest (and most popular) selectors are the tag and class selectors. Tag selectors are a tag name with no < and > characters and are applied to all matching tags. Class selectors start with a period followed by the class name, and they are applied to all tags with the matching class attribute.

h1 { color: red; }
.info { color: blue; }

There can be several of the same element on a page, and the styles will be applied to all instances of that element, including ones that we don’t want to change. In order to avoid such situations, it would be best for us not to use tag selectors or to use them as rarely as possible.

If the CSS rules differ only by their selectors, but they share the same properties and values, then they can be grouped together, separated by commas.

You can also combine any selector types by listing them with a space between them. These selectors are called descendant or contextual selectors, and we read them from right to left. For example:

nav a {…}
  .menu ul {…}
  .post .title {…}

Properties and values

The list of properties and values can be found inside the curly braces of the CSS rule. The property determines which appearance characteristic we want to change, and the value determines how it is changed.

.feature-kitten {
  padding-top: 60px;
}

Every time we add a new property or change its value, we change something on the page.

Inheritance

CSS inheritance is the mechanism by which some property values pass from a parent element to its child elements. Inheritable property values pass to an element’s children (nested elements), unless those children have their own declared values.

Shorthand properties

CSS has longhand properties that control individual style settings and shorthand properties that set several related values at once. For example, font sets the font family, size, line height, and other font properties.

font: 16px/26px "Arial", sans-serif;

If a longhand value is omitted from a shorthand, the browser resets that property to its initial value.

Types of values: Absolute and relative

Absolute units have fixed relationships to one another. On screens, their size is usually based on the CSS reference pixel, so a CSS centimeter may not match a centimeter measured with a ruler. Pixels, px, are the most commonly used. The other absolute units of measurement are almost never used. Examples of absolute units of measurement:

font-size: 1cm;
font-size: 10mm;
font-size: 38px;

Relative values depend on other measurements. For example, a percentage width is calculated from the containing block’s width, while a width in em depends on the element’s font size. em, rem, vh, and vw are relative units; percentage values are relative too.

Default styles

If you do not write a rule to style an element, it will still be assigned some sort of styling. For example, the <ul> list has margins and markers. These styles are called default styles, and they are initially set by the browser’s internal stylesheet. They can be overridden or reset by setting different property values for the element.

The cascade

When the browser renders the page, it must determine the final appearance of each HTML element. To do this, it collects the CSS rules that apply to each element, because several rules can affect an element at the same time. The mechanism that is used to combine styles from different sources into a final set of properties and values for each tag is called the cascade. For example, we have the following element in the markup:

<p class="beloved-color">Green is my favorite color</p>

Assigned styles:

.beloved-color { color: green; }

Browser default styles:

margin: 1em 0;

Final styles:

color: green;
margin: 1em 0;

Property conflict

Several CSS rules can affect a single element. If the same properties exist with different values in these rules, then a conflict arises. For example:

ul { list-style: disc; }
.blog-navigation ul { list-style: none; }

The browser needs to choose the final value when declarations conflict. For the ordinary rules in these exercises, we can compare three things in order. If one comparison does not decide the result, move to the next:

  1. Compare where the declarations come from. For these ordinary declarations, our author styles take priority over the browser’s default styles.
  2. The specificity of the selectors for CSS rules with conflicting properties is compared. For example, the class selector is more specific than the tag selector.
  3. The property that is located lower in the code wins.

The cascade also works within CSS rules.

Embedded and external styles

Link an external stylesheet with <link>:

<link rel="stylesheet" href="style.css">

Embedding styles in the <style> tag. It is usually placed inside <head>:

<head>
  <style>
    CSS code
  </style>
</head>

Embedding styles in a <style> element can reduce the requests needed to load a page, because the browser does not need to fetch a separate CSS file.

Embedding in the style attribute:

<div style="width: 50%;"></div>

The properties and values that are assigned in this way will be applied to just a single element.

Usually, using this method is considered to be bad practice. However, sometimes in exceptional cases it is more convenient to embed styles in the style attribute than to write out separate CSS rules.


Continue