COURSE SYLLABUS

1. Introduction to CSS

Introduction to CSS How CSS Works CSS vs HTML Adding CSS

2. CSS Basics

CSS Basics CSS Syntax Inline CSS Internal CSS External CSS CSS Comments

3. CSS Selectors

CSS Selectors Element Selector Class Selector ID Selector Attribute Selector Descendant Selector Child Selector Pseudo-Class Selector Pseudo-Element Selector

4. Colors & Backgrounds

Colors & Backgrounds Color Values Background Color Background Image Background Repeat Background Attachment Multiple Backgrounds

5. Text & Fonts

Text & Fonts Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow Font Family Font Size Font Style Font Weight Web Fonts

6. CSS Box Model

CSS Box Model Width & Height Padding Margin Border Border Radius Box Sizing Box Shadow Overflow

7. Flexbox

Flexbox Flex Container Flex Direction Flex Wrap Justify Content Align Items Align Content Gap Flex Items Order Flex Grow Flex Shrink Flex Basis

8. CSS Grid

CSS Grid Grid Container Grid Rows & Columns Grid Template Columns Grid Template Rows Grid Gap Grid Column Grid Row Grid Area Grid Alignment Responsive Grid

9. Responsive Design

Responsive Design Responsive Web Design Viewport Media Queries Breakpoints Mobile First Responsive Images Responsive Typography

10. Advanced CSS

Advanced CSS CSS Pseudo-Classes CSS Pseudo-Elements CSS Transforms CSS Transitions CSS Animations CSS Variables CSS Functions CSS Specificity CSS Best Practices

Font Family

The font-family property is used to specify the typeface used for text on a web page.

You can specify one font family or provide multiple fallback fonts in case the preferred font is not available.

How Font Family Works

HTML Text

→

font-family

→

Selected Font

Example 1: Arial Font

The Arial font can be applied using the font-family property.

CSS Code

h2 {
    font-family: Arial;
}

Output

Welcome to CIIT Training Institute

Example 2: Georgia Font

The Georgia font gives text a serif-style appearance.

CSS Code

p {
    font-family: Georgia;
}

Output

Learn CSS at CIIT Training Institute.

Example 3: Multiple Font Families

Multiple fonts can be specified as fallback options. The browser uses the first available font.

CSS Code

p {
    font-family: Arial, Helvetica, sans-serif;
}

Output

CIIT Training Institute - Learn. Practice. Grow.

Example 4: Sans-Serif Font

A generic font family such as sans-serif can be used as a final fallback.

CSS Code

p {
    font-family: sans-serif;
}

Output

Welcome to CIIT Training Institute

Common Font Families

Font Family	Type
`Arial`	Sans-serif
`Georgia`	Serif
`"Times New Roman"`	Serif
`Verdana`	Sans-serif
`sans-serif`	Generic sans-serif family
`serif`	Generic serif family

Simple Explanation

font-family: Arial; → Uses Arial for the text.

font-family: Georgia; → Uses Georgia for the text.

Arial, Helvetica, sans-serif → Provides fallback font choices.

The browser uses the first available font from the specified list.

Summary

The font-family property specifies the typeface used for text. You can define a single font or provide multiple fallback fonts to ensure consistent text rendering.

← Previous: Text Shadow

Next: Font Size →