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;
}

CSS also supports comments. To write a comment, enclose it between /* 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 by styling the navigation block. For now, uncomment the CSS rule and see what changes.

In these exercises, we write separate CSS rules. CSS also supports nested rules, but we do not need them here.

CSS also has at-rules, which begin with @, such as @font-face. Different at-rules have different structures; we’ll explore 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 upset with 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 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 was even assigned an instructor, Muffin, who won’t let me slack off and will keep track of 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