Theory
Theory
Comments

CSS rules

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.

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:

selector {
  property: value;
  property: value;
}

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:

.feature-kitten {
  padding-top: 60px;                        /* Top padding */
  background-image: url("img/bottle.svg");  /* Background image */
}

Let’s start with the design of the navigation block. For now, just comment out the CSS rule and see what changes.

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.

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.

We do not need CSS directives in order to complete our current assignments. However, we will definitely learn more about them later.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>The website of a beginning coder</h1> </header> <main> <img src="img/raccoon.svg" width="80" height="80" alt="Avatar"> <nav> <h2>Recent Posts</h2> <ul> <li><a href="day-1.html">Day One. How I forgot to feed the cat</a></li> <li><a href="day-2.html">Day Two. I want to become a coder</a></li> <li><a href="day-3.html">Day Three. My cat is offended at me</a></li> <li><a href="day-4.html">Day Four. How I almost got sick</a></li> <li><a href="day-5.html">Day Five. I am relaxing</a></li> <li><a href="day-6.html">Day Six. How I failed to understand anything</a></li> <li><a href="day-7.html">Day Seven. Muffin gave me an assignment</a></li> <li><a href="day-8.html">Day Eight. It’s getting very serious</a></li> <li><a href="day-9.html">Day Nine. Or more precisely night</a></li> <li><a href="day-10.html">Day Ten. Summing up</a></li> <li><a href="day-11.html">Day Eleven. Everything should be taken in moderation</a></li> <li><a href="day-12.html">Day Twelve. Everyone loves cookies</a></li> <li><a href="day-13.html">Day Thirteen. I found an article</a></li> <li><a href="day-14.html">Day Fourteen. A New Format</a></li> <li><a href="day-15.html">Day Fifteen. The Selfie Gallery</a></li> </ul> </nav> <section> <p>Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found <a href="https://htmlacademy.org/courses">interactive courses in HTML and CSS</a> and I have set myself the goal of becoming one. I even was assigned an instructor, Muffin, who does not allow me to slack off and will track my progress.</p> <p>My first assignment is to keep a diary and honestly write about all of my accomplishments.</p> </section> <section> Skills section </section> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } /* Uncomment the rule below */ /* nav { margin-bottom: 30px; background-color: #4470c4; } */ ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

Goalscompleted

Uncomment the rule for the nav tag in the CSS editor by deleting the /* and */ characters.

CSS rules

Comments

Log in

Sign up

Restore access