CSS: A Precursory Introduction

Opening Thoughts:

As we proceed to go deeper into Rails, I can’t help but think of an aspect of web development that has been glossed over. The visual and creative medium in which our apps our conveyed. CSS is one the ways in which we express that.

What is CSS?

CSS or Cascading Style Sheets is a markup language, used to determine how content should be displayed on a web page, device, or application. Traits such as the background, font type, color, text alignment, and number of columns are just a few of the traits CSS can control and tweak. These tweaks are normally stored in separate files. With each block being executed sequentially from top to bottom (cascading down).

What About HTML?

There’s often some confusion on how HTML and CSS relate to one another. HTML is another markup language, but it’s purpose was to describe the content. The tags are the indicators of what type of content is likely to follow. For example, a <p> tag denotes a body of text, an <a> tag denotes a link, and a <form> tag denotes a form structure.


So What’s the Deal?

Before CSS was conceived, HTML 3.2 introduced the ability to style attributes within a tag. While this added a much needed way to customize your content, it introduced another problem:

Simple styling for the RESTful Routes Lab

I used an old lab and inserted some very basic styles. Mainly centering the text and changing the background color. But there’s a problem. Let’s look at the code for this simple example:

In the process of beautifying our page we’ve ended up with a ton of clutter! Just like in code, why not separate our concerns? It’s that question that drove the World Wide Web Consortium (W3C) to create CSS. So instead we can use attribute selectors to look for the elements we want to adjust. Those changes can exist in their own files. Leaving our HTML code style-bloat-free.


How Does this Styling Dankness Work?

The aforementioned attribute selectors are conceptually similar to SQL queries. We are in control of how specific or how broad we want our search to be.

Let’s say you wanted to select all the <p> tag elements inside the body of your HTML. The markup would look like as follows:

body p {
}

Now that we have defined what we’re searching for, we can proceed to style those elements.

body p {
color: red;
text-align: center;
text-shadow: 2px 2px 3px black;
}

Selectors can be strung together to achieve different results! It’s important to note that if you have multiple attribute selectors acting upon the same attribute of an element, whichever was executed last will take precedence. This is by design! Say we wanted our text to glow if we hovered our mouse over it. We could use a selector that will apply a style upon the element only when we hovered over it. It would temporarily override the original styling.


What Are Some Other Examples?

Totally Not A Shameless Reuse of My Website

Fin.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.