HTML Academy
Summary of “CSS fundamentals”
CSS essentials17/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
List of tasks
  • Sign up
  • Log in

Register to take up challenges

Registration will only take a minute and let you save your study progress. You can register with your email and password or login via social networks.

or
Log in and continue
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test: Travel gallery. Appearance</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Travel gallery</h1> <p> The excuse <q>I have no paws</q> does not work anymore.<br> Travel with <a href="https://cats-travel.com">our agency</a>. Meow. </p> <div class="gallery"> <img src="files/greece.jpg" width="140" height="200" alt="Greece"> <img class="new" src="files/japan.jpg" width="150" height="170" alt="Japan"> <img src="files/turkey.jpg" width="170" height="130" alt="Turkey"> </div> </body> </html>
CSS
body { width: 550px; margin: 0; padding: 0 10px; font-family: "Arial", sans-serif; font-size: 16px; line-height: 20px; } h1 { font-size: 26px; } p { width: 550px; padding: 15px 20px; color: black; } selector { border: 5px solid orange; } selector { margin-right: 10px; vertical-align: top; border-radius: 20px; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

100%
  • Goal
  • Result
  • Overlay
  • Differences
  • ?

Press Compare to send your code for review.

Failed to load the goal. Try later.

Goal — the interface you need to get.

Result — the way the server sees your code. Can differ from what you see in the mini-browser. The comparison is made between this result and the goal.

Overlay — semi-transparent result is shown above the goal.

Differences — the map of differences between the goal and the result.

Done 0%.
The code has been changed

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

VISAMastercard