Theory
Theory
Comments

Properties and values

The list of properties and values can be found inside the curly braces of the CSS rule. “Property-value” pairs are separated from each other by a semicolon, and the property is separated from its value by a colon. The property determines which appearance characteristic we want to change, and the value determines how it is changed. Recall the following example again:

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

In the example the padding-top property is assigned the value 60px, whereas the background-image property is assigned the value url("img/bottle.svg"). As a result, this CSS rule assigns a top padding and background image to all elements with the feature-kitten class.

You can set the display parameters for any tag using CSS, such as the width and height, margins, font color and size, background, and so on. Every time we add a new property or change its value, we change something on the page. Let’s try to add a few new properties and see how that changes the blog page.

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 class="avatar" 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; } .avatar { border-radius: 10px; } nav { margin-bottom: 30px; /* Add properties here */ background-color: #4470c4; } nav a { color: #ffffff; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

Goalscompleted

Add the padding property with the value 20px
and then the color property with the value #ffffff to the rule for the nav tag.

Properties and values

Comments

Log in

Sign up

Restore access