Here I am going to show you the basic steps, using just CSS, to add a background image, choose a nice font and font size, and add animation to your font (or whatever you wish to animate!).
I’d like to start by adding a background image for all pages. I’m going to use the same background image for all pages.
In our CSS folder we can create some CSS code for our background image:
In the code above, we are able to add our own chosen image URL (so edit that part as you wish), and then the rest of the sizings underneath just ensure that the image fills the page correctly and is not distorted or repeated to fit different screen sizes. After writing this CSS code, and reloading the server page, my web page now looks like this:
Great! Background set! Now I want to add some fancy font to my ‘yes/no’ h1 tag that appears at the top of the page..
For this we can visit fonts.google.com. Browse through the list of font choices they have. Once you’ve decided which one you like, click the ‘+’ button and a “family selected” pop-up with appear at the bottom right of the page. This will instruct you too add the link in your index.html:
..and then also instruct you to add the CSS content to your CSS file:
Now that I have done this, my page looks like this:
Great! I like the font, but I feel the size of the text is too small. In my project, the ‘yes/no’ presenting at the top of the page is the only h1 tag on my app, so i can write some CSS code to accommodate this in my CSS file:
If you have more that one h1 tag in your application, and you only want to single out one h1 tag to change the size of, you could write the above for the #id of the h1, rather than h1. Changing the px to 70 means my page now looks like this:
Perfect! Now last but not least, I want to add some cool animation to my h1 of ‘yes/no’. To do this you can visit animate.css (https://daneden.github.io/animate.css/)
Animate.css is a great dropdown menu that lets you select and visualise what movement will be applied to your code before applying it.
Again we will need to put a link in our index.html:
Now animate.css instructs us to edit our h1 tag as below:
You basically need to add a class starting with the word animated, followed by either infinite (or you can leave this blank as I have chosen to do as i do not want the animation to run infinitely), followed by the name of your chosen animation from the drop down (I chose fadeInDown) on their website, and if you wish to add a delay to the end you can (again I have chosen not to delay the animation in my example below).
Now if I refresh my server, It should be working! Below is a screenshot of my h1 text fading in from above (mid-movement), after refreshing the page:
Have fun experimenting with different aspects of CSS, we have merely only scratched the surface. Other helpful games to help us understand CSS positioning are https://flexboxfroggy.com/ and https://cssgridgarden.com/
Practice makes perfect!