Styling Our Content

Intro to Styling

For the past few weeks, we've discussed how to get all the information you need onto a web page. However, if you've been following along and coding as you go, you've probably noticed that your pages don't look very appealing. They might even look quite bad, actually…

So far, we haven't added any styles to our web pages. Styles are rules we give to our browser to tell it how we want our HTML elements to look on the page. We can change the size, font, color, position, alignment, and many other things! But how?

Adding Our First Styles

<p style="color: blue;">This text is blue now!</p>

That's it! If you're curious, copy and paste that into a document and open it in your browser. What did you see? The text is blue now! Nice!

So, what's going on here? We surrounded our text content with a paragraph element and gave that paragraph element a style attribute. Notice the style= in the opening <p> tag. In the attribute's value, we assigned the color style to a value of blue: "color: blue;".

Now, this is cool, but what if we wanted to center the text on the page?

<p style="color: blue; text-align: center;">This text is blue and centered!</p>

All we had to change was the value in the style attribute! Powerful! But what's happening in that value attribute? We haven't seen that syntax before! That's CSS! But wait, why is it here if we're writing HTML?

We are! But HTML isn't designed for styling; it's designed for structure and semantics (which we'll cover in a later post). If we want to change the appearance of the page, we have to modify the stylesheet. By default, our browser decides how to interpret the information in our HTML using what's called the "user agent stylesheet." The font sizes and colors you've seen up to this point have been based on that! When we add CSS to our style attribute, the styles we've defined will override the user agent stylesheet, and any styles we haven't defined will fall back to that sheet. CSS stands for Cascading Style Sheets, and that's why!

This is great. Now that we can change the look of our page, the possibilities are endless. But imagine if we wanted to get more custom:

<h1 style="font-size: 36px; 
    font-weight: 500; 
    text-align: center;
    text-decoration: underline;
    padding-bottom: 16px;
    color: #b0b1b2;
    opacity: 0.7;">Welcome to My Website!</h1>
<p style="font-size: 16px;
    font-weight: 300;
    text-align: left;
    padding-left: 100px;
    background-color: yellow;">I hope you're having a great day!</p>

Wow… that's a lot of code for just two lines of text… and it's so hard to quickly see what's going on! This is a problem because if you were to try and come back to edit this information later, it would take you much longer than if it looked like this:

<h1>Welcome to My Website</h1>
<p>I hope you're having a great day!</p>

How can we solve this problem?

Introducing CSS

To keep our HTML from getting cluttered, we move all of our styling into a .css file! For small projects, we typically call this style.css. Beyond just tidying up our code, moving styles into a new file also fulfills a programming concept called separation of concerns. This means that we want our code to be segmented into its functional components. Our code shouldn't try to do everything but rather be broken down into smaller pieces that do one thing well!

In this example, instead of having one file that structures our content and styles it, we have two files: one that structures, and one that styles. Concerns separated! So, what might this look like?

h1 {
  font-size: 36px; 
  font-weight: 500; 
  text-align: center;
  text-decoration: underline;
  padding-bottom: 16px;
  color: #b0b1b2;
  opacity: 0.7;
}

p {
  font-size: 16px;
  font-weight: 300;
  text-align: left;
  padding-left: 100px;
  background-color: yellow;
}

Ah, much better! Now, our HTML file isn’t cluttered with all of this styling! What you see above are two CSS rulesets. A ruleset consists of a selector and two curly brackets that contain all the information about how to style the selector. In this example, the two selectors we see are h1 and p. This means that all the styles listed here will be applied to any HTML <h1> or <p> element, respectively!

We can do this for any type of element! In fact, there are many ways that we can select objects with CSS Selectors, but we'll save that for another week. For now, just know that if you type in the type of element, you can add styles within the curly braces!

We’ve defined some styles, but how do we make sure our browser knows which file to apply them to?

The Link Element

The first <head> element we will learn is the <link> element. There are a few use cases for it, but for our purposes, we will use it to link our style.css to our index.html. In other words, this element tells our browser which stylesheet to use for the page. In practice, it will look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <link href="./style.css" rel="stylesheet"/>
  </head>
  <body>
    ...
  </body>
</html>

And that’s it! Our style.css is linked to our HTML document, and the styles will be applied.

Let’s break down this link element. First, it is a self-closing element, so we don’t need a closing tag, and it doesn’t take any content inside. There are two required attributes for this element: href and rel. These are required because the <link> element links external resources to the HTML document. So, we need to tell our browser 1) where that resource is and 2) what that resource is to be used for. The href, which stands for "hypertext reference," determines the where, while rel, or relationship, determines the use!

It's important to note that with the href attribute, the path you provide can be either absolute or relative. This means you can give the location of a file path from the root directory, e.g., /Users/username/Documents/project/style.css (absolute). Or you can do it relative to the location of the file you are working on, as done above. The ./ before the file name indicates that the browser should look in the same folder (or directory) as the HTML file for style.css. You could also add a URL here; many content delivery networks allow you to use pre-made stylesheets, which you will connect using the <link> element too!

Challenge

Alright, we've covered a lot today. Now it's time to put it into practice. Take the About Me page you made in last week's challenge and <link> it to a new file called style.css. (Make sure you put it in the same folder as your HTML file!)

Then, create styles for each of your elements. Play around with the different styles you can assign until your About Me page looks more presentable! (Note: You can also target the <html> and <body> elements!)

For a complete list of the styles you can apply, check out the Mozilla Developer Network. They host complete documentation for web development languages: HTML, CSS, and JS! Here’s a link to their site. Use the list of properties under "Reference" in the sidebar to see what's possible!

See you next week!