Exercise 2

QUICK RECAP: Remember this from the last exercise?

<body style="width: 75%; border: 5px dashed blue; margin: auto; padding: 10%" >

Think about it as summarized in this syntax:

<tagname style="property:value;">

Let’s use this simple syntax to style the page you’ve created in Lesson 1.

 

Assigning  font- attributes

1. font-style

<h1 style="font-style:normal">This is a heading</h1>

<p style="font-style:italic">This is a paragraph.</p>

<p style="font-style:oblique">This is a paragraph.</p>

You can style the way your text “stands”: either upright (normal) or slanted (italic or oblique).

If you do not include a slanted font in your font-family, you can use italic or oblique to synthesize the slant. There’s not much visible difference between italic and oblique, except for that the former is more cursive in nature and uses less horizontal spacing, while the latter is purely a sloped version of the normal font-face.

Value Description
normal Selects a font that is classified as normal within a font-family.
italic Selects a font that is classified as italic. If no italic version of the face is available, one classified as oblique is used instead. If neither is available, the style is artificially simulated.
oblique Selects a font that is classified as oblique. If no oblique version of the face is available, one classified as italic is used instead. If neither is available, the style is artificially simulated.
oblique <angle> Selects a font classified as oblique, and additionally specifies an angle for the slant of the text. If no oblique faces are available your font-family, the browser will synthesize an oblique version of the font by slanting a normal face by the specified amount. If an angle is not specified, an angle of 14 degrees is used. Positive values are slanted to the end of the line, while negative values are slanted towards the beginning.
 

2. font-variant

<h1 style="font-variant: none">This is a heading</h1>

<p style="font-variant: small-caps">This is a paragraph.</p>

The above examples are self-explanatory, so here’s some font-variant variants you can experiment with numerical text:

  • font-variant: no-common-ligatures proportional-nums  <--this is default

  • font-variant: common-ligatures tabular-nums

  • font-variant: small-caps slashed-zero

 

3. font-weight

<h1 style="font-weight: bold">This is a heading</h1>

<p style="font-weight: normal">This is a paragraph.</p>

<p style="font-weight: lighter">This is a paragraph.</p>

Value Description
normal Defines normal characters. This is default.
bold Defines thick characters
bolder Defines thicker characters
lighter Defines lighter characters
100, 200, 300, 400, 500, 600, 700, 800, 900 Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold
 

4. font-size

<h1 style="font-size:30px">This is a heading</h1>

<p style="font-size:12px">This is a paragraph.</p>

Value Decription
xx-small
x-small
small
medium
large
x-large
xx-large
values
Absolute-size values
smaller
larger
Relative-size values
12px
20pt
0.8em
Length values
80% Percentage values
 

5. line-height

<h1 style="line-height: 1.6">This is a heading</h1>

<p style="line-height: normal">This is a paragraph.</p>


The most common way  to define line -height is by using the unitless value. Whatever number you use is multiplied by the element's font size .

 

6. font-family

<h1 style="font-family:verdana">This is a heading</h1>

<p style="font-family:courier">This is a paragraph.</p>

While the above example is fine, it would be best to provide several fonts. Start with the font you want, and end with a generic one. By doing this, you are providing  a "fallback" system that lets the browser pick a similar font in the generic family to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font, or the next, and so on…

Here is a good start for finding fonts that are safe to use for the web:

https://www.w3schools.com/cssref/css_websafe_fonts.asp

Or just try any of these:

font-family: Times, Times New Roman, Georgia, serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-family: Lucida Console, Courier, monospace;
font-family: cursive;
font-family: fantasy;


In future lessons, we will learn more about fonts: embedding special fonts and calling Google fonts.

 

Putting them all together

Now you can apply a combination of the styles you’ve just learned. Don’t forget to separate them with a semicolon (;) !

<h1 style="font-style:normal; font-variant:none; font-weight:bold; font-size:30px; line-height:1.6; font-family:verdana">Type in your heading here</h1>

<p style="font-style:italic; font-variant: small-caps; font-weight: lighter; font-size:12px; line-height: normal; font-family:courier">Paste your paragraph here.</p>


In the examples above, you can clearly see the font- attributes you are declaring that your header and paragraph should have. If you’re feeling savvy, you can use a shortcut. It’s actually called shorthand.

Think about it as summarized in this syntax:

font: font-style | font-variant | font-weight | font-size | line-height | font-family

Some examples when applied to the paragraph tag:

  1. p { font: 12px/14px sans-serif }

  2. p { font: 80% sans-serif }

  3. p { font: x-large/110% "New Century Schoolbook", serif }

  4. p { font: bold italic large Palatino, serif }

  5. p { font: normal small-caps 120%/120% fantasy }

In the first three examples above, the 'font-style', 'font-variant' and 'font-weight' are not explicitly mentioned, which means they are all three set to their initial value ('normal').

The fourth example sets the 'font-weight' to 'bold', the 'font-style' to 'italic' and implicitly sets 'font-variant' to 'normal'.

The fifth example  sets the 'font-variant' ('small-caps'), the 'font-size' (120% of the parent's font, which we will study later), the 'line-height' (120% times the font size) and the 'font-family' ('fantasy'). It follows that the keyword 'normal' applies to the two remaining properties: 'font-style' and 'font-weight' .

IMPORTANT: If the shorthand version makes you think too much, DO NOT USE IT!

I hope this activity is helpful. Let me know if you have any questions.



~Grace

Click here to view this lesson in a downloadable / printable format.







 
Grace SteeleComment