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 Style

The font-style property is used to specify the style of text.

Common values include normal, italic, and oblique.

How Font Style Works

HTML Text

→

font-style

→

Styled Text

Example 1: Normal

The normal value displays text in its regular style.

CSS Code

p {
    font-style: normal;
}

Output

Welcome to CIIT Training Institute

Example 2: Italic

The italic value displays text in an italic style.

CSS Code

p {
    font-style: italic;
}

Output

Learn CSS at CIIT Training Institute

Example 3: Oblique

The oblique value displays text in a slanted style.

CSS Code

p {
    font-style: oblique;
}

Output

CIIT Training Institute

Example 4: Different Font Styles

Different elements can use different font styles.

CSS Code

.normal-text {
    font-style: normal;
}

.italic-text {
    font-style: italic;
}

.oblique-text {
    font-style: oblique;
}

Output

Normal Text - CIIT Training Institute

Italic Text - CIIT Training Institute

Oblique Text - CIIT Training Institute

Common Font Style Values

Value	Effect
`normal`	Displays text in normal style
`italic`	Displays text in italic style
`oblique`	Displays text in a slanted style

Simple Explanation

normal → Displays regular text.

italic → Displays slanted italic text.

oblique → Displays text in an oblique style.

Summary

The font-style property controls the style of text. The main values are normal, italic, and oblique.

← Previous: Font Size

Next: Font Weight →