Course: Welcome

CSS in action [2/14]

As we have mentioned before, while creating web pages two languages - HTML and CSS - are used. HTML encodes the structure and content of the page, CSS encodes the appearance. A browser connects the HTML and CSS codes and forms the web page.

In the previous task you changed the code in the HTML-editor and made sure the content of the page changed as well.

In this task you will work with the CSS-editor and will see how some code lines can change the appearance of the page.

At this point we will not go deep into each CSS-property. We will just see the CSS in action! To activate the CSS code, you will need to delete the comment symbols that deactivate it.

Do it
<!DOCTYPE html> <html> <head> <title>CSS in action</title> </head> <body> <h1>CSS</h1> <p>CSS is even easier than HTML. It consists of many different rules, for example like these:</p> <pre> selector { property1: <em>value</em>; property2: <em>value</em>; }</pre> <p>The rules are quite simple. But there is a problem: there are <em>loads</em> of properties.</p> <p>Major part of the course will be devoted to CSS.</p> <p>And now it’s time to work with the lower editor window.</p> </body> </html>
/* body { padding: 0 20px; font-family: Arial, sans-serif; font-size: 16px; } h1 { color: #618AD2; text-shadow: 2px 2px 0 #ccc; } pre { padding: 10px; font-size: 14px; line-height: 20px; background: #f5f5f5; border: 1px solid #ccc; border-radius: 3px; } em { color: #618AD2; }
HTML Academy
  1. Delete the symbols /* in the first line of the CSS-editor to see how the text changes on the page.
Theory Check Next