SlideShare a Scribd company logo
annarita.colella@gmail.com
What is the language that describes
the style of an HTML document?
CSS describes how HTML elements should be
displayed
body, h1, p are called selector
Background-color, color ...are
called property
Lightblue, white, ...are called
value
{background-color:
lightblue}...is called declaration
CSS SYNTAX
CSS box model:The CSS box model is essentially a box that wraps
around every HTML element. It consists of: margins, borders, padding, and
the actual content. The image below illustrates the box model:
Explanation of the different parts:
● Content - The content of the box, where text and
images appear
● Padding - Clears an area around the content. The
padding is transparent
● Border - A border that goes around the padding
and content
● Margin - Clears an area outside the border. The
margin is transparent
The box model allows us to add a border around
elements, and to define space between elements.
let’s use the w3schools
tutorial at homeand try to do this
homework:
- create an HTML page which introduces
yourself
- Implement the Style using the box model
properties in an internal CSS

More Related Content

Similar to CSS Language

CSS: Box Model
CSS: Box ModelCSS: Box Model
CSS: Box Model
utsav singh
 
WT CSS
WT  CSSWT  CSS
WT CSS
Mohan186867
 
What is css
What is cssWhat is css
What is css
Christopher Tetta
 
Languages for web(HTML,CSS,JS)
Languages for web(HTML,CSS,JS)Languages for web(HTML,CSS,JS)
Languages for web(HTML,CSS,JS)
MHR11
 
Cascading style sheets (CSS-Web Technology)
Cascading style sheets (CSS-Web Technology)Cascading style sheets (CSS-Web Technology)
Cascading style sheets (CSS-Web Technology)
Timbal Mayank
 
Css ppt
Css pptCss ppt
Css ppt
Nidhi mishra
 
Lecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptxLecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptx
GmachImen
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
Evolution Network
 
Css
CssCss
CascadingStyleSheets in ONESHOT By DeathCodeYT .pdf
CascadingStyleSheets  in ONESHOT By DeathCodeYT .pdfCascadingStyleSheets  in ONESHOT By DeathCodeYT .pdf
CascadingStyleSheets in ONESHOT By DeathCodeYT .pdf
balbirnainnain496
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
Shawn Calvert
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layout
CK Yang
 
Introduction to Frontend Development - Session 2 - CSS Fundamentals
Introduction to Frontend Development - Session 2 - CSS FundamentalsIntroduction to Frontend Development - Session 2 - CSS Fundamentals
Introduction to Frontend Development - Session 2 - CSS Fundamentals
Kalin Chernev
 
CSS tutorial chapter 1
CSS tutorial chapter 1CSS tutorial chapter 1
CSS tutorial chapter 1
jeweltutin
 
CSS Basics part One
CSS Basics part OneCSS Basics part One
CSS Basics part One
M Ashraful Islam Jewel
 
Lecture 9 CSS part 1.pptxType Classification
Lecture 9 CSS part 1.pptxType ClassificationLecture 9 CSS part 1.pptxType Classification
Lecture 9 CSS part 1.pptxType Classification
ZahouAmel1
 
Web Programming& Scripting Lab
Web Programming& Scripting LabWeb Programming& Scripting Lab
Web Programming& Scripting Lab
Swapnali Pawar
 
Css Founder.com | Cssfounder in
Css Founder.com | Cssfounder inCss Founder.com | Cssfounder in
Css Founder.com | Cssfounder in
Css Founder
 
Lecture2
Lecture2Lecture2
Lecture2
Lee Lundrigan
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
 

Similar to CSS Language (20)

CSS: Box Model
CSS: Box ModelCSS: Box Model
CSS: Box Model
 
WT CSS
WT  CSSWT  CSS
WT CSS
 
What is css
What is cssWhat is css
What is css
 
Languages for web(HTML,CSS,JS)
Languages for web(HTML,CSS,JS)Languages for web(HTML,CSS,JS)
Languages for web(HTML,CSS,JS)
 
Cascading style sheets (CSS-Web Technology)
Cascading style sheets (CSS-Web Technology)Cascading style sheets (CSS-Web Technology)
Cascading style sheets (CSS-Web Technology)
 
Css ppt
Css pptCss ppt
Css ppt
 
Lecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptxLecture 3CSS part 1.pptx
Lecture 3CSS part 1.pptx
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Css
CssCss
Css
 
CascadingStyleSheets in ONESHOT By DeathCodeYT .pdf
CascadingStyleSheets  in ONESHOT By DeathCodeYT .pdfCascadingStyleSheets  in ONESHOT By DeathCodeYT .pdf
CascadingStyleSheets in ONESHOT By DeathCodeYT .pdf
 
CSS Foundations, pt 2
CSS Foundations, pt 2CSS Foundations, pt 2
CSS Foundations, pt 2
 
Web topic 15 1 basic css layout
Web topic 15 1  basic css layoutWeb topic 15 1  basic css layout
Web topic 15 1 basic css layout
 
Introduction to Frontend Development - Session 2 - CSS Fundamentals
Introduction to Frontend Development - Session 2 - CSS FundamentalsIntroduction to Frontend Development - Session 2 - CSS Fundamentals
Introduction to Frontend Development - Session 2 - CSS Fundamentals
 
CSS tutorial chapter 1
CSS tutorial chapter 1CSS tutorial chapter 1
CSS tutorial chapter 1
 
CSS Basics part One
CSS Basics part OneCSS Basics part One
CSS Basics part One
 
Lecture 9 CSS part 1.pptxType Classification
Lecture 9 CSS part 1.pptxType ClassificationLecture 9 CSS part 1.pptxType Classification
Lecture 9 CSS part 1.pptxType Classification
 
Web Programming& Scripting Lab
Web Programming& Scripting LabWeb Programming& Scripting Lab
Web Programming& Scripting Lab
 
Css Founder.com | Cssfounder in
Css Founder.com | Cssfounder inCss Founder.com | Cssfounder in
Css Founder.com | Cssfounder in
 
Lecture2
Lecture2Lecture2
Lecture2
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 

More from Anna Rita Colella

HTML language
HTML languageHTML language
HTML language
Anna Rita Colella
 
What is the Web? - parte introduttiva
What is the Web? - parte introduttivaWhat is the Web? - parte introduttiva
What is the Web? - parte introduttiva
Anna Rita Colella
 
What is the Web? - parte 1
What is the Web? - parte 1What is the Web? - parte 1
What is the Web? - parte 1
Anna Rita Colella
 
Sistemidi numerazione
Sistemidi numerazioneSistemidi numerazione
Sistemidi numerazione
Anna Rita Colella
 
Edmodo social learning
Edmodo social learningEdmodo social learning
Edmodo social learning
Anna Rita Colella
 
Informatica Concetti Di Base - prima parte
Informatica Concetti Di Base - prima parteInformatica Concetti Di Base - prima parte
Informatica Concetti Di Base - prima parte
Anna Rita Colella
 
Il sistema binario
Il sistema binarioIl sistema binario
Il sistema binario
Anna Rita Colella
 
Presentazione esperienza PSOF
Presentazione esperienza PSOFPresentazione esperienza PSOF
Presentazione esperienza PSOF
Anna Rita Colella
 
Etnografia della produzione e del consumo
Etnografia della produzione e del consumoEtnografia della produzione e del consumo
Etnografia della produzione e del consumoAnna Rita Colella
 
E-learning e Information Retrieval
E-learning e Information RetrievalE-learning e Information Retrieval
E-learning e Information Retrieval
Anna Rita Colella
 

More from Anna Rita Colella (11)

HTML language
HTML languageHTML language
HTML language
 
What is the Web? - parte introduttiva
What is the Web? - parte introduttivaWhat is the Web? - parte introduttiva
What is the Web? - parte introduttiva
 
What is the Web? - parte 1
What is the Web? - parte 1What is the Web? - parte 1
What is the Web? - parte 1
 
Sistemidi numerazione
Sistemidi numerazioneSistemidi numerazione
Sistemidi numerazione
 
Edmodo social learning
Edmodo social learningEdmodo social learning
Edmodo social learning
 
Informatica Concetti Di Base - prima parte
Informatica Concetti Di Base - prima parteInformatica Concetti Di Base - prima parte
Informatica Concetti Di Base - prima parte
 
Il sistema binario
Il sistema binarioIl sistema binario
Il sistema binario
 
Apprendimento On Line
Apprendimento On LineApprendimento On Line
Apprendimento On Line
 
Presentazione esperienza PSOF
Presentazione esperienza PSOFPresentazione esperienza PSOF
Presentazione esperienza PSOF
 
Etnografia della produzione e del consumo
Etnografia della produzione e del consumoEtnografia della produzione e del consumo
Etnografia della produzione e del consumo
 
E-learning e Information Retrieval
E-learning e Information RetrievalE-learning e Information Retrieval
E-learning e Information Retrieval
 

Recently uploaded

Azure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHatAzure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHat
Scholarhat
 
Cognitive Development Adolescence Psychology
Cognitive Development Adolescence PsychologyCognitive Development Adolescence Psychology
Cognitive Development Adolescence Psychology
paigestewart1632
 
A Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdfA Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdf
Jean Carlos Nunes Paixão
 
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
RitikBhardwaj56
 
Hindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdfHindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdf
Dr. Mulla Adam Ali
 
The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
History of Stoke Newington
 
The basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptxThe basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptx
heathfieldcps1
 
Main Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docxMain Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docx
adhitya5119
 
Film vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movieFilm vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movie
Nicholas Montgomery
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
WaniBasim
 
S1-Introduction-Biopesticides in ICM.pptx
S1-Introduction-Biopesticides in ICM.pptxS1-Introduction-Biopesticides in ICM.pptx
S1-Introduction-Biopesticides in ICM.pptx
tarandeep35
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
adhitya5119
 
World environment day ppt For 5 June 2024
World environment day ppt For 5 June 2024World environment day ppt For 5 June 2024
World environment day ppt For 5 June 2024
ak6969907
 
PCOS corelations and management through Ayurveda.
PCOS corelations and management through Ayurveda.PCOS corelations and management through Ayurveda.
PCOS corelations and management through Ayurveda.
Dr. Shivangi Singh Parihar
 
writing about opinions about Australia the movie
writing about opinions about Australia the moviewriting about opinions about Australia the movie
writing about opinions about Australia the movie
Nicholas Montgomery
 
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama UniversityNatural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Akanksha trivedi rama nursing college kanpur.
 
PIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf IslamabadPIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf Islamabad
AyyanKhan40
 
Life upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for studentLife upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for student
NgcHiNguyn25
 
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptxChapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Mohd Adib Abd Muin, Senior Lecturer at Universiti Utara Malaysia
 
How to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP ModuleHow to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP Module
Celine George
 

Recently uploaded (20)

Azure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHatAzure Interview Questions and Answers PDF By ScholarHat
Azure Interview Questions and Answers PDF By ScholarHat
 
Cognitive Development Adolescence Psychology
Cognitive Development Adolescence PsychologyCognitive Development Adolescence Psychology
Cognitive Development Adolescence Psychology
 
A Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdfA Independência da América Espanhola LAPBOOK.pdf
A Independência da América Espanhola LAPBOOK.pdf
 
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
 
Hindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdfHindi varnamala | hindi alphabet PPT.pdf
Hindi varnamala | hindi alphabet PPT.pdf
 
The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
 
The basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptxThe basics of sentences session 6pptx.pptx
The basics of sentences session 6pptx.pptx
 
Main Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docxMain Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docx
 
Film vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movieFilm vocab for eal 3 students: Australia the movie
Film vocab for eal 3 students: Australia the movie
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
 
S1-Introduction-Biopesticides in ICM.pptx
S1-Introduction-Biopesticides in ICM.pptxS1-Introduction-Biopesticides in ICM.pptx
S1-Introduction-Biopesticides in ICM.pptx
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
 
World environment day ppt For 5 June 2024
World environment day ppt For 5 June 2024World environment day ppt For 5 June 2024
World environment day ppt For 5 June 2024
 
PCOS corelations and management through Ayurveda.
PCOS corelations and management through Ayurveda.PCOS corelations and management through Ayurveda.
PCOS corelations and management through Ayurveda.
 
writing about opinions about Australia the movie
writing about opinions about Australia the moviewriting about opinions about Australia the movie
writing about opinions about Australia the movie
 
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama UniversityNatural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
 
PIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf IslamabadPIMS Job Advertisement 2024.pdf Islamabad
PIMS Job Advertisement 2024.pdf Islamabad
 
Life upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for studentLife upper-Intermediate B2 Workbook for student
Life upper-Intermediate B2 Workbook for student
 
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptxChapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
 
How to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP ModuleHow to Add Chatter in the odoo 17 ERP Module
How to Add Chatter in the odoo 17 ERP Module
 

CSS Language

  • 2. What is the language that describes the style of an HTML document? CSS describes how HTML elements should be displayed
  • 3. body, h1, p are called selector Background-color, color ...are called property Lightblue, white, ...are called value {background-color: lightblue}...is called declaration
  • 5. CSS box model:The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
  • 6. Explanation of the different parts: ● Content - The content of the box, where text and images appear ● Padding - Clears an area around the content. The padding is transparent ● Border - A border that goes around the padding and content ● Margin - Clears an area outside the border. The margin is transparent The box model allows us to add a border around elements, and to define space between elements.
  • 7. let’s use the w3schools tutorial at homeand try to do this homework: - create an HTML page which introduces yourself - Implement the Style using the box model properties in an internal CSS