CSS Foundations and Text Styling

Getting Started With CSS

Learning Outcome

Explain cascade, inheritance, and specificity.

Use DevTools to inspect webpage styles.

Apply inline, internal, and external CSS.

Write CSS using correct syntax rules.

Understand the purpose and benefits of CSS.

Imagine you have built your dream bungalow...

The structure includes -

Windows

Walls

Doors

Rooms

Roof

Everything is structurally complete.

Now let me ask you a question...

Would you be excited to live in it if it looked like this?

Plain gray walls

No paint

No curtains

No furniture

No lighting

No decoration

Technically, the bungalow is complete.

You can enter it, live in it, and use all its rooms.

Probably not.

But...

Does it look attractive?

Does it feel welcoming?

Does it reflect your personality?

So What Happens Next?

To make the bungalow beautiful, you start adding:

Now the same bungalow looks elegant, attractive, and pleasant to live in.

Websites Work Exactly the Same Way

When we create a webpage using HTML, we build its structure.

To make the plain webpage visually appealing and attractive, we use CSS.

But HTML alone creates a very plain webpage.

What is CSS & Why Use It

CSS stands for Cascading Style Sheets.
It is used to style and design HTML webpages.

WITHOUT CSS

WITH CSS

What is CSS & Why Use It

CSS stands for Cascading Style Sheets.
It is used to style and design HTML webpages.

Controls

Fonts

Colors

Layouts

Spacing

Borders

Alignment

WITHOUT CSS

WITH CSS

Advantages of CSS

Faster Styling

Style multiple elements simultaneously with less code.

Reusable Design

Write once, apply everywhere across the website.

Cleaner HTML

Separation of concerns makes HTML readable.

Consistency

Uniform look and feel across all webpages.

Responsive

Adapt layout seamlessly to different screen sizes.

CSS Syntax

h1 { color : blue } ;

CSS Syntax

h1 { color : blue } ;

Selector - Selects the HTML element to style.

CSS Syntax

h1 { color : blue } ;

Property - Defines what style should be changed

CSS Syntax

h1 { color : blue } ;

Value - Defines the style value.

Declaration & Comments

Declaration / Declaration block

style.css

h1{

color : blue ;

font-size : 30px ;

}

A single CSS rule is called declaration.

Declaration & Comments

Declaration / Declaration block

style.css

h1{

color : blue ;

font-size : 30px ;

}

Declaration Block - Multiple declarations written inside { }.

Declaration & Comments

Declaration / Declaration block

style.css

h1{

color : blue ;

font-size : 30px ;

}

Declaration

Single rule

Declaration block

Multiple rules

CSS Comments

Comments are notes written inside CSS code.
Browser ignores comments during execution.

Syntax

/* This is a CSS comment */

Types of CSS

Inline CSS

Internal CSS

External CSS

Applied directly inside HTML elements using the style="" attribute.

Quick fixes

Single page styles

Best practice

Defined within a <style> tag inside the HTML file's <head>.

Written in a separate .css file and linked to the HTML document.

//Index.html

<style>
  h1{
    color:blue;
  }
</style>

Internal css

External css

//Index.html
<head>
  <link rel="stylesheet" 
href="style.css">
</head>

Links to

//style.css

h1{
  color:blue;
}

Inline css

//Index.html

<h1 style="color:red">

Welcome

</h1>

Understanding Browser DevTools

Browser developer tools (DevTools) are built-in toolkits found in all modern web browsers. They allow you to inspect the HTML, CSS, and JavaScript of any webpage, monitor network traffic, and test responsiveness across different device sizes

Method 1

Right click -> Inspect

Method 2

Keyboard -> Press F12

How to open Devtools

Cascade & Inheritance

Cascade

" A process where multiple styles are applied, and the browser decides which style should take priority."

Cascade & Inheritance

When multiple styles apply, CSS follows a priority order:

Inline CSS

Highest

Cascade

" A process where multiple styles are applied, and the browser decides which style should take priority."

Internal CSS

Medium

External CSS

Lowest

Inheritance

Inheritance is a feature in CSS where some properties applied to a parent element are automatically passed to its child elements.

Parent element

body

color: darkgray;
font-family: Arial;

Child element

<p> tag inherits

color: darkgray;
font-family: Arial;

Commonly Inherited Properties

Font styles

Text color

Line-height

Visibility

Specificity Basics

Specificity is the rule CSS uses to determine which style should be applied when multiple CSS selectors target the same element.

Highest

ID Selector

Class Selector

High

Medium

Low

Inline CSS

Element Selector

Summary

Specificity determines which style gets applied.

CSS can be inline, internal, external.

Selectors target elements using CSS rules.

CSS improves design, layout, and consistency.

CSS styles and beautifies HTML webpages.

Quiz

What does CSS stand for?

A. Computer Style Sheets

B. Cascading Style Sheets

C. Creative Style Sheets

D. Color Style Sheets

What does CSS stand for?

A. Computer Style Sheets

B. Cascading Style Sheets

C. Creative Style Sheets

D. Color Style Sheets

Quiz-Answer