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 propertyfont-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>
to100%
; which is inherited from the body. The default font-size is generally equal to16px
. - Then, the
<h1>
is sized to150%
, which multiplies the inherited value, resulting in a size of24px
. - If the user sets her default font size to
30px
the<h1>
will automatically compensate and enlarge to45px
.
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 thebody
selector and give it a value of100%
.body { font-family: Verdana, sans-serif; font-size: 100%; }
-
Make the
<h1>
element 1.5 times larger than the inherited body size by using1.5em
. (Note: you may have a differentfont-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 thefont-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 thefont-family
,font-style
, andcolor
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
Selectorsclass
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 theh1
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.