HTML Academy
Inheritable properties
CSS essentials6/17
Back to the list of tasks
  • 1. CSS rules
  • 2. Selectors
  • 3. Properties and values
  • 4. Inheritance
  • 5. Inheritable properties
  • 6. Non-inheritable properties
  • 7. Shorthand properties
  • 8. Types of values: Absolute and relative
  • 9. Tag and class selectors
  • 10. Nested selectors
  • 11. Default styles
  • 12. Cascade
  • 13. Property conflict
  • 14. Multiple classes
  • 15. Embedded styles and the style attribute
  • 16. Summary of “CSS fundamentals”
  • 17. Test: Travel gallery. Appearance
Shorthand properties
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Non-inheritable properties

In the previous assignment, we listed the main properties that inherit by default. Others do not. These include properties for positioning, dimensions, padding, margins, backgrounds, and borders:

background, border, padding, margin, width, height, position, and others.

These properties do not inherit by default because that usually makes more sense. For example, padding on a block should not automatically add padding to every nested element. Each block usually needs its own values for these properties.

Let’s look at what would happen if all of the properties were inherited at once. So, for example, this is how the nav tag would look on the main page if we added a border to it (by using the border property):

Recent Posts

  • Day One. How I forgot to feed the cat
  • Day Two. I want to become a coder
  • Day Three. My cat is upset with me

Now add a border and check that the nested elements do not inherit it.

Comments

  • 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 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: 16px; line-height: 26px; font-family: "Arial", sans-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; padding: 20px; /* Add the property below */ background-color: #4470c4; color: #ffffff; } nav a { color: #ffffff; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Add the border property with the value 5px solid #2d508f to the nav tag.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2026

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.