SlideShare a Scribd company logo
INTRO TO CSS
Presented By :
Nawaraj Bhandari
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:
The <font> tag was used in
HTML 4 to specify the font
face, font size, and color of
text.
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>
skin2.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>
CSS APPLIED
 Let’s move to Visual Editor.
Ad

Recommended

DW_lesson2aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.ppt
DW_lesson2aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.ppt
MaryRoseEyao
 
DW_lesson2.ppt
DW_lesson2.ppt
JohnpaulStem11
 
DW_lesson2.ppt
DW_lesson2.ppt
PramenathA
 
DW_lesson2.ppt
DW_lesson2.ppt
ssuser666f98
 
DW_lesson2.ppt
DW_lesson2.ppt
UsamaShakeel22
 
DW_lesson2.ppt
DW_lesson2.ppt
JohnSon872476
 
CSS Cascading Style Sheet Introduction slides
CSS Cascading Style Sheet Introduction slides
Aasma13
 
DW_lesson2 ntro_HTML_CSS_preso ntro_HTML_CSS_preso.ppt
DW_lesson2 ntro_HTML_CSS_preso ntro_HTML_CSS_preso.ppt
YazanMohamed1
 
Introduction to CSS in HTML.ppt
Introduction to CSS in HTML.ppt
parveen837153
 
CSS tutorial slides.ppt_20240716_204128_0000.pptx
CSS tutorial slides.ppt_20240716_204128_0000.pptx
ssuserbf6ebe
 
CSS Introduction
CSS Introduction
Diliara Nasirova
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
TusharTikia
 
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1
Jyoti Yadav
 
Css week11 2020 2021 for g10 by eng.osama ghandour
Css week11 2020 2021 for g10 by eng.osama ghandour
Osama Ghandour Geris
 
Css week11 2019 2020 for g10 by eng.osama ghandour
Css week11 2019 2020 for g10 by eng.osama ghandour
Osama Ghandour Geris
 
Css notes
Css notes
Computer Hardware & Trouble shooting
 
CSS Basics (Cascading Style Sheet)
CSS Basics (Cascading Style Sheet)
Ajay Khatri
 
IP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).ppt
kassahungebrie
 
LIS3353 SP12 Week 13
LIS3353 SP12 Week 13
Amanda Case
 
Css basics
Css basics
Franc Santos
 
Css basics
Css basics
Franc Santos
 
CSS Training in Bangalore
CSS Training in Bangalore
rajkamal560066
 
3. CSS
3. CSS
Pavle Đorđević
 
Session v(css)
Session v(css)
Shrijan Tiwari
 
Cascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
Css class-01
Css class-01
Md Ali Hossain
 
Introduction to css
Introduction to css
nikhilsh66131
 
Center Enamel can Provide Aluminum Dome Roofs for diesel tank.docx
Center Enamel can Provide Aluminum Dome Roofs for diesel tank.docx
CenterEnamel
 
ElysiumPro Company Profile 2025-2026.pdf
ElysiumPro Company Profile 2025-2026.pdf
info751436
 

More Related Content

Similar to Introduction to basics of css, overview, syntax and so on (20)

Introduction to CSS in HTML.ppt
Introduction to CSS in HTML.ppt
parveen837153
 
CSS tutorial slides.ppt_20240716_204128_0000.pptx
CSS tutorial slides.ppt_20240716_204128_0000.pptx
ssuserbf6ebe
 
CSS Introduction
CSS Introduction
Diliara Nasirova
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
TusharTikia
 
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1
Jyoti Yadav
 
Css week11 2020 2021 for g10 by eng.osama ghandour
Css week11 2020 2021 for g10 by eng.osama ghandour
Osama Ghandour Geris
 
Css week11 2019 2020 for g10 by eng.osama ghandour
Css week11 2019 2020 for g10 by eng.osama ghandour
Osama Ghandour Geris
 
Css notes
Css notes
Computer Hardware & Trouble shooting
 
CSS Basics (Cascading Style Sheet)
CSS Basics (Cascading Style Sheet)
Ajay Khatri
 
IP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).ppt
kassahungebrie
 
LIS3353 SP12 Week 13
LIS3353 SP12 Week 13
Amanda Case
 
Css basics
Css basics
Franc Santos
 
Css basics
Css basics
Franc Santos
 
CSS Training in Bangalore
CSS Training in Bangalore
rajkamal560066
 
3. CSS
3. CSS
Pavle Đorđević
 
Session v(css)
Session v(css)
Shrijan Tiwari
 
Cascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
Css class-01
Css class-01
Md Ali Hossain
 
Introduction to css
Introduction to css
nikhilsh66131
 
Introduction to CSS in HTML.ppt
Introduction to CSS in HTML.ppt
parveen837153
 
CSS tutorial slides.ppt_20240716_204128_0000.pptx
CSS tutorial slides.ppt_20240716_204128_0000.pptx
ssuserbf6ebe
 
Unit 2-CSS & Bootstrap.ppt
Unit 2-CSS & Bootstrap.ppt
TusharTikia
 
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1
Jyoti Yadav
 
Css week11 2020 2021 for g10 by eng.osama ghandour
Css week11 2020 2021 for g10 by eng.osama ghandour
Osama Ghandour Geris
 
Css week11 2019 2020 for g10 by eng.osama ghandour
Css week11 2019 2020 for g10 by eng.osama ghandour
Osama Ghandour Geris
 
CSS Basics (Cascading Style Sheet)
CSS Basics (Cascading Style Sheet)
Ajay Khatri
 
IP - Lecture 6, 7 Chapter-3 (3).ppt
IP - Lecture 6, 7 Chapter-3 (3).ppt
kassahungebrie
 
LIS3353 SP12 Week 13
LIS3353 SP12 Week 13
Amanda Case
 
CSS Training in Bangalore
CSS Training in Bangalore
rajkamal560066
 
Cascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 

Recently uploaded (20)

Center Enamel can Provide Aluminum Dome Roofs for diesel tank.docx
Center Enamel can Provide Aluminum Dome Roofs for diesel tank.docx
CenterEnamel
 
ElysiumPro Company Profile 2025-2026.pdf
ElysiumPro Company Profile 2025-2026.pdf
info751436
 
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
SharinAbGhani1
 
社内勉強会資料_Chain of Thought .
社内勉強会資料_Chain of Thought .
NABLAS株式会社
 
chemistry investigatory project for class 12
chemistry investigatory project for class 12
Susis10
 
Water demand - Types , variations and WDS
Water demand - Types , variations and WDS
dhanashree78
 
Structural Design for Residential-to-Restaurant Conversion
Structural Design for Residential-to-Restaurant Conversion
DanielRoman285499
 
machine learning is a advance technology
machine learning is a advance technology
ynancy893
 
Development of Portable Biomass Briquetting Machine (S, A & D)-1.pptx
Development of Portable Biomass Briquetting Machine (S, A & D)-1.pptx
aniket862935
 
Pavement and its types, Application of rigid and Flexible Pavements
Pavement and its types, Application of rigid and Flexible Pavements
Sakthivel M
 
Machine Learning - Classification Algorithms
Machine Learning - Classification Algorithms
resming1
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
djiceramil
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
djiceramil
 
3. What is the principles of Teamwork_Module_V1.0.ppt
3. What is the principles of Teamwork_Module_V1.0.ppt
engaash9
 
60 Years and Beyond eBook 1234567891.pdf
60 Years and Beyond eBook 1234567891.pdf
waseemalazzeh
 
Introduction to Natural Language Processing - Stages in NLP Pipeline, Challen...
Introduction to Natural Language Processing - Stages in NLP Pipeline, Challen...
resming1
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
djiceramil
 
Fundamentals of Digital Design_Class_21st May - Copy.pptx
Fundamentals of Digital Design_Class_21st May - Copy.pptx
drdebarshi1993
 
Industry 4.o the fourth revolutionWeek-2.pptx
Industry 4.o the fourth revolutionWeek-2.pptx
KNaveenKumarECE
 
NALCO Green Anode Plant,Compositions of CPC,Pitch
NALCO Green Anode Plant,Compositions of CPC,Pitch
arpitprachi123
 
Center Enamel can Provide Aluminum Dome Roofs for diesel tank.docx
Center Enamel can Provide Aluminum Dome Roofs for diesel tank.docx
CenterEnamel
 
ElysiumPro Company Profile 2025-2026.pdf
ElysiumPro Company Profile 2025-2026.pdf
info751436
 
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
02 - Ethics & Professionalism - BEM, IEM, MySET.PPT
SharinAbGhani1
 
社内勉強会資料_Chain of Thought .
社内勉強会資料_Chain of Thought .
NABLAS株式会社
 
chemistry investigatory project for class 12
chemistry investigatory project for class 12
Susis10
 
Water demand - Types , variations and WDS
Water demand - Types , variations and WDS
dhanashree78
 
Structural Design for Residential-to-Restaurant Conversion
Structural Design for Residential-to-Restaurant Conversion
DanielRoman285499
 
machine learning is a advance technology
machine learning is a advance technology
ynancy893
 
Development of Portable Biomass Briquetting Machine (S, A & D)-1.pptx
Development of Portable Biomass Briquetting Machine (S, A & D)-1.pptx
aniket862935
 
Pavement and its types, Application of rigid and Flexible Pavements
Pavement and its types, Application of rigid and Flexible Pavements
Sakthivel M
 
Machine Learning - Classification Algorithms
Machine Learning - Classification Algorithms
resming1
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-Adaptaflex.pdf
djiceramil
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
362 Alec Data Center Solutions-Slysium Data Center-AUH-ABB Furse.pdf
djiceramil
 
3. What is the principles of Teamwork_Module_V1.0.ppt
3. What is the principles of Teamwork_Module_V1.0.ppt
engaash9
 
60 Years and Beyond eBook 1234567891.pdf
60 Years and Beyond eBook 1234567891.pdf
waseemalazzeh
 
Introduction to Natural Language Processing - Stages in NLP Pipeline, Challen...
Introduction to Natural Language Processing - Stages in NLP Pipeline, Challen...
resming1
 
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
362 Alec Data Center Solutions-Slysium Data Center-AUH-Glands & Lugs, Simplex...
djiceramil
 
Fundamentals of Digital Design_Class_21st May - Copy.pptx
Fundamentals of Digital Design_Class_21st May - Copy.pptx
drdebarshi1993
 
Industry 4.o the fourth revolutionWeek-2.pptx
Industry 4.o the fourth revolutionWeek-2.pptx
KNaveenKumarECE
 
NALCO Green Anode Plant,Compositions of CPC,Pitch
NALCO Green Anode Plant,Compositions of CPC,Pitch
arpitprachi123
 
Ad

Introduction to basics of css, overview, syntax and so on

  • 1. INTRO TO CSS Presented By : Nawaraj Bhandari
  • 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: The <font> tag was used in HTML 4 to specify the font face, font size, and color of text.
  • 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> skin2.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>
  • 13. CSS APPLIED  Let’s move to Visual Editor.