Content ITV PRO
This is Itvedant Content department
Topic Name
Subtopic Name
Learning Outcome(Slide2)
6
Basics of branding and messaging
5
Target audience and segmentation
4
Different marketing channels
3
Creating value for customers
2
Understanding customer needs
1
What marketing means ?
Choose cool, soft colors instead of vibrant colors
Max 6 Points for Summary & Min 4
Topic Name-Recall(Slide3)
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.
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>Core Concepts (Slide 7)
Core Concepts (.....Slide N-3)
Summary
5
Build strong branding
4
Use different marketing channels
3
Target the right audience
2
Create and communicate value
1
Understand customer needs
Choose cool, soft colors instead of vibrant colors
Max 5 Points for Summary & Min 2
Quiz
Which platform is mainly used for professional networking and B2B marketing ?
A. Facebook
B. Instagram
C. LinkedIn
D. Snapchat
Quiz-Answer
Which platform is mainly used for professional networking and B2B marketing ?
A. Facebook
B. Instagram
C. LinkedIn
D. Snapchat
Web design - Getting Started With CSS
By Content ITV
