CSS for Dummies: Taking Your Rails App from Basic to Bougie
When I first started learning Rails, I was so excited to progress to putting my code in an actual web browser. “I’m a real web developer now!” I thought. “My websites will be ready to be published in no time!”
…hmm.
When I started up my Rails server for the first time this was underwhelming to say the LEAST. Hours of work on the back end on my relationships, and all I have is a 1996 Geocities website?!
Well, my friends, I am here to lead you OUT of the pit of despair and into the beauty of magical fairy land that is CSS.
CSS Basics
CSS, or Cascading Style Sheets, is what makes your web applications pretty. Which is, obviously, the most important part.
In all seriousness, CSS is a crucial element of every website. It works hand in hand with the HTML already provided to style what we see on the page. You want colors? We’ve got thousands with the hexadecimal system. Fonts, alignment, sizing, you name it. CSS will bring your project to the next level. But before we get ahead of ourselves, we’ve got to set up our file.
Setting Up the File
The good news is, if you used “rails new” to create your Rails application, you’ve already got your CSS file ready and waiting for you! It should be in ./app/assets/stylesheets/application.css and should look a little something like this:
This is a stylesheet. Any CSS language that we put in this file will affect the entire application, rather than just a single page.
If you didn’t use “rails new” and want to add a stylesheet, or you want to add CSS to just a single page, it is very simple to do it manually! Just create a file that ends in .css (usually style.css) and then link to it in the head of your view page, like so:
This informs the browser to reference “style.css” for any sort of styling instructions. Now, let’s get started styling.
CSS Notation
The format for CSS notation is as follows:
Selector: The thing that you are selecting to put styling on. Some examples include:
- Tag Names: whatever is inside the tag that you want to select. It could be div, p, a, img…the list goes on.
- Class and ID Names: Remember all of those class and id attributes you added inside your HTML tags? This is where they come in handy. You can use a selector to call on all tags with a certain attribute by using .class_name. Similarly, if you want to select a single element to style, you can add an id attribute to the HTML tag and then select it by user #id_name.
- Everything: Literally. The symbol * is the universal selector, and whatever you declare with this selector will style all elements within your HTML files, unless you specify at another point.
After the selector comes a pair of curly braces, and inside is the declaration block, which contains a property name and a property value.
Property Name: the property of that element you’d like to style. This can be color, font-size, font-family, alignment, padding…the list goes on and on.
Property Value: description of the change. Examples include blue for color, 18px for size, Arial for font-family.
You can have multiple declarations within each block; just make sure each one is separated with a semicolon!
Now that we’ve got the notation down, let’s start playing around! This is the page I’m going to focus my CSS on today:
Very informative, not very exciting. The first thing I wanted to do was change the font from the boring Times New Roman. I changed the font-family in the h1 and h2 tags to Georgia, and everything else in the body to Helvetica, and changed some font sizes around.
What I also really wanted was some sort of navigation/title bar at the top of the page. So, I gave my “Art Museum App” header tag an id of “title”, aligned that element center, and gave it its own background color, making a bar across the top of the browser page. Here’s what the browser looks like now, along with its corresponding CSS notation:
Not too shabby, huh? But, I think we could dress this up a little more. Next, I created a navigation bar right underneath my title in my HTML file, adding links to specific index pages. I played around with margin and padding, and ended up aligning everything on the right side.
Now, this is starting to look like a real website! The last thing that is bugging me is the alignment of the actual content on the page. I’d like to have the image of the painting live on the left side of the page with the information on the right, so we can view all of the information on one page rather than having to scroll down.
We are in luck, because there is a CSS property name called float that will do exactly that! I put the information I want on the right side in a div that I assigned the class of “right” and floated all of those elements to the right.
Okay, okay, we’re starting to get somewhere! Now I like to use the very official software engineering technique called “fiddling around with it until it looks like you want it to.” The thing with CSS is, until you’re using it constantly and very familiar with pixel size and that sort of thing, it’s going to take a lot of fiddling around and patience to get your website looking the way you’d like it to. Luckily the internet is filled with tons of resources like this handy dandy blog. The gold standard for CSS information is on W3Schools, and I would highly suggest looking around there if you’re feeling stuck.
So, after a bit of fiddling and personal research, I finally got my page looking the way I’d like it to:
Muuuuch better. I would definitely like to continue to work on this and add some more elements (next step would be to work on those buttons on the bottom that are an eyesore), but I’m going to give myself a pat on the back for this one!
