June 19, 2021

Making selectors available in HTML

Suppose you have a <div> tag:

<div class="class-selector"></div>

The class attribute added to this tag is what lets a CSS file know how to style the element. In order for this connection to work, you must have a CSS file connected in the <head> of the HTML file. Create a file, index.html and a second file styles.css in the same folder. Then connect the CSS file into HTML with the below code block:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>A Document with a few styles</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <p>This text will be styled differently</p>
    </body>
</html>

With the fifth line using the <link> tag, you’ve now connected your CSS file into your HTML. This allows CSS to impose specific styles to each tag. As an example:

body {
  background-color: ivory;
}

Mind the curly braces, colon, and semi-colon. Adding the above three lines of styling will change the background of the HTML file when opened in a Web Browser to be an ivory color instead of a white. Let’s take apart what each line does. The body here is the selector. It’s a plain HTML tag selector. Using a selector, you can add styles inside of curly braces. background-color is a style that can be added to an HTML element. Let’s add a few more styles that will change the appearance of the content on the page:

body {
  background-color: ivory;
}
p, h1, h2, h3 {
  font-family: "Helvetica", sans-serif;
}
h1, h2, h3 {
  font-weight: lighter;
}
h4, h5, h6 {
  font-family: "Garamond", serif;
  font-weight: lighter;
}
p {
  font-size: 1rem;
}
h1 {
  font-size: 1.6rem;
}
h2 {
  font-size: 1.4rem;
}
h3 {
  font-size: 1.2rem;
}
h4 {
  font-size: 1.2rem;
}
h5 {
  font-size: 1.1rem;
}
h6 {
  font-size: 1rem;
}

The above styles will add some good-looking font defaults to help your web pages be more readable. The rem units shown are a recommended unit to help with cross-platform compatibility. This will help your website or app text adapt to the user’s device, whether it’s a phone, a desktop, or tablet. Writing styles for several tags like these creates a theme for your site content. Try adding some heading tags above the paragraph so that your HTMl file looks like:

<html lang="en">
    <head>
        <title>A Document with a few styles</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <h1>The title of this article</h1>
        <h5>Table of contents</h5>
        <h6>Content item</h6>
        <p>This text will be styled differently</p>
    </body>
</html>

These elements now provide a much more unique way to format your web page and help it stand out. In web design, every detail matters, and each page needs to have its own sense of style. Font styles are foundational text-based styles. For more interactive websites, you can also style form elements like buttons.

Styling form and interaction elements

In your HTML, add the following three lines below the paragraph in your body.

<label>
    Color name
    <input type="text" />
</label>
<input type="color" id="favcolor" name="favcolor" value="#D90000" />
<button>Name Color!</button>

The above lines will create an interaction element in the page by allowing you to enter a color name, pick a color, and press a button that does nothing. They’re styled very plainly. Let’s add some styles to spruce up the three interactive elements

input {
    border: 1px solid lightslategray;
    min-width: 5rem;
    border-radius: 0.2rem;
    height: 1.2rem;
}
input[type="color"] {
    border-radius: 0.4rem;
    height: 1.5rem;
    background-color: ivory;
}
button {
    font-size: 1.2rem;
    height: 2rem;
    background-color: lightblue;
    border-radius: 0.5rem;
    border: 2px solid black;
}

Notice the two input elements with different types. It’s possible to select an HTML attribute within CSS with square brackets. This goes right after the selector. These interactive elements now have a mix of styles, ranging from font changes to updates in color and size. For elements like buttons, there are also pseudo-class selectors that customize the experience of pushing it down to the last detail of the interaction.

For example, suppose you want to add a shadow to the button, then show the shadow recede and disappear when the button is pressed. When the button is hovered, though, the shadow gets a little blurrier, the button gets a bit larger as if lifted up. These can all be shown on the button with CSS.

Pseudo-class selectors for total customization

Pseudo-class names are added directly after the HTML selector (like input:focus). Using a few button pseudo-classes, let’s add the behavior described in the previous paragraph. Change the button styles to the following:

button {
    font-size: 1.2rem;
    height: 2rem;
    background-color: lightblue;
    border-radius: 0.5rem;
    border: 2px solid black;
}
button:hover {
    font-size: 1.25rem;
    height: 2.05rem;
    box-shadow: 2px 2px 3px lightgray;
}
button:active {
    height: 1.95rem;
    font-size: 1.15rem;
    border: 1px solid black;
    box-shadow: inset 2px 2px 1px slategray;
}

Notice the box-shadow property adds a few extra details to emphasize the button press. Don’t worry about understanding that line. Just remember the :hover and :active pseudo-classes for customizing button behavior. If you’ve been following along the HTML and CSS sections so far, you should have an HTMl page that looks like the following. Try clicking on the “Name Color!” button in the excerpt below and you’ll see how your button should behave.

The title of this article

Content item

This text will be styled differently

Color name

Higher Priority CSS selectors

Sometimes it’s necessary to add some styles only to one instance of an element. Other times, you need a quick way to add a template of styles to some <p> elements but not others, like when adding subtitles to images. Higher priority selectors like id and class help us organize common styles applied to similar elements of the website.

Between the two high-priority selectors above, class is the most common one. A few examples of where class names are commonly added include:

A container <div> tag for styling content within that container
An active or inactive class for showing which elements are currently selected
Adding a shared class that is based on your brand or your theme, like primary for a primary color.

There are several more ways of using class names to apply template CSS styles, but the above are most common. As an example, create a new HTML file with the standard <!DOCTYPE HTML> header and add the following lines for the head and body.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>A Document with a few styles</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="container">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
        </div>
    </body>
</html>

Let’s add some styles to the container so that it’s visible. In the styles.css file, select the .container class (mind the dot in the front) followed by curly braces and give it the following styles:

.container {
  height: 10rem;
  width: 100%;
  background-color: lightblue;
}

We also want the div tags inside the container to be visible, so select the .child elements and give them a border so that they have an outline around them.

.child {
  border: 1px solid black;
  height: 2rem;
}

Notice that by using a class selector, the main advantage is that new <div> tags that are created will not have the styles assigned to the .container and .child classes. This helps create a set of class names specific to your webpage that you can reuse as needed. It’s also possible to add multiple classes to a particular element and customize its look that way. Composing styles is a more advanced topic that will be covered later, though.

For now, let’s combine the two concepts of class selectors and pseudo-classes covered in this article to make an alternating grid pattern, similar to a chess board or a checker board. For now, add the following two lines to the .container class in your CSS file and then adjust the .child class’s height property to be 100% and width to be 25% so it fills up the full height and width of the container.

.container {
    height: 10rem;
    width: 100%;
    background-color: lightblue;
    /* Add the below two lines */
    display: flex;
    flex-direction: row;
}
.child {
  border: 1px solid black;
  /* Change the height and width below */
  height: 100%;
  width: 25%;
}

Making a Chess board in CSS

After making the above changes, you should have a wide container with four boxes inside it. Let’s add four more boxes so that they look more square than rectangular. After that we’ll alternate their background color using a new pseudo-class called :nth-child. First add four more <div> tags to your HTML file, then add the following style underneath the .child class in your CSS.

.child:nth-child(2n) {
  background-color: white;
}

The :nth-child pseudo-class is special because it only applies styles to HTML elements that match what’s inside the parentheses () as the value of n goes up by 1. So, when the value of n is 1, the value inside the parentheses is 2 (2 x 1). So, the styles above only apply to even-numbered elements. If you applied the styles above properly, you’ll see an alternating row of 8 square-like shapes with different background colors, like the one shown below.

You can likely start to see how this resembles a chess board. For later rows, however, the colors shift by one square on chess boards. This is a little bit trickier to implement but it’s still possible using the :nth-child pseudo-class and the selectors we have. So, copy and paste the .container div and all of the 8 <div> tags inside of it. Then paste them after the container div closes. Then repeat this process 7 times so that you have an 8x8 chess board.

This next part is very important because it shows how styles can be conditionally applied. If you count the number of rows we have, now it should be 8 rows, each row with class="container" in its HTML. Each row in the board is a <div> tag. We want all the even-numbered rows to be shifted one color to the right. Meaning, only the odd-numbered <div> tags within each row will have a background-color of white. To accomplish this, we now have to add the :nth-child selector to the container class to specify which of its .child elements will have a white background. First add a .container:nth-child(2n) in front of the .child:nth-child(2n) selector combination added earlier. This will restrict the white background to apply to every other row. It should now look like this:

.container:nth-child(2n) .child:nth-child(2n) {
  background-color: white
}

Next, copy the above three lines and paste them right underneath the ending curly brace so they look like they’re repeated in the CSS. By making one small change, the solid blue rows will have alternating white backgrounds. That change is converting the two 2n inside the parentheses into 2n-1. Save, reload the browser, and voila! You’ll have a full chess board like the one shown below.

While the HTML is quite long and repetitive, the CSS is fairly concise, shown below:

.container {
  height: 10rem;
  width: 100%;
  background-color: lightblue;
  display: flex;
  flex-direction: row;
}
.child {
  border: 1px solid black;
  height: 100%;
  width: 25%;
}
.container:nth-child(2n) .child:nth-child(2n) {
  background-color: white
}
.container:nth-child(2n-1) .child:nth-child(2n-1) {
  background-color: white
}

This concludes the introduction to selectors and pseudo-classes in CSS. While it got fairly advanced toward the end, the topics covered in this article will be reinforced frequently when writing CSS and reading the other articles here.