Learning Objectives
In this challenge we are learning how to format text on a web page using a range of CSS properties.
Remember the key syntax for CSS is as follows:
In this challenge we will use various CSS properties such as:
- font-family:
- font-size:
- color:
- font-weight:
- font-style:
- text-decoration:
- text-shadow:
You can learn more about all these CSS properties on w3schools.com.
We will also use different types of selectors such as:
- TAG
- .class
- #id
- element child-element
- element child-element:nth-child()
You can learn more about CSS selectors on w3schools.com.
Our first quote
Look at the code below to see how we created our first quote from Master Yoda.
See the Pen Font Title by 101 Computing (@101Computing) on CodePen.
Check how we have used various CSS properties to format the text and to add a glowing effect or a shadow effect to our text.
Also compare the different types of selectors we have used in our CSS code.
Your challenge
Press the “edit on codepen” button on the above codepen.
Tweak the code to create another inspirational quote from the star wars movies, using any of the quotes provided below:
Do, or do not. There is no try.
Master Yoda
Train yourself to let go of everything you fear to lose.
Master Yoda
Fly Casual!
Han Solo
Rawwwaarrgh!
Chewbacca
Fear is the path to the dark side. Fear leads to anger. Anger leads to hate. Hate leads to suffering.
Master Yoda
You must unlearn what you have learned.
Master Yoda
Your focus determines your reality.
Qui-Gon Jinn
There’s always a bigger fish!
Qui-Gon Jinn
Many of the truths that we cling to depend on our point of view.
Obi-Wan Kenobi
Who’s more foolish? The fool or the fool who follows him?
Obi-Wan Kenobi
Nothing will stop us this time.
Darth Vader
LMC Simulator
Logic Gates Circuits
Network Designer
Flowchart Studio
Online Python IDE
