Chapter 6

JavaScript and CSS

We’ve all got our own individual style. One person might sport a tuxedo and another might feel most at home in white jeans and a white T-shirt. Styles come and go, and what looks great today might look silly tomorrow.

Changing clothes and our personal styles gives us the freedom to change the way we look. The things that make people themselves, however, don’t change when they change clothes.

In the same way, it’s possible to change the way a web page looks without changing the content and structure of the web page.

The language used to change a web page’s style is called Cascading Style Sheets (CSS). In this chapter, we show you what CSS is and how you can use it to give your web applications style.

CSS dresses up your web page by adding colors, borders, backgrounds, and varying sizes to elements. CSS can change where elements are positioned on your screen, and it can even control special effects such as animation!

image

Meet Douglas the JavaScript Robot

In this project, you modify and add styles to an HTML robot named Douglas. We just got Douglas delivered from the robot factory this morning. His JavaScript skills are outstanding, he doesn’t need much maintenance (just a new variable to play with every now and then), and he tells good jokes!

The only problem is, his looks are a bit boring! Sure, he’s got some nice blue eyes, and his “I <3 JS!” T-shirt ...

Get JavaScript For Kids For Dummies now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.