Beautify: CSS Basics and Essentials
So far in my brief coding career, I’ve learned enough to get a very basic program up and running. Using my newfound skills in the languages of Rails, Ruby, and HTML, I’ve learned to create simple relationships between models and display my projects in a browser. As simple as that sounds, it’s taken a lot of hard work and problem solving to get to this point. So, you can’t help but feel a little bit disappointed when you finally get your project up and running in your browser only to be faced with this aesthetic atrocity:
Sure, it’s working but sheesh, what an eyesore. Now that our app is behaving as we’d like, how do we transform it from this bland set up to something with a little more pizzazz? The answer: CSS! CSS stands for “Cascading Style Sheets” and it is the primary programming language we will be using to style our HTML documents. Let’s take a look at some CSS basics to see how it works and learn about some of its’ capabilities.
CSS Syntax
First off, we’ll take a look at how CSS syntax works. We can call a piece of CSS code a rule-set. A CSS rule-set consists of a selector(what HTML element we want to style) and a declaration block, which is contained in a hash. A declaration contains a property (the key of the hash) and a value. Properties and values are separated by colons, while multiple sets of declarations are separated by semicolons. Here’s an example:
In this example, any <p>(or paragraph) tags in our HTML document will be colored blue. However, you aren’t limited to using only HTML elements as selectors. Let’s take a look at some other common CSS selectors.
CSS Selectors
In the previous section, we learned how to use element selectors in CSS. Two other very common CSS selectors are id selectors and class selectors. Let’s take a brief look at examples of both and work through them.
Id Selectors
You can use id selectors to style one unique HTML element in your document. You should use this when you want to design something in your document uniquely. That is, you should not see your id selector used elsewhere in the document. We use a # symbol to denote that we are using an id selector. Here’s an example:
In this example, we are using an id selector called “pop” that will enlarge our font to 60 pixels and turn it red. Again, you should only apply this id selector on one unique element on your HTML page.
Class Selectors
So maybe you have some kind of styling that you want to keep consistent throughout certain elements of your HTML document. Since we don’t want to use an id selector more than once on a HTML doc, we can use class selectors. You can assign a class selector to as many HTML elements as you want! We use a . symbol to denote that we are using a class selector. For example:
In this example, we are using a class selector called “center” that will align the text to the center of the page for whatever elements we apply it to. Now that we’ve talked about different kinds of selectors we can use in CSS, how do we actually apply them to our HTML document? There’s a few different ways.
Adding CSS to our HTML
There are three ways of inserting our styling into our HTML doc.
- External CSS
- Internal CSS
- Inline CSS
External
With external CSS, we are linking a CSS stylesheet to our HTML document so that whenever we want to make any styling changes, we only have to change the stylesheet, NOT the HTML. In order to link our HTML doc to the style sheet, we must create a reference to the stylesheet in our HTML. It would look something like this:
First, you might notice that we placed this reference within the head of our HTML page. This is a must! The rel=”stylesheet” portion of the code just tells our HTML document that we are relating to another file that is a style sheet. The href=”./mystyle.css” portion of the code is specifying which file we are using, in this case mystyle.css. The ./ is just signifying that this is a relative path. Once this link is set up, you should be able to style your HTML doc from your CSS file! This is great because we hardly ever have to touch our HTML doc to style our program. To apply class or id selectors to your HTML element, just write in it’s id or class in the selected HTML’s opening tag.You can also create <div>s in your HTML to create containers to apply your stylings to chunks of HTML.
Here, we are using a class selector called “search” that is being applied to the block within the <div>.
Although you will probably use this method the most when inserting styling into your HTML, let’s take a look at some other ways we can do it.
Internal
The best use for an internal style sheet is when one HTML page has a unique style compared to the pages. You implement it by putting our CSS rule-sets within a <style> element in the head section of the HTML doc.
In this example, the background of the page will be linen-colored and each h1 element will have maroon text and will have a margin on the left of the size of 40 pixels. Let’s take a look at one last way of implementing style in our CSS.
Inline
You can use inline style to apply a unique style for a single element in an HTML doc. This is the least flexible of the three, and you really shouldn’t use this method unless you really need to. Why? Because writing stylings for each individual element in your HTML is extremely tedious and will make your document much harder to read. However, you can use it in a pinch and is pretty straightforward to use. I have been told that some CSS developers like to start styling their HTML using inline, but then as they build it out they start to migrate their stylings into an external stylesheet. I’m yet to try this workflow, but whatever works for you is cool! Example:
Wrapping Up
In this article we’ve covered the very essential basics of CSS. Hopefully this will get you excited about making your projects pop and sparkle. There are many great CSS resources to expand your skills and knowledge. Here are a few that I refer to frequently:
https://www.w3schools.com/css/default.asp
https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
