Week 8 Learn & Practice - Text

Textbook

Chapter 12: Formatting Text

Image Source: These Simple CSS Tricks Will Take Your Website to the Next Level

One of the first things to tackle when you're working on styling your website is the font style. These include things like typeface, size, weight, and style.

The `font-family` Property

The font-family property takes a stack of fonts. We don't have complete control over which font our browser will be able to display.

p {font-family: "Times New Roman", Times, serif;}

First the browser attempts to render the text in Times New Roman
If that Times New Roman is unavailable, then it will try Times
If Times is not available, it finds any serif font to use.

Generic Font Families

Serif: Have decorative appendages on the ends of certain letters.
Sans-serif: Straight letter strokes.
Monospace: Each character takes up the same amount of space.
Cursive: Cursive fonts that emulate a script.
Fantasy: developers rarely use these as they don't provide extensive support across browsers and can be challenging to read.

Font Stacks

The best practice for specifying fonts for web pages is to start with your first choice, provide some similar alternatives, and then end with a generic font family that at least gets users in the right stylistic ballpark.

For example, if you want an upright, sans-serif font, you might start with your favorite font (Futura), list a few that are more common (Univers, Tahoma, Geneva), and finish with the generic sans-serif
There is no limit to the number of fonts you can include, but many designers strive to keep it under 10 (5-6 is typical).
A good font stack should include stylistically related fonts that are installed on most computers.
W3Schools: Common Font Stacks

Download the week08Demo_part01_text files and open the website in your browser and VS Code.
In the menu.css add a style to the <body> element for the property font-family with a value ofVerdana, sans-serif.
```
body {font-family: Verdana, sans-serif;}
```
Because of Inheritance, this font property cascades down the DOM and is applied to every text element!
Choose a serif font-family to apply to the <h1> element.

The `font-size` Property

You can specify text size in several ways:

Percent Value
Unit of measurement
Absolute keyword (rarely used)
Relative keyword (rarely used)

font-size: 40%; /* Percent value */
font-size: 1.2em; /* Unit of measurement (em) */
font-size: x-large; /* Absolute keyword */
font-size: larger; /* Relative keyword */

EM and Percent

The em unit of measurement and percent values are frequently used among developers as they work best with responsive design.

Units of Measurement

There are two categories of measurement, Absolute and Relative.

Absolute Units

Absolute measurements are predefined, meaning they have real-world equivalents.

Unit	Description
cm	Centimeters
mm	millimeters
in	Relative to width of the "0" (zero)
px*	inches (1in = 96px = 2.54cm)
pt	points (1pt = 1/72 of 1in)
pc	picas (1pc = 12 pt)

* Pixels (px) can vary depending on screen resolution.

PX Unit of Measurement

Pixels px are an absolute unit of measurement for the most part. They can vary in size depending on the resolution of the screen. They offer more precise control over the size of the text. However, developers find this too rigid along with the other absolute units of measurement.

Relative Units

Relative measurements are based on the size of something else, such as default text size or a parent element.

Unit	Description
em	Relative to the font-size of the element (2em means 2 times the size of the current font)
ex	Relative to the x-height of the current font (rarely used)
ch	Relative to width of the "0" (zero)
rem	Relative to font-size of the root element
vw	Relative to 1% of the width of the viewport
vh	Relative to 1% of the height of the viewport
vmin	Relative to 1% of viewport's* smaller dimension
vmax	Relative to 1% of viewport's* larger dimension
%	Percentage

Percentage

Percentage is a relative unit of measurement. It sizes an element based on the element's default or inherited size.

body {font-size: 100%;}
h1 {font-size: 150%;}

How relative units of measurements work.

The above example sizes the <h1> to 100%; which is inherited from the body. The default font-size is generally equal to 16px.
Then, the <h1> is sized to 150%, which multiplies the inherited value, resulting in a size of 24px.
If the user sets her default font size to 30px the <h1> will automatically compensate and enlarge to 45px.

EM Unit of Measurement

The em is a relative unit of measurement that bases the size of the element on its inherited or default size (like percentage). The name is based on the width of the capital letter M.

The following example will result in an <h1> of 24px if the default font size is 16px.

body {font-size: 100%}
h1 {font-size: 1.50em;} /* no space after the number */

REM Unit of Measurement

The rem is a relative unit that bases the size of an element on the root (html) element - not the inherited size. This is becoming a popular unit to use since it eliminates the complications of inheritance in the em element. However, older browsers do not support this unit.

Percent/EM vs REM

Image Source: A deep study on CSS Units

Add the font-size property to the body selector and give it a value of 100%.

body {
    font-family: Verdana, sans-serif;
    font-size: 100%;
}

Make the <h1> element 1.5 times larger than the inherited body size by using 1.5em. (Note: you may have a different font-family style than shown below)
```
h1 {
    font-family: "Marko One", Georgia, serif;
    font-size: 1.5em;
}
```
Size the <h2> elements to be the default size.
```
h2 {font-size: 1em;}
```

The `font-weight` Property

To change the weight of text, you can use keywords like normal, bold, bolder, and lighter. You can also specify numeric values from 100 to 900. Typically, the only value you will use is bold.

Change all the menu item names to bold using the font-weight property.
```
dt {font-weight: bold;}
```

Question!

Why would I use CSS here instead of the HTML <strong>or <b> element?

The `font-style` property

The font-style is the way to make text italic or oblique. Italic fonts usually are in a separate typeface design with curved letters, where oblique text takes the normal text font and slants it. (In some browsers, there is no difference.)

Make the text "- new item!" and "Very spicy." italic. This text is all wrapped in a <strong> tags, so we can use the strong element selector.
```
strong {font-style: italic;}
```

The `font-variant` Property

The font-variant property can change some fonts to be in small caps

p {font-variant: small-caps;}

The `font` Shortcut

Since there are so many properties that can be used for fonts, the creators of CSS made a handy shortcut so you can use one rule to style many properties. You can list all the values below separated by spaces.

The order matters!

font: style   weight   variant   size/line-height   font-family;

For example:

h1 {font: oblique bold small-caps 1.5em/1.8em sans-serif;}

You can at a minimum specify just the font size and font-family (in this order)

h1 {font: 1em sans-serif;}

Change the styles for <h1> selector to use the font shortcut.

Descendant Selectors

So far, we have just been using element selectors in our stylesheet. he Descendant Selector targets element that are contained within (and therefore are descendants of) another element.

Look at our website, how can we change the color of the "- new item!" text? Using the strong selector? Using the strong selector will also change the color of the "Very spicy." text. I need another way.

Since the "- new item!" text is a descendent of the <dt> element, I can use this to my advantage.

Use the descendent selector to target just the <strong> elements contained in <dt> elements.

dt strong {color: maroon;}

No commas are used for descendent selectors
A character space between element names means that the second element must be contained within the first element.

`id` Selectors

We can use the id attribute in our stylesheet to target certain elements. We use the pound or hash symbol # to indicate an id in our stylesheet.

Locate the id="info" attribute/value in the HTML document. This uniquely identifies the <header> element.
In the stylesheet, create an id selector to change the color using the following syntax.

#info {color: teal;}

Notice the inherited styles, the <h1>,<p>, and <span> element all inherited the color.
An id attribute value cannot start with number

`class` Selectors

Recall the class attribute? We can also use these in our stylesheet. Instead of using a # symbol, we use the . period.

A class attribute value cannot start with number.

id vs. class attribute

What's the difference between id and class attributes?

Using the price class attribute in your stylesheet, change the font-family, font-style, and color as follows:
```
.price {
    font-family: Georgia, serif;
    font-style: italic;
    color: grey;
}
```
You don't need to specify the element before the period if your class attribute is targeting all elements. However if you only wanted to target specific elements that contain the attribute .price, then you would add the element name before the period.
Use the label class attribute to change the styles of the Hours information. Use any styles of your choosing.
Change the warning at the bottom of the page to a smaller font size and make it red. There are multiple ways to accomplish this.

CSS Specificity

Recall our last lecture when we talked about how CSS has rules to follow to determine which style to apply when there are conflicts? With the new selectors we've learned, we need to review how they play in the specificity ruling.

header span {color: blue;}
span.label {color: magenta;}

Most Specific to Least Specific Selectors

id Selectors
class Selectors
Contextual Selectors (Descendent)
Element Selectors

Given the code below, what color will the <h1> be? If you are unsure, try these out for yourself.

h1 {color: red;}
header h1 {color: blue;}

How about now?

h1 {color: red;}
h1#title {color: green;}
header h1 {color: blue;}

Last one. What color will the <span> element be?

header span {color: blue;}
span.label {color: magenta;}

Other Text Properties

`text-align`

Let's center our <header> and <h2> elements. How can we do this with just one CSS rule?
```
header, h2 {text-align: center;}
```

We've looked at this property before. It centers the text inside a block-level element.

text-align and inline elements

The text-align property will not work for inline elements. Why would this be?

The text-align property also can take the values of: left, right, and justify

`line-height`

Add the line-height to the body selector, otherwise known as leading; this is the space between each line of text.

body {
    font-family: Verdana, sans-serif;
    font-size: 100%;
    line-height: 1.7em;
}

`text-shadow`

Add a text-shadow to the h1 selector. This property takes a few values:

text-shadow: x-position y-position blur color;

h1 {
    font-family: Georgia, serif;
    font-size: 1.5em;
    text-shadow: .2em .2em .5em grey;
}

More to Know!

There are more text-properties in your textbook, so be sure to read Chapter 12 as you will need some of the other properties mentioned for the project.