web_design:letter:headings
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
web_design:letter:headings [2021/10/05 16:40] mag |
web_design:letter:headings [2023/08/16 09:33] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Web Development ====== | ====== Web Development ====== | ||
| ===== Lesson 2 - Letter ===== | ===== Lesson 2 - Letter ===== | ||
| - | ==== Headings ==== | + | ===== Headings |
| We'll continue to use the code you've been working on in [[https:// | We'll continue to use the code you've been working on in [[https:// | ||
| - | <code>< | + | < |
| <p style=" | <p style=" | ||
| < | < | ||
| Line 13: | Line 13: | ||
| <p>Me encuentro en alta disposición para conversar con ustedes más ampliamente. Espero su llamado para una entrevista y conocernos mejor.</ | <p>Me encuentro en alta disposición para conversar con ustedes más ampliamente. Espero su llamado para una entrevista y conocernos mejor.</ | ||
| < | < | ||
| - | <p>Jane</ | + | <p>Murray</ |
| - | * Headings can also be defined using html tags. Let' | + | * Headings can also be defined using html tags. Let' |
| < | < | ||
| - | * Notice that the text became | + | * Notice that the text is much bigger and heavier, as you'd expect from a heading. |
| * There are 6 levels of heading from < | * There are 6 levels of heading from < | ||
| + | |||
| + | ==== Font-family ==== | ||
| + | |||
| * Let's make some changes to the heading style. | * Let's make some changes to the heading style. | ||
| * Change the font by adding a font-family style attribute. | * Change the font by adding a font-family style attribute. | ||
| Line 24: | Line 27: | ||
| * Now make it green. | * Now make it green. | ||
| < | < | ||
| + | |||
| + | ==== Font-size ==== | ||
| + | |||
| * Next, let's make it smaller. | * Next, let's make it smaller. | ||
| < | < | ||
| * The < | * The < | ||
| + | |||
| + | ==== Underline ==== | ||
| + | |||
| * Let's underline the heading. | * Let's underline the heading. | ||
| < | < | ||
| + | |||
| + | ==== Changing Case ==== | ||
| + | |||
| * Let's make it all upper case. | * Let's make it all upper case. | ||
| < | < | ||
| * Here's a different style that looks great in headings. Notice that you need to delete < | * Here's a different style that looks great in headings. Notice that you need to delete < | ||
| < | < | ||
| + | |||
| + | ==== Line Height ==== | ||
| + | |||
| * We can also change the height of the line. | * We can also change the height of the line. | ||
| < | < | ||
| * Did you notice the extra space above the heading now? That's because the line height is bigger than before. | * Did you notice the extra space above the heading now? That's because the line height is bigger than before. | ||
| + | |||
| + | ==== Shadow ==== | ||
| + | |||
| * Finally, let's add some shadow to the heading. | * Finally, let's add some shadow to the heading. | ||
| < | < | ||
| * See how you can string many style attributes together? | * See how you can string many style attributes together? | ||
| - | * This is handy if you want to change the style of one element, but becomes cumbersome if, for example, you want to change the style of all paragraphs in your letter. For that, we'll use CSS, which we'll cover in [[web_design: | + | * This is handy if you want to change the style of one element, but becomes cumbersome if, for example, you want to change the style of all paragraphs in your letter. For that, we'll use CSS, which we'll cover in Lesson 3. |
| * All the style attributes we've used in this lesson can be used in CSS. | * All the style attributes we've used in this lesson can be used in CSS. | ||
| [[web_design: | [[web_design: | ||
web_design/letter/headings.1633477224.txt.gz · Last modified: 2023/08/16 09:33 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
