Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

Fonts Family

Font Selection is Important

Opting for the appropriate font significantly influences the user experience of a website.

A suitable font can establish a distinct brand identity.

Prioritizing legibility in font selection is crucial, as it enhances the value of your content. Additionally, selecting the right color and text size complements the chosen font.

Generic Font Families

CSS categorizes fonts into five generic font families:

Serif fonts exhibit small strokes at the edges of each letter, conveying a sense of formality and elegance.
Sans-serif fonts feature clean lines without any small strokes, offering a modern and minimalist appearance.
Monospace fonts present all letters with the same fixed width, creating a mechanical aesthetic.
Cursive fonts replicate human handwriting.
Fantasy fonts encompass decorative and playful styles.

Each font name falls under one of these generic font families.

Difference Between Serif and Sans-serif Fonts

Serif vs. Sans-serif

Note: Sans-serif fonts are generally regarded as more readable on computer screens compared to serif fonts.

Some Font Examples

Generic Font Family	Examples of Font Names
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

The CSS font-family Property

In CSS, the font-family property is utilized to designate the font for text.

Note: When the font name consists of more than one word, it must be enclosed in quotation marks, such as: “Times New Roman”.

Tip: For the font-family property, it’s advisable to include multiple font names as a “fallback” system to enhance compatibility across various browsers and operating systems. Begin with the desired font and conclude with a generic family, allowing the browser to select a similar font from the generic family if the specified fonts are unavailable. Separate font names with commas. Further details on fallback fonts are covered in the following chapter.

Example

Designate various fonts for three paragraphs.

.p1 {
font-family: “Times New Roman”, Times, serif;
}

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

.p3 {
font-family: “Lucida Console”, “Courier New”, monospace;
}