Learning to Code: Day 5 — Introduction to CSS Part 2

Evening folks, hope you are all well and yesterday’s post didn’t get too confusing. I read it over several times after to try and make sense of it and that I hadn’t made any mistakes. If I have please feel free to correct me! I’ve just cooked a lovely curry and got comfy in a space where I am concentrated and ready to go. So let’s continue from yesterday with the lessons from FreeCodeCamp.

—

Change the Font Size of an Element

Much like the CSS blue-text class declaration from yesterday, we’re going to create a CSS selector which adds a font-size property and applies it to all paragraphs within the style tag. In this code example, the paragraph affected will change it’s font size value to 16 pixels (shortened to px in the code). Looks like this:

<style>

p {

font-size: 16px;

}

</style>

Set the Font Family of an Element

So you write out something in an essay and then you want to change the font, so you select the drop-down menu and see all the fonts. This is called the font-family property in this respect, which we can use to indicate a font to any element in the code, h1, h2, p and so on. This code tells all paragraphs to change their font to monospace:

p {

font-family: monospace;

}

Note: Remember that we have stated here “p” which is an HTML class declaration and thus all p lines will be affected by this HTML keyword. If it was a CSS class keyword then we would have to specify a destination for that keyword as it isn’t linked automatically to any HTML keyword. For example typing “.blue-text” (CSS selector) isn’t going to be written previously anywhere in HTML as it’s another language, so you’d have to manually link it later on inside that given line you’d want to affect. I know I explained this terribly but as you go on and practise playing about with the code in an editor I think you’ll see what I mean.

Importing a Google Font

We are going to use a font from the Google Font Library, which is a non-standard custom web font, as there are many others on the internet. We have to import the link of any given font first before the style tags by opening a self-enclosing link tag with a hyperlink reference (href, the URL), specify the link relation (rel, the descriptive attribute) and the type (which defines the type of link). We’re going to import the ‘Lobster’ font (case-sensitive!) from the Google Font Library in the href part. Looks like this:

<link href=”https://fonts.googleapis.com/css?family=Lobster" rel=”stylesheet” type=”text/css”>

Then we can apply the family-name value “Lobster” after the font-family property. We’re going to affect all h2 elements next.

Note: Family names are case-sensitive and need to be wrapped in quotation marks if there is a space in the name, best to just use quotations whenever you type in a family name:

h2 {

font-family: “Lobster”;

}

Specifying how Fonts should Degrade

In the event that the font doesn’t work for whatever reason, we want to specify a second default font for the code to fall back on, like a plan B option. Default fonts on all browsers include monospace, serif and sans-serif for example. They are then written after the first family-name as the commands are worked chronologically though the code. When the first name fails, the second is taken into action, you are telling the browser to “degrade” to the second font. Let’s take Helvetica for example with a default second option of sans-serif and apply it to the p element (example provided by FreeCodeCamp):

p {
  font-family: Helvetica, sans-serif;
}

If the Helvetica isn’t already imported previously, then the browser will “degrade” to the second option, sans-serif, and appear so in the console/browser.

Note: Generic font names are not case-sensitive and do not require quotations as they are CSS keywords.

Change the Image Size

Okay, I’ve been waiting for this. We are going to do a very basic re-sizing of an image in the console that is already specified. I’ve seen coding examples online with complicated size dimensions like “width” etc and always wanted to know how they translate in the code. We can create a CSS selector within the style tags like “.larger-image” or “.smaller-image” and then indicate the width to a specific pixel (px) size (example provided by FreeCodeCamp):

<style>
  .larger-image {
    width: 500px;
  }
</style>

We will then have to add class=”larger-image” to the HTML img we want to affect so that the CSS selector (.larger-image) can be implemented.

—

Aaaaand that’s a good place to end. Phew! Hope you had fun learning about the very basics of fonts and resizing in HTML using CSS. These measures are obviously very simple but you can imagine the implications taking this forward. I hope you all enjoyed this part and I’ll see you tomorrow for more! Thanks.