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

Internal CSS

Learn how to write CSS inside an HTML document using the style element.

What is Internal CSS?

Internal CSS is CSS written inside a <style> element in the <head> section of an HTML page.

It is useful when one HTML page needs its own collection of CSS styles.

Internal CSS Diagram

HTML Page index.html

→

<style> CSS Rules

→

Browser Styled Page

Basic Structure

<html>
<head>

    <style>

        p {
            color: blue;
        }

    </style>

</head>

<body>

    <p>Hello CSS</p>

</body>
</html>

The <style> element contains the CSS rules used to style the HTML elements.

Example 1: Style a Heading

Code

<style>

    h1 {
        color: blue;
        font-size: 30px;
    }

</style>

<h1>
    Welcome CIIT Student 👨‍🏫👀.
</h1>

Simple Explanation

The h1 selector selects the heading. The CSS changes its color to blue and its font size to 30px.

Output

Example Page

Welcome CIIT Student 👨‍🏫👀.

Example 2: Style Multiple Elements

Code

<style>

    h1 {
        color: blue;
    }

    p {
        color: green;
        font-size: 18px;
    }

</style>

<h1>
    CSS Tutorial
</h1>

<p>
    Learn Student CIIT Institute 👀🤓.
</p>

Simple Explanation

Internal CSS can contain multiple CSS rules. Each selector can style a different HTML element.

Output

Example Page

CSS Tutorial

Learn Student CIIT Institute 👀🤓.

Example 3: Change Background Color

Code

<style>

    body {
        background-color: lightgray;
    }

</style>

<h1>
    CSS Background
</h1>

Simple Explanation

The background-color property changes the background color.

Output

Example Page

CSS Background

Where is Internal CSS Written?

Internal CSS is normally written inside the <head> section of the HTML document.

<head>

    <style>

        body {
            background-color: lightgray;
        }

    </style>

</head>

Advantages of Internal CSS

Easy to use for a single HTML page.
Page-specific CSS can stay in one place.
No separate CSS file is required.

Limitations of Internal CSS

Styles cannot be easily shared across many pages.
Large HTML files can become difficult to maintain.
Reusing the same styles across multiple pages is harder.

Remember:

Internal CSS is written inside the <style> element, usually inside the <head> section.

Summary

Internal CSS is written inside the <style> element of an HTML document. It allows multiple CSS rules to style elements on the same page.