Link Search Menu Expand Document
HTML&CSS

CSS Text Formatting

Class Agenda

  1. CSS Descendant selector
  2. CSS Comments
  3. CSS Basic Colors
  4. Formatting Text with CSS
  5. CSS Fonts

1. CSS Descendant selector

This section will teach how to match descendant elements by using the CSS Descendant Selector.

ETA: 10mins

2. CSS Comments

Just like we can add HTML comments to our html files we can also add CSS comments to our CSS code. This section will cover how to do that.

ETA: 10mins

3. CSS Basic Colors

This section will cover some basic CSS colors using the standard color names (e.g. Tomato, Azure, DodgerBlue, etc.). It will also practice the usage of those color names together with the following CSS Rules, which students will learn:

  • Background Color
  • Text Color
  • Border Color (keep in mind that this only covers the border color without the border style and sizes. We can use 2px solid without going into details)

ETA: 20 mins

4. Formatting Text with CSS

We have learned how to apply basic text formatting on a website by using some HTML text formatting tags. However, most of the text formatting is done via abundant CSS text formatting rules. Therefore, this section will cover some of those CSS rules including:

  • Text Alignment (text-align)
  • Text Direction
  • Vertical Alignment
  • Text Shadow (beware: don’t overuse text shadows on your websites)
  • Text Decoration
  • Text Indentation

ETA: 30 mins (Students should have enough time to practice)

5. CSS Fonts

A crucial role on all websites plays the font. It can give a totally different look and feel on your website. This section covers:

  • What are the different generic font families?
  • What are the Web Safe Fonts?
  • Why is it important to have fallback fonts?
  • What is the CSS font-style rule doing?
  • How can we inspect which font-family is used on a page?

ETA: 30 mins

Exercise Description

Exercises should be done along with the content of the lecture. After completing the Tasks, you should have content similar to checkpoint8. Checkpoint 8 adds the following things on top of Checkpoint 7:

  • Applying font on the page
  • Text aligning the content of the footer
  • Adding a dedicated class for our <a> tags which are placed withing the navigation via a descendant selector. Also applying text-decoration and color css rules
  • Applying a CSS comment on the nav a selector
  • Adding basic border coloring on the section
  • Adding text indentation to our section paragraphs
  • Adding text shadow in our #greeting element

Glossary & Terminology

  • Ancestor Element - An ancestor refers to any element that is connected to another element in the HTML Tree but is placed further up the document tree - no matter how many levels higher. Check out this guide.
  • Descendant Element - A descendant refers to any element that is connected to another element in the HTML Tree but is placed lower down the document tree - no matter how many levels lower. Check out this guide.

Homework

  • Read more about different web font families here. Get to know what the different companies are using
  • Make sure to use your own image / photo on your websites
  • (Optional) Check out the nice CSS tricks with text shadow

Resources