HTML Academy
Shorthand properties
CSS essentials8/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
Tag and class selectors
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Types of values: Absolute and relative

Let’s make our avatar more fashionable. In other words, let’s make it round. We can increase the border-radius value to half of the size of the avatar image, in other words, to 40px, and we will get a circle. But if later we decide to create a new avatar with some other dimensions, then we will again have to change styles. But is there a different way to immediately and universally apply our changes? Yes, there is! By using percentages:

border-radius: 50%;

If we determine a rounding radius as a percentage, then it will be calculated relative to the dimensions of the element, and it will change together with these dimensions. If we set this radius in pixels, then it will always absolutely remain the same. This is why units of measurement in CSS are divided into absolute and relative.

Absolute units of measurement are tied to real physical dimensions, and they are connected to each other by rigid proportions. Examples of absolute units of measurement:

font-size: 1cm;  /* 1 cm  */
font-size: 10mm; /* 1 cm contains 10 mm */
font-size: 38px; /* 1 cm contains about 38 pixels */

Pixels, px, are the most commonly used. The other absolute units of measurement are almost never used.

Relative units of measurement describe values that depend on other values. For example, the width of an element that is defined as a percentage depends on the width of the parent element, and the width of an element determined in em depends on the font size of the element itself.

The units em, rem, vh, vw, and several others are relative, and certain others are understood to be percentages. Each of these units solves its own assigned set of tasks. For example, percentages are used to create a flexible layout, and em is used to lay out government websites with special additional requirements for text scaling.

A list of all of the absolute units of measurement and the relationships between them are provided in the specification. In addition, the specification includes a list of all of the relative units of measurement and a description of the calculation rules.

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> <!-- Change the width of the image below --> <img class="avatar" src="img/raccoon.svg" width="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: 16px; line-height: 26px; font-family: "Arial", sans-serif; color: #222222; background: #ffffff url("img/bg-page.png") no-repeat top center; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } /* Change the value in the rule below */ .avatar { border-radius: 10px; } nav { margin-bottom: 30px; padding: 20px; background-color: #4470c4; border: 5px solid #2d508f; 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. Change the border-radius value to 40px in the .avatar rule,
    2. then in the markup for the .avatar image change the value of the width attribute to 160.
    3. Again change the border-radius value to 50% for .avatar,
    4. and then restore the original width 80 for the image in the markup.

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

    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.