Star Wars Quotes

star-wars-quote

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:
css-syntax

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

Did you like this challenge?

Click on a star to rate it!

Average rating 4.5 / 5. Vote count: 4

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!

Tagged with: , ,