Module 5: CSS Styling

Module 5: CSS Styling

This top section demonstrates default browser styling with no CSS applied.

Mars: The Red Planet

Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System. It is a dusty, cold, desert world with a very thin atmosphere. There is strong evidence that Mars was billions of years ago wetter and warmer, with a thicker atmosphere.

Mars planet surface

Image credit: Nicolas Lobos on Unsplash

Jupiter: The Gas Giant

Jupiter is the fifth planet from the Sun and by far the largest planet in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined. Jupiter is wrapped in swirling cloud stripes and has massive storms like the Great Red Spot.

Jupiter planet spheres

Image credit: NASA on Unsplash

Interactive CSS Stars (Unstyled)

Transform Star

This star is supposed to rotate when you hover over it. It shows how CSS can change the shape and angle of an element.

Transition Star

This star is supposed to smoothly change color when you hover. It shows how CSS can make changes look gradual instead of instant.

Animation Star

This star is supposed to continuously fade in and out on its own. It shows how CSS can run automated visual loops.


Module 5: CSS Styling

This bottom section demonstrates advanced CSS properties, layouts, and glowing space-themed styling.

Mars: The Red Planet

Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System. It is a dusty, cold, desert world with a very thin atmosphere. There is strong evidence that Mars was billions of years ago wetter and warmer, with a thicker atmosphere.

Mars planet surface Photo by Nicolas Lobos on Unsplash

Jupiter: The Gas Giant

Jupiter is the fifth planet from the Sun and by far the largest planet in the Solar System. It is a gas giant with a mass more than two and a half times that of all the other planets in the Solar System combined. Jupiter is wrapped in swirling cloud stripes and has massive storms like the Great Red Spot.

Jupiter planet spheres Photo by NASA on Unsplash

Interactive CSS Stars (Styled)

Hover over each star to test out the different CSS effects required by our rubric.

Transform Star

This star rotates and grows bigger when you hover over it. It demonstrates the CSS transform property in action.

Transition Star

This star slowly shifts to a neon pink color when hovered. The CSS transition property makes the color change smoothly.

Animation Star

This star continuously pulses and glows on its own. It uses a CSS animation that repeats automatically.