0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>You have finished filling the blog with content. Now it’s time to design it. In order to do this, we need to learn more about CSS.</p>
1
<p>You have finished filling the blog with content. Now it’s time to design it. In order to do this, we need to learn more about CSS.</p>
2
<p>CSS is the language that we use to apply a visual design to structured documents, such as HTML documents. CSS syntax is straightforward: it’s a flat list of CSS rules. A CSS rule consists of a selector and a list of properties and their values:</p>
2
<p>CSS is the language that we use to apply a visual design to structured documents, such as HTML documents. CSS syntax is straightforward: it’s a flat list of CSS rules. A CSS rule consists of a selector and a list of properties and their values:</p>
3
selector { property: value; property: value; }<p>Comments are also supported in CSS as well. In order to leave a comment, you use the characters /* and */. Here is an example of a CSS rule from the first chapter:</p>
3
selector { property: value; property: value; }<p>Comments are also supported in CSS as well. In order to leave a comment, you use the characters /* and */. Here is an example of a CSS rule from the first chapter:</p>
4
.feature-kitten { padding-top: 60px; /* Top padding */ background-image: url("img/bottle.svg"); /* Background image */ }<p>Let’s start with the design of the navigation block. For now, just comment out the CSS rule and see what changes.</p>
4
.feature-kitten { padding-top: 60px; /* Top padding */ background-image: url("img/bottle.svg"); /* Background image */ }<p>Let’s start with the design of the navigation block. For now, just comment out the CSS rule and see what changes.</p>
5
<p>We call CSS rules “flat”, because they cannot have other rules nested inside them. Perhaps this feature will be added to new versions of the language.</p>
5
<p>We call CSS rules “flat”, because they cannot have other rules nested inside them. Perhaps this feature will be added to new versions of the language.</p>
6
<p>In addition to CSS rules (rule sets), the language also features so-called “at rules”. They begin with the character @, such as, for example, @font-face. “At rules” are also called CSS directives. These do have CSS rules inside them.</p>
6
<p>In addition to CSS rules (rule sets), the language also features so-called “at rules”. They begin with the character @, such as, for example, @font-face. “At rules” are also called CSS directives. These do have CSS rules inside them.</p>
7
<p>We do not need CSS directives in order to complete our current assignments. However, we will definitely learn more about them later.</p>
7
<p>We do not need CSS directives in order to complete our current assignments. However, we will definitely learn more about them later.</p>