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 the property values of a parent element are transmitted to its children elements. Some styles that are assigned to a single element are inherited by all of its children (nested elements), but only if they are not explicitly redefined somewhere else.

Composite properties

There are normal properties in the CSS that control a single display parameter, and there are composite properties that control several parameters simultaneously. For example, font property. It assigns six parameters at once: font size and name, line height, and some others.

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

If the value for the normal property was not specified in the composite property, then the browser uses the original value of this property during the decoding process.

Types of values: Absolute and relative

Absolute units of measurement are tied to real physical dimensions, and they are connected to each other by rigid proportions. 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 units of measurement describe values that depend on other values. For example, the width element depends on the percentage width of the parent element, and the width element in em depends on the font size of the element itself. The units em, rem, vh, vw, and several others are relative, and certain others are understood to be percentages.

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 all of the CSS rules that apply to each element, because, several CSS rules can affect the 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 somehow decide what the final values of the conflicting properties will be. The conflict is resolved in a maximum of three steps. If the conflict cannot be resolved in the current step, then the process moves to the next step. Here are the steps:

  1. The priority levels of the style files that contain conflicting properties are compared. For example, custom styles (that is, the ones we created) are given priority over browser ones.
  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.

Embedding and invoking external styles

External styles are invoked via the tag <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>

This method is used to optimize page loading times as the browser will not have to send additional requests to the server for the 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