SlideShare a Scribd company logo
Introduction to CSS in HTML
THE AMERICAN COLLEGE, MADURAI
(An Autonomous Institution Affiliated to Madurai Kamaraj University)
Reaccredited (3rd cycle)by NAAC with Grade “A” CGPA-3.47 on a 4-POINTS scale
Dr. S.SHAIK PARVEEN
Assistant Professor
Department of BCA
The American College
Madurai
Intro to CSS
 Covered in this lesson:
◦ Overview
 What is CSS?
 Why to use CSS?
 CSS for Skinning your Website
◦ Structure
 CSS Syntax Introduction
 Three places CSS can be defined
 CSS Syntax Specifics
 Cascading Inheritance
◦ Applied
 CSS Hands-on
What is CSS?
 Cascading Style Sheet
 Stylesheet Language
 Standards-based set of properties and attributes to define
styles
 To describe the presentation a document written in
a
‘markup language’ like HTML or XML
 Markup encoding: <p>My paragraph here.</p>
 Defines the style of how things in <p> tags appear.
 Font, color, size, margins, etc.
 Cascading
 Rules to determine how to
 apply markup that contains
 other markup
Why CSS?
 Separate Content from Form
◦ Content is the text and images, marked up to
define regions of specific types
◦ Form defines the “style” for the content
<font size=“14px”>
My First Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
My information 1 goes here.
</font>
<font size=“14px”>
My Second Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
Different information goes here.
</font>
The old way:
Why CSS? Continued.
 Separate Content from Form
◦ Content
◦ Form or Style
<p class=“header”>My First Header</p>
<p class=“info”>My Information 1 goes here</p>
<p class=“header”>My Second Header</p>
<p class=“info”>Different Information goes here</p>
(Specific markup properties like Class will be discussed later).
.header { font-size:14px;}
.info { font-family: verdana;
font-color: blue;
font-size: 12px; }
What does this separation get
us?
 Separate Content from Form
◦ Specify the style once for every instance of
that class.
 Example: Specify the font once for all text on the
HTML page that you’ve identified as a “header”.
◦ The stylesheet can be a separate file which
all HTML pages on your entire site can link
to.
 Only have to specify the style once for your
ENITRE SITE
◦ Can change the style for your entire site by
editing only ONE FILE.
CSS Skinning
 “Skinning” - changing the look of a page or your site
◦ Selecting an appearance by choosing which stylesheet to
use.
<link rel="stylesheet" type="text/css" href=“skin1.css" />
<p class=“info”>My Information 1 goes here</p>
skin1.css
.info { background-color: White;
font-family: Verdana;
font-color: Blue; }
Some information goes here.
+
=
CSS Skinning 2
 “Skinning” - changing the look of a page or your site
◦ Selecting an appearance by choosing which stylesheet to
use.
<link rel="stylesheet" type="text/css" href=“skin2.css" />
<p class=“info”>My Information 1 goes here</p>
skin1.css
.info { background-color: Blue;
font-family: Serif;
font-color: White; }
Some information goes here.
+
=
CSS Syntax
 3 Elements to a CSS Statement
◦ Selector
 What HTML sections does it affect?
◦ Property
 What attribute of that HTML section will be affected?
◦ Value
 What change will be made to that attribute?
Three CSS Definition
Locations
 Inline: the “style” attribute
Note, the selector for inline CSS is the tag which contains the style attribute.
 Internal: the <style> markup tag
 External: the .css stylesheet file
<p style=“font-color:red;font-size:10px;”>Content</p>
<html><head><style>
p { background-color: Red;
font-family: serif;
font-color: White; }
</style></head><body>
<p>Content</p>
</body></html>
<link rel="stylesheet" type="text/css" href=“mystylesheet.css" />
CSS Syntax: Selectors
 There are many kinds of selectors and many ways to reference
them:
 Type, Class, ID, Pseudo, etc.
 HTML Type Tag – selected with the tag type
 The Class Attribute – precede the class with a period
p { font-size: 10px;
font-color: White; }
<p>Content</p>
.myinfo { font-size: 10px;
font-color: White; }
<p class=“myinfo”>Content</p>
<div class=“myinfo”>Other content</div>
Cascading Inheritance
Nested elements inherit
the properties from the
its parent
If you specify a style for the
<body> tag it will affect all
content in your HTML page.
If you want to override
inherited settings, you
need to specify a style in
a more local element
body { font-family: Verdana;
font-size: 14px; }
body { font-family: Verdana;
font-size: 1.1em; }
.littletext { font-size: 8px; }
<body>
This text is larger.
<p class=“littletext”>This text is
smaller.</p>
Thank You
Ad

Recommended

Introduction to basics of css, overview, syntax and so on
Introduction to basics of css, overview, syntax and so on
mictnawaraj
 
DW_lesson2aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.ppt
DW_lesson2aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.ppt
MaryRoseEyao
 
DW_lesson2 ntro_HTML_CSS_preso ntro_HTML_CSS_preso.ppt
DW_lesson2 ntro_HTML_CSS_preso ntro_HTML_CSS_preso.ppt
YazanMohamed1
 
DW_lesson2.ppt
DW_lesson2.ppt
JohnpaulStem11
 
CSS Cascading Style Sheet Introduction slides
CSS Cascading Style Sheet Introduction slides
Aasma13
 
DW_lesson2.ppt
DW_lesson2.ppt
PramenathA
 
DW_lesson2.ppt
DW_lesson2.ppt
UsamaShakeel22
 
DW_lesson2.ppt
DW_lesson2.ppt
ssuser666f98
 
DW_lesson2.ppt
DW_lesson2.ppt
JohnSon872476
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
TusharTikia
 
CSS tutorial slides.ppt_20240716_204128_0000.pptx
CSS tutorial slides.ppt_20240716_204128_0000.pptx
ssuserbf6ebe
 
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
Jeff Byrnes
 
diffrent style sheets like cascading style sheets.pptx
diffrent style sheets like cascading style sheets.pptx
ssuser46d915
 
Web topic 15 1 basic css layout
Web topic 15 1 basic css layout
CK Yang
 
Css basic
Css basic
Jaypalsing Rajput
 
Introduction to CSS
Introduction to CSS
Ameer Khan
 
CSS Introduction
CSS Introduction
Diliara Nasirova
 
Css ms megha
Css ms megha
Megha Gupta
 
Beginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
 
Rational HATS and CSS
Rational HATS and CSS
Strongback Consulting
 
Shyam sunder Rajasthan Computer
Shyam sunder Rajasthan Computer
shyamverma305
 
Html html html html html html html html html
Html html html html html html html html html
riturajbhujel103
 
Css week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandour
Osama Ghandour Geris
 
Html Styles-CSS
Html Styles-CSS
ispkosova
 
Unit 3 (it workshop).pptx
Unit 3 (it workshop).pptx
Dr.Lokesh Gagnani
 
Css
Css
Jahid Blackrose
 
Cascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
JAVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
JAVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
KimberlyCasem1
 
Advanced Excel
Advanced Excel
parveen837153
 
Cyber Security
Cyber Security
parveen837153
 

More Related Content

Similar to Introduction to CSS in HTML.ppt (20)

DW_lesson2.ppt
DW_lesson2.ppt
JohnSon872476
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
TusharTikia
 
CSS tutorial slides.ppt_20240716_204128_0000.pptx
CSS tutorial slides.ppt_20240716_204128_0000.pptx
ssuserbf6ebe
 
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
Jeff Byrnes
 
diffrent style sheets like cascading style sheets.pptx
diffrent style sheets like cascading style sheets.pptx
ssuser46d915
 
Web topic 15 1 basic css layout
Web topic 15 1 basic css layout
CK Yang
 
Css basic
Css basic
Jaypalsing Rajput
 
Introduction to CSS
Introduction to CSS
Ameer Khan
 
CSS Introduction
CSS Introduction
Diliara Nasirova
 
Css ms megha
Css ms megha
Megha Gupta
 
Beginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
 
Rational HATS and CSS
Rational HATS and CSS
Strongback Consulting
 
Shyam sunder Rajasthan Computer
Shyam sunder Rajasthan Computer
shyamverma305
 
Html html html html html html html html html
Html html html html html html html html html
riturajbhujel103
 
Css week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandour
Osama Ghandour Geris
 
Html Styles-CSS
Html Styles-CSS
ispkosova
 
Unit 3 (it workshop).pptx
Unit 3 (it workshop).pptx
Dr.Lokesh Gagnani
 
Css
Css
Jahid Blackrose
 
Cascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
JAVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
JAVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
KimberlyCasem1
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
TusharTikia
 
CSS tutorial slides.ppt_20240716_204128_0000.pptx
CSS tutorial slides.ppt_20240716_204128_0000.pptx
ssuserbf6ebe
 
INFO3775 Chapter 2 Part 2
INFO3775 Chapter 2 Part 2
Jeff Byrnes
 
diffrent style sheets like cascading style sheets.pptx
diffrent style sheets like cascading style sheets.pptx
ssuser46d915
 
Web topic 15 1 basic css layout
Web topic 15 1 basic css layout
CK Yang
 
Introduction to CSS
Introduction to CSS
Ameer Khan
 
Beginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
 
Shyam sunder Rajasthan Computer
Shyam sunder Rajasthan Computer
shyamverma305
 
Html html html html html html html html html
Html html html html html html html html html
riturajbhujel103
 
Css week10 2019 2020 for g10 by eng.osama ghandour
Css week10 2019 2020 for g10 by eng.osama ghandour
Osama Ghandour Geris
 
Html Styles-CSS
Html Styles-CSS
ispkosova
 
Cascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
JAVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
JAVAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
KimberlyCasem1
 

More from parveen837153 (7)

Advanced Excel
Advanced Excel
parveen837153
 
Cyber Security
Cyber Security
parveen837153
 
Cyber Security
Cyber Security
parveen837153
 
Object Oriented Programming using C++.pptx
Object Oriented Programming using C++.pptx
parveen837153
 
IOT-Monograph .docx
IOT-Monograph .docx
parveen837153
 
Internet of things Unit I
Internet of things Unit I
parveen837153
 
Unit I Advanced Java Programming Course
Unit I Advanced Java Programming Course
parveen837153
 
Object Oriented Programming using C++.pptx
Object Oriented Programming using C++.pptx
parveen837153
 
Internet of things Unit I
Internet of things Unit I
parveen837153
 
Unit I Advanced Java Programming Course
Unit I Advanced Java Programming Course
parveen837153
 
Ad

Recently uploaded (20)

Ray Dalio How Countries go Broke the Big Cycle
Ray Dalio How Countries go Broke the Big Cycle
Dadang Solihin
 
ICT-8-Module-REVISED-K-10-CURRICULUM.pdf
ICT-8-Module-REVISED-K-10-CURRICULUM.pdf
penafloridaarlyn
 
How to Manage Inventory Movement in Odoo 18 POS
How to Manage Inventory Movement in Odoo 18 POS
Celine George
 
Unit- 4 Biostatistics & Research Methodology.pdf
Unit- 4 Biostatistics & Research Methodology.pdf
KRUTIKA CHANNE
 
How to Configure Vendor Management in Lunch App of Odoo 18
How to Configure Vendor Management in Lunch App of Odoo 18
Celine George
 
GEOGRAPHY-Study Material [ Class 10th] .pdf
GEOGRAPHY-Study Material [ Class 10th] .pdf
SHERAZ AHMAD LONE
 
Capitol Doctoral Presentation -June 2025.pptx
Capitol Doctoral Presentation -June 2025.pptx
CapitolTechU
 
ABCs of Bookkeeping for Nonprofits TechSoup.pdf
ABCs of Bookkeeping for Nonprofits TechSoup.pdf
TechSoup
 
Non-Communicable Diseases and National Health Programs – Unit 10 | B.Sc Nursi...
Non-Communicable Diseases and National Health Programs – Unit 10 | B.Sc Nursi...
RAKESH SAJJAN
 
Battle of Bookworms 2025 - U25 Literature Quiz by Pragya
Battle of Bookworms 2025 - U25 Literature Quiz by Pragya
Pragya - UEM Kolkata Quiz Club
 
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
ChristinaFortunova
 
FIRST DAY HIGH orientation for mapeh subject in grade 10.pptx
FIRST DAY HIGH orientation for mapeh subject in grade 10.pptx
GlysdiEelesor1
 
Paper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil Disobedience
Paper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil Disobedience
Rajdeep Bavaliya
 
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
Sourav Kr Podder
 
What is FIle and explanation of text files.pptx
What is FIle and explanation of text files.pptx
Ramakrishna Reddy Bijjam
 
LDMMIA GRAD Student Check-in Orientation Sampler
LDMMIA GRAD Student Check-in Orientation Sampler
LDM & Mia eStudios
 
Chalukyas of Gujrat, Solanki Dynasty NEP.pptx
Chalukyas of Gujrat, Solanki Dynasty NEP.pptx
Dr. Ravi Shankar Arya Mahila P. G. College, Banaras Hindu University, Varanasi, India.
 
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
parmarjuli1412
 
2025 June Year 9 Presentation: Subject selection.pptx
2025 June Year 9 Presentation: Subject selection.pptx
mansk2
 
Introduction to Generative AI and Copilot.pdf
Introduction to Generative AI and Copilot.pdf
TechSoup
 
Ray Dalio How Countries go Broke the Big Cycle
Ray Dalio How Countries go Broke the Big Cycle
Dadang Solihin
 
ICT-8-Module-REVISED-K-10-CURRICULUM.pdf
ICT-8-Module-REVISED-K-10-CURRICULUM.pdf
penafloridaarlyn
 
How to Manage Inventory Movement in Odoo 18 POS
How to Manage Inventory Movement in Odoo 18 POS
Celine George
 
Unit- 4 Biostatistics & Research Methodology.pdf
Unit- 4 Biostatistics & Research Methodology.pdf
KRUTIKA CHANNE
 
How to Configure Vendor Management in Lunch App of Odoo 18
How to Configure Vendor Management in Lunch App of Odoo 18
Celine George
 
GEOGRAPHY-Study Material [ Class 10th] .pdf
GEOGRAPHY-Study Material [ Class 10th] .pdf
SHERAZ AHMAD LONE
 
Capitol Doctoral Presentation -June 2025.pptx
Capitol Doctoral Presentation -June 2025.pptx
CapitolTechU
 
ABCs of Bookkeeping for Nonprofits TechSoup.pdf
ABCs of Bookkeeping for Nonprofits TechSoup.pdf
TechSoup
 
Non-Communicable Diseases and National Health Programs – Unit 10 | B.Sc Nursi...
Non-Communicable Diseases and National Health Programs – Unit 10 | B.Sc Nursi...
RAKESH SAJJAN
 
Battle of Bookworms 2025 - U25 Literature Quiz by Pragya
Battle of Bookworms 2025 - U25 Literature Quiz by Pragya
Pragya - UEM Kolkata Quiz Club
 
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
ChristinaFortunova
 
FIRST DAY HIGH orientation for mapeh subject in grade 10.pptx
FIRST DAY HIGH orientation for mapeh subject in grade 10.pptx
GlysdiEelesor1
 
Paper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil Disobedience
Paper 108 | Thoreau’s Influence on Gandhi: The Evolution of Civil Disobedience
Rajdeep Bavaliya
 
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
Sourav Kr Podder
 
What is FIle and explanation of text files.pptx
What is FIle and explanation of text files.pptx
Ramakrishna Reddy Bijjam
 
LDMMIA GRAD Student Check-in Orientation Sampler
LDMMIA GRAD Student Check-in Orientation Sampler
LDM & Mia eStudios
 
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
parmarjuli1412
 
2025 June Year 9 Presentation: Subject selection.pptx
2025 June Year 9 Presentation: Subject selection.pptx
mansk2
 
Introduction to Generative AI and Copilot.pdf
Introduction to Generative AI and Copilot.pdf
TechSoup
 
Ad

Introduction to CSS in HTML.ppt

  • 1. Introduction to CSS in HTML THE AMERICAN COLLEGE, MADURAI (An Autonomous Institution Affiliated to Madurai Kamaraj University) Reaccredited (3rd cycle)by NAAC with Grade “A” CGPA-3.47 on a 4-POINTS scale Dr. S.SHAIK PARVEEN Assistant Professor Department of BCA The American College Madurai
  • 2. Intro to CSS  Covered in this lesson: ◦ Overview  What is CSS?  Why to use CSS?  CSS for Skinning your Website ◦ Structure  CSS Syntax Introduction  Three places CSS can be defined  CSS Syntax Specifics  Cascading Inheritance ◦ Applied  CSS Hands-on
  • 3. What is CSS?  Cascading Style Sheet  Stylesheet Language  Standards-based set of properties and attributes to define styles  To describe the presentation a document written in a ‘markup language’ like HTML or XML  Markup encoding: <p>My paragraph here.</p>  Defines the style of how things in <p> tags appear.  Font, color, size, margins, etc.  Cascading  Rules to determine how to  apply markup that contains  other markup
  • 4. Why CSS?  Separate Content from Form ◦ Content is the text and images, marked up to define regions of specific types ◦ Form defines the “style” for the content <font size=“14px”> My First Header </font> <font size=“12px” color=“red” face=“Verdana”> My information 1 goes here. </font> <font size=“14px”> My Second Header </font> <font size=“12px” color=“red” face=“Verdana”> Different information goes here. </font> The old way:
  • 5. Why CSS? Continued.  Separate Content from Form ◦ Content ◦ Form or Style <p class=“header”>My First Header</p> <p class=“info”>My Information 1 goes here</p> <p class=“header”>My Second Header</p> <p class=“info”>Different Information goes here</p> (Specific markup properties like Class will be discussed later). .header { font-size:14px;} .info { font-family: verdana; font-color: blue; font-size: 12px; }
  • 6. What does this separation get us?  Separate Content from Form ◦ Specify the style once for every instance of that class.  Example: Specify the font once for all text on the HTML page that you’ve identified as a “header”. ◦ The stylesheet can be a separate file which all HTML pages on your entire site can link to.  Only have to specify the style once for your ENITRE SITE ◦ Can change the style for your entire site by editing only ONE FILE.
  • 7. CSS Skinning  “Skinning” - changing the look of a page or your site ◦ Selecting an appearance by choosing which stylesheet to use. <link rel="stylesheet" type="text/css" href=“skin1.css" /> <p class=“info”>My Information 1 goes here</p> skin1.css .info { background-color: White; font-family: Verdana; font-color: Blue; } Some information goes here. + =
  • 8. CSS Skinning 2  “Skinning” - changing the look of a page or your site ◦ Selecting an appearance by choosing which stylesheet to use. <link rel="stylesheet" type="text/css" href=“skin2.css" /> <p class=“info”>My Information 1 goes here</p> skin1.css .info { background-color: Blue; font-family: Serif; font-color: White; } Some information goes here. + =
  • 9. CSS Syntax  3 Elements to a CSS Statement ◦ Selector  What HTML sections does it affect? ◦ Property  What attribute of that HTML section will be affected? ◦ Value  What change will be made to that attribute?
  • 10. Three CSS Definition Locations  Inline: the “style” attribute Note, the selector for inline CSS is the tag which contains the style attribute.  Internal: the <style> markup tag  External: the .css stylesheet file <p style=“font-color:red;font-size:10px;”>Content</p> <html><head><style> p { background-color: Red; font-family: serif; font-color: White; } </style></head><body> <p>Content</p> </body></html> <link rel="stylesheet" type="text/css" href=“mystylesheet.css" />
  • 11. CSS Syntax: Selectors  There are many kinds of selectors and many ways to reference them:  Type, Class, ID, Pseudo, etc.  HTML Type Tag – selected with the tag type  The Class Attribute – precede the class with a period p { font-size: 10px; font-color: White; } <p>Content</p> .myinfo { font-size: 10px; font-color: White; } <p class=“myinfo”>Content</p> <div class=“myinfo”>Other content</div>
  • 12. Cascading Inheritance Nested elements inherit the properties from the its parent If you specify a style for the <body> tag it will affect all content in your HTML page. If you want to override inherited settings, you need to specify a style in a more local element body { font-family: Verdana; font-size: 14px; } body { font-family: Verdana; font-size: 1.1em; } .littletext { font-size: 8px; } <body> This text is larger. <p class=“littletext”>This text is smaller.</p>