Author’s Note: I’m currently in the process of migrating old blog posts to this new system. That may mean some links, syntax highlighting, and other details are broken or missing temporarily. Sorry for the inconvenience!

Let's Look Pretty

2017-01-02

Today's the day we make the page look glorious! Fancy and design-ey and absolutely beautiful. Beyond all reproach. By which, of course, I mean that I've added some CSS. Guess what we're going to talk about today?

Here's what I added near the top of this page:

<style>
html {
  background: #666;
  overflow-x: hidden;
}
body {
  background: #fff;
  margin: 10px auto;
  max-width: 960px;
  overflow-x: hidden;
  padding: 5px 10px;
  width: 90%;
}
</style>

Now, granted, you're not going to *see* that text. It's in a <style> HTML tag, which is our way of telling the browser "Hey, these are some CSS rules for making the page fancy. Follow the rules please!". We'll look at how those rules work in a minute.

As a brief aside — we've been talking an awful lot about the *how* of web tech, but not talking very much about the *why*. The reason for that is pretty simple: I want to be able to demonstrate what I'm talking about without jumping ahead. If we want to have a discussion about font color, it feels like cheating to use CSS to style things before we discuss CSS. There are three key web technologies that we really need to discuss in order to open the discussion up to more abstract things: HTML, CSS, and JavaScript. So I'm trying to at least get the basics out of the way first. The idea is that we're bootstrapping the site, after all.

As a second aside — I should warn you that I hate CSS.

Okay, so what is a CSS

Excellent question! What is a CSS indeed?! Well, it's an acronym (or for you pedants, an initialism), which stands for Cascading Style Sheets. Let's try and break this down, like we did in trying to understand HTML.

"Cascading" is a modifier, so let's work out the "Style Sheets" part first. This appears to be a term that originated in the early 1900's (thanks, Google). For those playing along at home, that was from before the internet (in the dark times).

"Style Sheet" is a terribly ungooglable term, but I did find this definition from The Fine Dictionary:

(n) style sheet a sheet summarizing the editorial conventions to be followed in preparing text for publication

This is actually a pretty fantastic definition! Let's imagine you're a publisher trying to take an author's manuscript and turn it into a book. You may get a handwritten manuscript, or something off of a typewriter (remember, we're talking about the *olden* days), and your company probably has some rules for how things need to be laid out for publications. Things like "Chapters should start on a new page", or "the text should be justified" (like I forced with this paragraph, for example).

Style sheets — in the web sense — match up with this definition very well. I'm going to replace "conventions to be followed" with "rules", and condense it a bit to say that our style sheets are "a set of rules for laying out the document". The HTML is the basic "manuscript", and we use style sheets to convert that manuscript into a publishable book (or webpage, as the case may be)!

The cascading part is a bit more simple. Sometimes, rules may apply and conflict. I might say "all paragraphs should have green text", but "all links have purple text". Do you see the problem? I have no eye for design! Erm, yes, but also, those rules conflict! What happens if I have a link inside a paragraph?! Now our rules are ambiguous.

The "cascading" part means that there is an implicit way to resolve conflicting rules unambiguously. So when all these rules are applied, we can know in advance that the link text in the above example will be purple (one such general CSS rule is that more-specific selectors trump less-specific ones).

Incidentally, these rules for conflict-resolution are one reason to be very frustrated with CSS. But let's move on!

How does CSS work?

At the top, I used a <style> tag to mark some CSS. I can also apply CSS directly on a tag itself <span style="font-size: 200%"> like this!</span>. But we can also put stylesheets into their own files, and link to them inside our HTML:

<link
  rel='stylesheet'
  type='text/css'
  href='someUrl.css'>

Then, we can put the CSS rules directly in a .css file. But what does a rule look like? Basically, they look like this:

selector {
  property: value;
  anotherProperty: anotherValue;
}

When setting style= on an HTMl tag directly (called *inline* styles), we don't need to tell the browser *what* should have, for example, 200% width. It's implied that it should be on that tag. But when we use <style> tags, or external files, we start by providing a selector

A selector can be a tag name (like body, or a links). But it can also be a bit more explicit. Let's imagine I have some HTML that looks like this:

<p id='lead' class='coolParagraph'>
  This is the lead paragraph.
</p>
<p class='coolParagraph'>
  This is another paragraph.
</p>

I can target items that have a certain id by prefixing it with a "#" character. I can target items that have a particular class by prefixing it with a "." character. So I might have CSS rules that look like this:

#lead {
  font-weight: bold;
}
.coolParagraph {
  color: blue;
}

The first rule will match only the first paragraph. But the second rule will match both! So let's see what that ends up looking like:

This is the lead paragraph

This is another paragraph.

Within the curly braces, we can put as many key/value pairs as we like. We end each property with a semicolon, and can continue adding on. Of course, we have to *know* what the correct properties are (and what values they can take), but that's something we'll have to cover as we go. Suffice it to say, there are a *lot* of properties! For now, I'll just leave you with this:

<style>
#bye {
  background: #ede;
  border: 2px solid #666;
  box-shadow: 5px 5px 2px #ccc;
  color: #333;
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  margin-left: 50%;
  padding: 5px 10px;
  text-shadow: 3px 3px 2px #ccc;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}
</style>

<div id='bye'>
Thanks for reading!
</div>
Thanks for reading!

***

←Previous Post | Next Post→