1
Front End
Technologies
Basics of CSS
2
Learning
Outcomes
How CSS Matters
Ways to Apply CSS in HTML
Basic CSS Selectors & Properties
to Style Web Pages
How 3
CSS Matters
CSS Improves Page Rendering Speed
CSS Enhances Accessibility
CSS Helps Optimize Resources Usage
CSS indirectly affect Website SEO
CSS for Responsive Designing
CSS 4
Ways to Apply CSS in HTML🎨
CSS Basic Syntax
CSS Ways to apply:
Inline
Internal
External
CSS 5
Basic Syntax BREAKDOWN
Format: Part Meaning Example
Selector { Selector Tells which HTML element p, .box, #id
Property: Value; to style
} Property The style attribute you color, font-size,
want to change margin
Example: Value The setting/value for that
property
red, 16px, 10px
p{ Curly Wrap the styling rules for { ... }
color: red; Braces{} that selector
}
Semicolo Ends each property-value color: red;
n; pair (important when writing
multiple)
CSS Ways to Apply: 6
Inline, Internal, External.
Inline CSS: It means writing the CSS code directly inside an
HTML element using the style attribute.
Example:
<p style= "color: red;“>This is a red paragraph. </p>
📌 Key Points ❗When to Avoid
Written inside the HTML tag Not good for large projects.
Affects only that single Can make your code messy
element. and hard to maintain.
Not reusable.
Used for quick testing or one-
time changes.
7
CSS Ways to Apply:
Inline, Internal, External
Internal CSS: It is written inside a <style> tag placed within
the <head> section of HTML file.
Example: <head>
<style> 📌Key Points
h1 {
Styles apply to the whole HTML
color: blue; file
} Good for single-page projects or
p { when you don’t want to create a
font-size: 18px; separate CSS file.
}
Easy to edit when working on a
</style> small project.
</head>
CSS Ways to Apply: 8
Inline, Internal, External
External CSS: External CSS is written in a separate .css file, and
that file is
linked to HTML using a <link> tag in the <head> section.
Example: In HTML
<head>
<link rel="stylesheet" href="style.css“>
</head>
📌Key Points
Example: In Style.css
Best for large or multi-page
h1 {
websites.
color: green;
} Makes code cleaner, reusable, and
p{ easier to manage.
CSS 9
Selectors & Properties
to Style Web Pages
Selector Type Syntax What it targets Example
Universal * All HTML Elements * { margin: 0; }
Element P, h1, div Specific HTML tags p {colour: blue;}
Class .classname Elements with a Specific .box {padding: box;}
Class
ID #idname Unique element with id #header
that ID {background: red;}
Group h1,p,div Multiple elements h1, p {font-family:
together Arial; }
Descendent div p <p> inside a <div> div p {font-size:
14px; }
Child ul > li Direct child elements ul > li { list-style:
none; }
CSS 10
Selectors & Properties
to Style Web Pages
1. Text & Font Properties
Text-align What it does Example
Color Set the Text color Color: red;
Font-size Manage font size Font-size: 16px
Font-family Manage front style Font-family: Arial;
Text-align Text alignment Text-align: center;
Text- Underline, line-through, etc. Text-decoration:
decoration underline;
Font-weight Boldness of text Font-weight: bold;
CSS 11
Selectors & Properties
to Style Web Pages
2. Box Model Properties
Property What it does Example
margin Space outside the element Margin: 10px;
padding space inside the element Padding: 15px;
border Element border Border:1px solid
black;
width Width of box Width: 100px;
height height of box Height: 200px;
CSS 12
Selectors & Properties
to Style Web Pages
3. Background Properties
Property What it does Example
background-color Set background color background-color:
lightblue;
background- Set image as background-image:
image background url('bg.jpg');
background-size How image fits: background-size:
cover, contain, etc. cover;
background- Position of image background-position:
position center;
background- Repeat image or not background-repeat:
CSS 13
Selectors & Properties
to Style Web Pages
4. Layout & Display
Properties
Property What it does Example
Display Defines box behavior Display: flex;
Position Set position type Position: absolute;
Top, left Set position offset Top: 10px; left:20px;
z-index Stacking order Z-index: 5;
Overflow How overflow content Overflow: hidden;
behaves
CSS 14
Selectors & Properties
to Style Web Pages
5. Animation / Others
Property What it does Example
Transition Smooth change in Transition: all0.3s ease;
property
Animation Animate elements Animation: fadein 2s
ease;
Visibility Show or hide Visibility: hidden;
Opacity Transparency Opacity: 0.5;
15
📑History of CSS
Year Version Note
1996 CSS1 Basic styling: fonts, colours, spacing, borders.
1998 CSS2 Added positioning (absolute, relative), z-
index, media types (for print vs screen), and
more selectors.
1999– CSS2.1 Fixes & cleanups to CSS2; became stable
2010 spec.
~2010 CSS3 Major milestone: modular design.
onwards
2020+ CSS4? There’s no CSS4 spec. People say it, but it's a
(not myth.
16
THANKYOU 4
Paying Attention
