Hi there! Today we will explore how to style web pages and present digital data using CSS.
CSS stands for Cascading Style Sheets. It is the digital tool we use to design and style the layout of our web pages.
We use CSS to communicate data clearly to an audience. By changing colors and sizes, we help viewers understand what information is most important.
To style an element, we select it and declare a property and value. For example, we can make our text green to show positive growth.
✏️ Worked example
You want to display a digital report showing your school's recycling progress. You need to style the main heading to be purple and centered so that it grabs the audience's attention.
Identify the HTML element you want to style. In this case, it is the main heading tag: <h1>.
Write the CSS selector for the heading by typing 'h1' followed by open and closed curly braces.
Inside the curly braces, add the color property and set its value to purple: 'color: purple;'.
Add a second property to center the text: 'text-align: center;'.
Review your final CSS rule: h1 { color: purple; text-align: center; }
Want the full interactive lesson — quiz, animations, and Finn cheering them on?
Studyfin
✨ Sign up free
