Styling my project using CSS & HTML (Rails and/or JavaScript examples)

Emily Violet Haynes
Jan 14 · 5 min read

You may have learnt a-lot or know a-lot when it comes to using Ruby on Rails or JavaScript. But when being asked to style your application, do you struggle to know which information to look for, where to start, or find that pre-set layouts are harder to navigate and you’d rather add/write your own CSS?

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!).

Here I have created a basic web page, using JavaScript and html (and an API that supplies random GIFs with a ‘yes’ or ‘no’ answer each time the page is refreshed), although you can do any of the following things with your fully Rails application too.

When I run ‘open index.html’ in my JavaScript project, or ‘rails server’ in my Rails project, I will be able to view my index page. At the moment, mine looks like this:

In my Javascript project I would put the following links in my index.html file, but for my Rails project I would put them in my views/layouts/application.html.erb file. This initial link is just to link the html/html.erb files to the css files:

If you don’t have a CSS file already, then we need to create one. for JavaScript index.css, for Rails, app/assets/stylesheets/application.css (or what ever you should wish to name the file).

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).

However, my h1 tag has not been hardcoded in my index.html, instead my JavaScript is creating the h1 tag upon loading the DOM page, with information from my chosen API. So instead, where I created the h1 tag in my index.js file, I also added it’s class:

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!

Emily Violet Haynes

Written by

Flatiron Software Engineering Immersive Student 2019

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade