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

Inline CSS

Learn how to apply CSS directly to an HTML element using the style attribute.

What is Inline CSS?

Inline CSS is CSS written directly inside an HTML element using the style attribute.

It is mainly used when you want to apply a specific style to one particular HTML element.

Inline CSS Diagram

HTML Element <h1>

→

style Attribute color: blue;

→

Browser Output Blue Heading

Inline CSS Syntax

<element style="property: value;">
    Content
</element>

The style attribute contains the CSS property and its value.

Example 1: Change Text Color

Code

<h1 style="color: blue;">
    Welcome to CIIT World 👀🌍..!
</h1>

Simple Explanation

Here, color is the property and blue is the value. Therefore, the heading appears in blue.

Output

Example Page

Welcome to CIIT World 👀🌍..!

Example 2: Multiple Properties

Code

<p style="color: red; font-size: 20px;">
    Learn CSS
</p>

Simple Explanation

More than one CSS property can be written inside the same style attribute.

color: red; makes the text red.
font-size: 20px; increases the text size.

Actual Browser Output

Example Page

Learn CSS

Example 3: Background Color

Code

<p style="background-color: yellow;">
    WELCOME TO CIIT TRAINING INSTITUTE 👀🤓..!
</p>

Simple Explanation

The background-color property changes the background color of the element.

Output

Example Page

WELCOME TO CIIT TRAINING INSTITUTE 👀🤓..!

When to Use Inline CSS?

For quick styling of one element.
For small demonstrations and examples.
When a style is needed only once.

Limitation of Inline CSS

Inline CSS becomes difficult to maintain when many HTML elements need the same style.

For larger websites, external CSS is usually easier to manage.

Remember:

Inline CSS is written directly inside the HTML element using the style attribute.

Summary

Inline CSS allows you to style a single HTML element directly. The CSS is written inside the style attribute using the property: value; format.