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:
You can learn more about all these CSS properties on w3schools.com.
We will also use different types of selectors such as:
- 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.
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.
Train yourself to let go of everything you fear to lose.
Fear is the path to the dark side. Fear leads to anger. Anger leads to hate. Hate leads to suffering.
You must unlearn what you have learned.
Your focus determines your reality.
There’s always a bigger fish!
Many of the truths that we cling to depend on our point of view.
Who’s more foolish? The fool or the fool who follows him?
Nothing will stop us this time.