Today's soundtrack is Buddy Guy: The Blues is Alive and Well.
This morning, I'm continuing with the lessons on freeCodeCamp; today, I'll be learning more about CSS styling.
I've already learned how to use CSS style classes to modify the colour of a piece of text; now, I'll be learning how to use CSS to modify the font of my HTML document.
To modify the size of font, inside of our "style" bracket, we first write the category that we want to modify, do a left curly bracket, go down a line, write the size of the font followed by a semicolon, go down another line, and make a right curly bracket.
p {
font-size: 12px;
}
To choose an element's font family, inside of the "style" bracket, we identify the element followed by a space and a left curly bracket, go down a line, choose the font we want followed by a semicolon, and close with a right curly bracket on a third line.
p {
font-family: times-new-roman;
}
If we want to use a Google font that isn't available on typical operating systems, we can link to a font in the Google Fonts library. First, we find the font that we want, then we right-click the font's title, click "copy link address," and paste the link into the very top of our HTML page, above even the "style" section.
<link href="https://fonts.google.com/specimen/Roboto+Slab?selection.family= Roboto+Slab" rel="stylesheet" type="text/css">
After that, in the style section, we can attach that font as normal to a desired element.
h1 {
font-family: "Roboto Slab";
}
In case the font isn't available to a certain browser, we can choose the font that the browser will degrade to. In the style section, after we list the primary font we want, we add a comma, then include the secondary font that the browser will revert to if the first isn't available.
h1 {
font-family: "Roboto Slab", Times;
}
That's it for today. Next time, I'll learn how to use CSS to modify images.