Intro to Text: elements and styling

Build a Blog Site: This is the sixth part of the Build a Blog Site tutorial series.
The focus of this tutorial is on Text elements and styling.

Simulate Bootstrap: In this tutorial series we are mimicking Bootstrap classes, using the same Bootstrap class names, and applying the same or similar style but with less complex style rules.

Finished Code: The code is available on GitHub: github.com/LearnByCheating/learn-html-blog-site-example. There is a separate version with the finished code for each tutorial.

Live Server: If you are using VS Code as your text editor and have the Live Server extension installed, you can launch a local web server from the Editor.

• Close any prior Live Server sessions by right-clicking in the editor, then select Stop Live Server.
• If you are using the code from the GitHub link above, go to the .vscode/settings.json file and change the liveServer.settings.root value to the appropriate version: "liveServer.settings.root": "/v6-text" 
• Right click in the html page and select "Open with Live Server". 

Written and Video tutorial: There are both a video and written version of each tutorial. For the HTML-CSS tutorial series the video and written versions have a different focus. The video tutorials are focused on the blog site project. The written tutorial is focused on the all the subtopics within the CheatSheet major topic.

CheatSheet: Part of the objective of this tutorial series is to become familiar with the CheatSheet so you can use it for quick reference going forward. As such, it is recommended that you review the CheatSheet category that aligns with this tutorial.

---

Add style rules to the Blog Site stylesheet

Body tag

Let's start with the body tag. 

stylesheets/styles.css

body {
  color: #212529;
  line-height: 1.5;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

You can set a number of basic CSS properties in the body tag to have them apply to the whole web page. That includes changing the font-size, font-family, color, background-color, line-height, etc. 

Color

• color: The default color for text is black. Bootstrap's text color is more of a charcoal color. Since we are mimicking Bootstrap, let's set the text color for the site to #212529.
• background-color: The default background color is white, and that's what Bootstrap uses as well, so we'll leave background-color unchanged.

Line-height is the height of the line within the same element, such as within a paragraph element. You multiply the line-height property value by the font size.

• A line height of 1 means each line is the same height as the font size leaving no additional space between lines. 
• The default line-height property value is the keyword "normal", which varies somewhat depending on the font family, but is generally around 1.2. That means each line is 20% higher than the font size. 
• To make the lines double-spaced you would change the line height to 2. 
• Bootstrap uses a line-height of 1.5 so we'll use that. The increased line-height makes it easier for people with poor eye sight to read. 

p tag

We'll remove the top margin from the paragraph elements and set the bottom margin to 1rem.

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

h1-h6 heading tags

We'll add some properties to all heading elements including:

• Set top margin to 0 and bottom margin to .5rem. 
• Change the font weight from the default 700 (bold) to 500. Normal font weight is 400.
• Set line-height to 1.2. 

Then for each heading tag, we'll set a font-size that changes depending on the screen size, making it responsive. The default font-size is listed to the right in a comment for reference. 

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}
h1 {font-size: calc(1.375rem + 1.5vw)} /* default: 2em; margin: .67em 0px; */
h2 {font-size: calc(1.325rem + .9vw)} /* default: 2em; margin: .83em 0px; */
h3 {font-size: calc(1.3rem + .6vw)} /* default: 1.17em; margin: 1em 0px; */
h4 {font-size: calc(1.275rem + .3vw)} /* default: 1em; margin: 1.33em 0px; */
h5 {font-size: 1.25rem; } /* default: .83em; margin: 1.67em 0px; */
h6 {font-size: 1rem; } /* default: .67em; margin: 2.33em 0px; */

Text Utility Classes

Now we'll create some utility classes that you can use on any element.
We'll mimic some of the Bootstrap text utility classes
Bootstrap documentation on text styling is at: getbootstrap.com/docs > click Content: typography and Utilities: text

Line-height utility classes

The below classes will set the line-height of the element.

.lh-1 { line-height: 1; }
.lh-sm { line-height: 1.25; }
.lh-base { line-height: 1.5; }
.lh-lg { line-height: 2; }

Example: to make a paragraph use double space line-height add class lh-lg:
<p class="lh-lg">Text here</p>

Font-size utility classes

The below classes use the same font-size as the h1-h6 headings without using those tags. 

.fs-1 { font-size: calc(1.375rem + 1.5vw)!important; } /* 22px + 1.5% width */
.fs-2 { font-size: calc(1.325rem + .9vw)!important; } /* 21.2px + .9% width */
.fs-3 { font-size: calc(1.3rem + .6vw)!important; } /* 20.8px + .6% width */
.fs-4 { font-size: calc(1.275rem + .3vw)!important; } /* 20.4px + .3% width */
.fs-5 { font-size: 1.25rem!important; } /* 20px */
.fs-6 { font-size: 1rem!important; } /* 16px */

Example: display text in a div element using the same text size as an h1 element:

<div class="fs-1">Big text</div> 

Alignment

.text-center { text-align: center; } 
.text-start { text-align: start; } /* Aligns text to the left */
.text-end { text-align: end; } /* Aligns text to the right */

Example: center the text in an h1 element.

<h1 class="text-center">Center Me</h1>

Font-weight, font-style, text-decoration

The b, strong, italic, em, or u tags display their text content as bold, italic, or underlined. 
These tags convey semantic meaning as well as displaying the content in a certain way. 
To display content as bold, italic or underlined without the semantic meaning of those tags, you can use the below classes. 

.fw-bold { font-weight: bold; }
.fst-italic { font-style: italic; }
.text-decoration-underline { text-decoration: underline; }
.text-decoration-none { text-decoration: none; }

Example: style a span element to be bold, italic and underlined:

<span class="fw-bold fst-italic text-decoration-underline">Style me</span>

Add class to the index.html file

Let's apply one of these utility classes in the index.html file.
Change the below h1 element to include the fst-italic class.
This will display the hightlighted article title as italic.

index.html

...
<h1 class="mt-0 fst-italic">Highlighted Article title 1</h1>
...

View the changes

Save the changes to the stylesheet and the index.html file, then view the result in the browser:
http://localhost:5500

To see if the display looks the same when using the Bootstrap CDN:

• Comment out the local stylesheets/styles.css.
• Uncomment the Bootstrap CDN link.
• Refresh the page. It should look identical. 
• Now switch it back. Comment out the Bootstrap CDN and uncomment the local stylesheet.