Home Pricing Open Editor

Hot Docs

The Style of Elements

Learn how to change everything about how a web page looks, from layout to colors

To change the appearance of your pages you can use CSS, which is short for Cascading Style Sheets. Thank God it’s one of those acronyms that is never really spelled out and many people who use this language every day may not even know what it actually stands for.

CSS lets you control everything about elements: their colors, their typefaces, their borders, the curvature of their corners, even their sizes, the space around them and positions on a page. It also controls how these characteristics will change to fit your browser window and how they change in time through animation.

We are going to cover some of the very basics of CSS to help get you started building your page on Hot Page. The idea here is to teach you just enough so that you can throw together pages and continue learning more on your own by building sites. If you find this stuff interesting or useful, there is another section of the documentation with external resources that are much more complete.

The Basics

The most basic part of CSS is a rule like this:

h1 {
  color: blue;
}

This snippet of code will change all the h1 headings on the page to blue text. It looks easy enough but that’s just step one. Let’s see what more is possible by examining the parts and expanding our knowledge.

Selectors

Above we saw how the <h1> tag was selected with the h1 selector. This is probably the most basic selector but there are all kinds of ways to select elements based on different criteria. Here are a few for your repertoire:

You may notice that the id and class selectors are the same ones that we use as a shorthand to build elements in the body of a Hot Page document.

Selectors become much more powerful when you can combine them:

There are many of these selectors and they can be combined into very specific forms. You are encouraged to learn some of the more advanced selectors at a later time because they can be quite useful in a pinch.

Take the complex example below that will select all the paragraphs that come after a figure element in a section element that’s the second child and direct descendent of an article tag (and only if that article tag directly follows an <h1> tag).

h1 + article > section:nth-child(2) figure ~ p

It’s also important to note that one rule can have more than one selector, so the following will select all h1, h2 and h3 elements on the page:

h1, h2, h3 {
 color: blue;
}

Declarations, Properties and Values

So in our example rules above, we have a selector and curly brackets with more code inside. The lines inside the curly brackets are called declarations and they change the characteristics of the elements. Declarations have a property (in this case, color) and a value (blue). In another line we could write text-align: center and that would tell the browser to center the text of this heading.

Let’s take a look at some of the most common properties:

And so many more... there are literally hundreds of these properties and some of them only modify things created by other properties. It’s probably best to just keep a good reference on hand.

Units

Most properties expect a value of a specific type. Color properties, for example, can be defined using a named color like cornflowerblue, a hexadecimal notation like #bafc03, or a color function which is something like rgb(255 0 0 / 80%).

There are different types of values, like a color or a length, and different units for those values like pixels (px) or degrees. Units like px are considered “absolute” units— ten pixels will always be ten pixels anywhere. But a length could also be a percentage (%), which is generally a percentage of the parent’s size. So a box with width: 50%; will be half the size of its parent. This is an example of a “relative unit”— its final size is relative to the element that contains it.

The em unit is another relative unit of length that is quite useful. One em is equal to the element’s font size. Font size is inherited from parent elements. That means you could do clever stuff like setting the font size of a container div, and using that one value to determine lots of measurements inside— and not just font sizes, but stuff like padding on a button.

<div id="container">
  <h2>The Knave of Hearts, he stole those tarts</h2>
  <button type="button">Steal Tarts!</button>
</div>
#container {
  font-size: 16px;
}
#container h2 {
  font-size: 2em;
}
#container button {
  padding: .5em 3em;
}

The Box Model

Some of the most essential CSS properties are the ones controlling the size of elements and the space around them. In CSS, this is called the box model and it consists of the following properties:

  1. width / height These control the size of the content of an element.
  2. padding Padding provides some space to breathe between an element’s contents and the border. By default, padding adds to the total dimensions of the element.
  3. border Border is make the element grow yet more, but you can control its color and shape, or even use an image in advanced use cases.
  4. margin Margin is the space between two different elements, outside of their border. Margin doesn’t affect the total size of the element.
margin
border
padding
contents

Inheritance

Many CSS properties have a special feature. When you set them on an element, you’re also setting them on all the elements inside of them as well. This means that if I put a few paragraphs inside an article element, then change the typeface for the article, the paragraphs will use this font for their text.

In general, it’s only text properties like font-family or color that are inherited, and it tends to work very intuitively.

Variables

One of the newer features of CSS are variables. In the spirit of making things very explicit, precise and horribly complicated, these are formally known as custom properties. Here’s what they look like:

body {
  --link-color: #663399;
}

a {
  color: var(--link-color);
}

Here, we’re setting a variable on the body element and then using it later on inside the rule for <a> tags. The trick here is that these values are inherited through the tree of your page’s elements. Imagine if we add the following rule to our page: 

article {
  --link-color: indigo;
}

Now the links inside an <article> tag will be indigo.

Animation

Used judiciously, animation can be a great way to bring that extra level of polish to your page and the user’s interactions. CSS has two different ways to control how elements change, transition and animation. Transitions can be used for simple changes from one state to another, like to make an element fade in, you could use this transition:

nav {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

nav.visible {
  opacity: 1;
}

With these rules, the nav element will be invisible (zero opacity) and if we add the class name visible it will fade to full opacity in half a second. Half a second doesn’t sound like much but you can definitely see it and it’s best to keep these transitions snappy so the page feels like it’s working fast.

Animations are a bit more complex because we can specify keyframes for the values in the middle. So you could have an animation that fades in and out in quick succession like it was blinking on and off. It can get a little bit involved, so please read more on MDN if you are interested.

Media Queries

As you design your page, you’ll want to be constantly thinking about how the page will work on desktop as well as mobile. For the phone size, you will probably want to decrease the font size a little bit and make the headings a different size compared to the body text. Style sheets have a special feature that let’s you set styles based on the size or other characteristics of the user’s device. Let’s look at an example: 

@media (max-width: 800px) {
  h1 {
    font-size: 20px
  }
}

This block of code will apply the styles inside of it if the browser window is less than 801 pixels wide. There is also a min-width media query that can be used to turn on rules if the browser window is above a certain size.

There are many other media queries that can set style rules based on other characteristics of the user’s browser, like if they are holding their phone in landscape mode or if they prefer a dark mode.

Specificity

This is one of those topics that you might not need to understand and will probably forget all about it — until you really need to understand it because nothing is working how it should and you can’t figure out why.

The free-for-all nature of typing style rules into a document and including them from all over the internet means that sometimes the same element will be targeted by the different selectors and it might have conflicting properties. Take, for example, the following two style rules. Which rule do you think will be applied?

h1#biggest {
  color: red;
}

h1 {
  color: blue;
}

One might think that the last rule would be applied, but that is not the case. This heading will be red. Specificity is how the browser decides which value should be used. The first selector, h1#biggest, is more specific because it includes an ID selector. The exact rules of specificity are kinda complicated but the gist is this: classes will win over just plain element selectors (like h1) and IDs will win over classes.

Keeping Things Organized and Scalable

In a visual page editor like Microosoft Word or Google Docs, people often create space by hitting the Enter or Space key a bunch of times. This might work on Hot Page too, but it’s considered a bad practice because it has a number of drawbacks.

For one thing, there’s something called “margin collapse” that typically just prevents it from working (trust me that the details are not worth it for now). Even when it does work, it’s usually not the cleanest way to do something. If you want to create the same amount of space somewhere else on the page, you would have to enter the same number of empty paragraphs. If you want to change them both later, you have to change it in two places.

It’s considered better practice to create a class with a specific value for padding or margin and use that wherever you need it. This also has the benefit of forcing you to be a little more organized. Things like spacing in different parts of the page should work inside a design system that creates a sense of visual harmony and proportion on your page.

Creating a Layout

Playing around with properties for colors or spacing is a fun way to get started designing your page, but you will soon want to create a more complex layout for all of your page’s elements, like the position of a side navigation menu or a grid of cards. CSS has two ways to create complex layouts: flexbox and grid.

Flexbox is a way that you can align your elements in one dimension, either horizontally or vertically. Given the way that most pages are read from top to bottom on a vertically scrolling canvas, flexbox is typically used to align elements horizontally in one or more rows. Let’s look at a typical setup:

.row {
  display: flex;
  flex-flow: row wrap;
}

.child {
  width: 33%;
}

There are actually seven different properties that precisely control these layouts. It is probably best to read a full tutorial and then try to use the properties on your own pages.

Grid layouts position elements in two dimensions at the same time. The parent element creates a series of columns and rows and then child elements are positioned inside of them. There are even more properties for grids so perhaps it’s best to learn once you’ve dominated flexbox.

Why Aren’t My Styles Working?

This can be really frustrating: you’re changing properties and nothing is changing on the page. The reason is likely one of the topics that we’ve already covered in this section of the documentation.

The best way to check any of these is by opening the page in your browser’s developer tools. This interaction between the structure of your elements and your style rules is often too much for a human brain to handle, and it’s often easiest to look at what result you are getting at any one time. The browser explains the choices it made on any given page in the developer tools and they become an essential tool to solving your problems.