Previous task
Introduction to HTML and CSS2/13
Back to the list of tasks
  1. 1. Let's Go!
  2. 2. CSS in action
  3. 3. Consolidation
  4. 4. HTML basics
  5. 5. Single HTML tags
  6. 6. Attributes of HTML tags
  7. 7. Looking for errors in HTML
  8. 8. Basics of CSS
  9. 9. Other ways to connect CSS
  10. 10. CSS selectors
  11. 11. CSS classes
  12. 12. CSS properties and values
  13. 13. Looking for errors in CSS
Nest task
  • Courses
  • Sign up
  • Log in

Loading...
It will be ready in a few seconds.

  • Theory
  • Theory

CSS in action

In the last assignment, you changed the code in the HTML editor and made sure that the content of the page changed.

In this assignment, you'll work with the CSS editor and see how you can change the appearance of a page with a few lines of code.

We won't go into the meaning of each CSS property right now. We'll just look at CSS in action! To turn CSS code on, you will need to remove the comment characters that "turn it off".

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <title>CSS in action</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>CSS</h1> <p>CSS is even simpler than HTML. It consists of a lot of rules, like these:</p> <pre><code>selector { property1: <em>value1</em>; property2: <em>value2</em>; }</code></pre> <p>The rules are very simple. But there is one problem: there are a <em>lot</em> of properties.</p> <p>Most of the course will focus specifically on CSS.</p> <p>Now work with the editor.</p> </body> </html>
CSS
/* body { padding: 0 20px; font-size: 16px; font-family: "Arial", sans-serif; } h1 { color: #618ad2; text-shadow: 2px 2px 0 #cccccc; } pre { padding: 10px; font-size: 14px; line-height: 20px; background-color: #f5f5f5; border: 1px solid #cccccc; border-radius: 3px; } em { color: #618ad2; } */

The code has changed, click "Update" or enable autorun.

You have moved to another page

Click inside the mini-browser to highlight this window.

100%
GoalsCompleted
0
    1. Remove the /* characters in the first line of the CSS editor and see how the page text transforms.

    © 2023-2024, codehero.pro