SlideShare uma empresa Scribd logo
1 de 16
Web Development using HTML and CSS
SIDDHANT SINGH
ENROLLMENT NO - 1901460118
What is Web development?
 Web development usually refers to developing the website for the internet.
 Also known as web programming and it is the creation of dynamic web applications.
 Examples of web applications are facebook or e-commerce site like amazon, etc.
 The main division of web development is front-end development which is also called as client-side development.
Front end development.
 Front-end development refers to producing a web application so that a user can see and interact with them directly.
 The objective of designing a site is to ensure that when the users open up the site they see the information in a format
that is easy to read and relevant.
 The technologies we can use here are – HTML,CSS.
What is HTML?
• HTML stands for Hyper Text Markup Language
• It is the standard markup language for creating Web pages
• It describes the structure of a Web page
• It consists of a series of elements
• Html elements tell the browser how to display the content.
A Simple Html Document.
Example Explained
•The <html> element is the root element of an HTML page
•The <head> element contains meta information about the HTML page
•The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
•The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
Use and Importance of Html.
• HTML is the foundation of a website it contains the information that tells the browser what is on the page in terms of text, links,
where to find images. html is a platform independence means it is possible to create html file on any computer (like windows, Mac
os,etc)with any editor.it is easy to learn because its have a simple structures and it is easy to understand.
• HTML allow video, image and other files to be embedded which is used to create interactive web pages. HTML also embed scripts and
styles, scripts affect the behavior of HTML web pages and styles (Cascading Style Sheets) define the look and layout of web pages.
What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
Use of CSS.
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows
one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS
is independent of HTML and can be used with any XML-based markup language.
CSS Demo – Same page Different Style.
Here the content is same but The presentation style is different.
File – Extensions for Html and Css
• An HTML file is nothing more than plain ASCII text, but all HTML files must have a special file extension for web
browsers to recognize them. This extension is . html.
• When the html document is created and one want to style it than he/she can do it by creating a file named style or
anything by adding the extension .CSS.
Code – Editors.
• Installation process is not a task in html and css by just adding the .html and .css extension the browser will recognize.
• Html and Css can be done only using Notepad but to increase the speed and for convenience Many code – editors
were developed.
• Eg - 1. Vs code.
• 2. Atom.
• 3. Notepad ++.
• 4. Sublime Text.
Some more Examples of html.
Understanding the tags used in Example.
• The heading tags indicate heading on a web page and they are from h1 to h6.
• HTML paragraph or HTML p tag is used to define a paragraph in a webpage.
• <ul> - Defines an unordered list.
• <ol> - Defines an Ordered list.
• <li> - Defines a list item.
• The <body> tag defines the document's body.
Some example of css.
• If we see the previous example we have used class selector and group selector.
• The class selector selects HTML elements with a specific class attribute.
• The grouping selector selects all the HTML elements with the same style definitions.
• The universal selector (*) selects all HTML elements on the page. This is used when the user wants same style all over
the page.
Thank you.

Mais conteúdo relacionado

Mais procurados

Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basicsEliran Eliassy
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation Salman Memon
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to htmlpalhaftab
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html NotesNextGenr
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptWalid Ashraf
 
Html 5-tables-forms-frames (1)
Html 5-tables-forms-frames (1)Html 5-tables-forms-frames (1)
Html 5-tables-forms-frames (1)club23
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Chris Poteet
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout Rachel Andrew
 

Mais procurados (20)

Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Java script
Java scriptJava script
Java script
 
Html
HtmlHtml
Html
 
Html basics
Html basicsHtml basics
Html basics
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
 
Html coding
Html codingHtml coding
Html coding
 
Html ppt
Html pptHtml ppt
Html ppt
 
Css
CssCss
Css
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 
Html 5-tables-forms-frames (1)
Html 5-tables-forms-frames (1)Html 5-tables-forms-frames (1)
Html 5-tables-forms-frames (1)
 
HTML5
HTML5HTML5
HTML5
 
Html ppt
Html pptHtml ppt
Html ppt
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Html
HtmlHtml
Html
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 

Semelhante a Web development using HTML and CSS

Web Concepts - an introduction - introduction
Web Concepts - an introduction - introductionWeb Concepts - an introduction - introduction
Web Concepts - an introduction - introductionclement swarnappa
 
02 From HTML tags to XHTML
02 From HTML tags to XHTML02 From HTML tags to XHTML
02 From HTML tags to XHTMLRich Dron
 
What Is the Use Of HTML.pptx
What Is the Use Of HTML.pptxWhat Is the Use Of HTML.pptx
What Is the Use Of HTML.pptxManviMulani
 
Web development using html and wordpress
Web development using html and wordpressWeb development using html and wordpress
Web development using html and wordpressDakshata Gavand
 
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptxWELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptxHeroVins
 
Html power point
Html power pointHtml power point
Html power pointmarkbg
 
Ndim1 2009 Web Design
Ndim1 2009 Web DesignNdim1 2009 Web Design
Ndim1 2009 Web Designguest0121dcd7
 
Pm shandilya-s-wcodew-web-methodology
Pm shandilya-s-wcodew-web-methodologyPm shandilya-s-wcodew-web-methodology
Pm shandilya-s-wcodew-web-methodologyprashant mishra
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSSSyed Sami
 

Semelhante a Web development using HTML and CSS (20)

Web Concepts - an introduction - introduction
Web Concepts - an introduction - introductionWeb Concepts - an introduction - introduction
Web Concepts - an introduction - introduction
 
02 From HTML tags to XHTML
02 From HTML tags to XHTML02 From HTML tags to XHTML
02 From HTML tags to XHTML
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Html-meeting1-1.pptx
Html-meeting1-1.pptxHtml-meeting1-1.pptx
Html-meeting1-1.pptx
 
Introduction To HTML
Introduction To HTMLIntroduction To HTML
Introduction To HTML
 
What Is the Use Of HTML.pptx
What Is the Use Of HTML.pptxWhat Is the Use Of HTML.pptx
What Is the Use Of HTML.pptx
 
Iwt module 1
Iwt  module 1Iwt  module 1
Iwt module 1
 
Unit 01 (1).pdf
Unit 01 (1).pdfUnit 01 (1).pdf
Unit 01 (1).pdf
 
Web development using html and wordpress
Web development using html and wordpressWeb development using html and wordpress
Web development using html and wordpress
 
Html
HtmlHtml
Html
 
HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
 
Grade 10 COMPUTER
Grade 10 COMPUTERGrade 10 COMPUTER
Grade 10 COMPUTER
 
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptxWELCOME-FOLKS--CSS.-AND-HTMLS.pptx
WELCOME-FOLKS--CSS.-AND-HTMLS.pptx
 
Introduction css
Introduction cssIntroduction css
Introduction css
 
Introduction css
Introduction cssIntroduction css
Introduction css
 
Html power point
Html power pointHtml power point
Html power point
 
HTML and CSS 2.0 .pdf
HTML and CSS 2.0 .pdfHTML and CSS 2.0 .pdf
HTML and CSS 2.0 .pdf
 
Ndim1 2009 Web Design
Ndim1 2009 Web DesignNdim1 2009 Web Design
Ndim1 2009 Web Design
 
Pm shandilya-s-wcodew-web-methodology
Pm shandilya-s-wcodew-web-methodologyPm shandilya-s-wcodew-web-methodology
Pm shandilya-s-wcodew-web-methodology
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 

Último

COST-EFFETIVE and Energy Efficient BUILDINGS ptx
COST-EFFETIVE  and Energy Efficient BUILDINGS ptxCOST-EFFETIVE  and Energy Efficient BUILDINGS ptx
COST-EFFETIVE and Energy Efficient BUILDINGS ptxJIT KUMAR GUPTA
 
Hospital management system project report.pdf
Hospital management system project report.pdfHospital management system project report.pdf
Hospital management system project report.pdfKamal Acharya
 
1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf
1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf
1_Introduction + EAM Vocabulary + how to navigate in EAM.pdfAldoGarca30
 
Computer Networks Basics of Network Devices
Computer Networks  Basics of Network DevicesComputer Networks  Basics of Network Devices
Computer Networks Basics of Network DevicesChandrakantDivate1
 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXssuser89054b
 
DeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakesDeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakesMayuraD1
 
Moment Distribution Method For Btech Civil
Moment Distribution Method For Btech CivilMoment Distribution Method For Btech Civil
Moment Distribution Method For Btech CivilVinayVitekari
 
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...Arindam Chakraborty, Ph.D., P.E. (CA, TX)
 
Online food ordering system project report.pdf
Online food ordering system project report.pdfOnline food ordering system project report.pdf
Online food ordering system project report.pdfKamal Acharya
 
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...HenryBriggs2
 
Employee leave management system project.
Employee leave management system project.Employee leave management system project.
Employee leave management system project.Kamal Acharya
 
Thermal Engineering-R & A / C - unit - V
Thermal Engineering-R & A / C - unit - VThermal Engineering-R & A / C - unit - V
Thermal Engineering-R & A / C - unit - VDineshKumar4165
 
Work-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxWork-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxJuliansyahHarahap1
 
PE 459 LECTURE 2- natural gas basic concepts and properties
PE 459 LECTURE 2- natural gas basic concepts and propertiesPE 459 LECTURE 2- natural gas basic concepts and properties
PE 459 LECTURE 2- natural gas basic concepts and propertiessarkmank1
 
Introduction to Data Visualization,Matplotlib.pdf
Introduction to Data Visualization,Matplotlib.pdfIntroduction to Data Visualization,Matplotlib.pdf
Introduction to Data Visualization,Matplotlib.pdfsumitt6_25730773
 
Jaipur ❤CALL GIRL 0000000000❤CALL GIRLS IN Jaipur ESCORT SERVICE❤CALL GIRL IN...
Jaipur ❤CALL GIRL 0000000000❤CALL GIRLS IN Jaipur ESCORT SERVICE❤CALL GIRL IN...Jaipur ❤CALL GIRL 0000000000❤CALL GIRLS IN Jaipur ESCORT SERVICE❤CALL GIRL IN...
Jaipur ❤CALL GIRL 0000000000❤CALL GIRLS IN Jaipur ESCORT SERVICE❤CALL GIRL IN...jabtakhaidam7
 
"Lesotho Leaps Forward: A Chronicle of Transformative Developments"
"Lesotho Leaps Forward: A Chronicle of Transformative Developments""Lesotho Leaps Forward: A Chronicle of Transformative Developments"
"Lesotho Leaps Forward: A Chronicle of Transformative Developments"mphochane1998
 
Double Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torqueDouble Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torqueBhangaleSonal
 
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Service
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best ServiceTamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Service
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Servicemeghakumariji156
 

Último (20)

COST-EFFETIVE and Energy Efficient BUILDINGS ptx
COST-EFFETIVE  and Energy Efficient BUILDINGS ptxCOST-EFFETIVE  and Energy Efficient BUILDINGS ptx
COST-EFFETIVE and Energy Efficient BUILDINGS ptx
 
Hospital management system project report.pdf
Hospital management system project report.pdfHospital management system project report.pdf
Hospital management system project report.pdf
 
1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf
1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf
1_Introduction + EAM Vocabulary + how to navigate in EAM.pdf
 
Computer Networks Basics of Network Devices
Computer Networks  Basics of Network DevicesComputer Networks  Basics of Network Devices
Computer Networks Basics of Network Devices
 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
 
DeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakesDeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakes
 
Moment Distribution Method For Btech Civil
Moment Distribution Method For Btech CivilMoment Distribution Method For Btech Civil
Moment Distribution Method For Btech Civil
 
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
 
Online food ordering system project report.pdf
Online food ordering system project report.pdfOnline food ordering system project report.pdf
Online food ordering system project report.pdf
 
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
 
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
 
Employee leave management system project.
Employee leave management system project.Employee leave management system project.
Employee leave management system project.
 
Thermal Engineering-R & A / C - unit - V
Thermal Engineering-R & A / C - unit - VThermal Engineering-R & A / C - unit - V
Thermal Engineering-R & A / C - unit - V
 
Work-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxWork-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptx
 
PE 459 LECTURE 2- natural gas basic concepts and properties
PE 459 LECTURE 2- natural gas basic concepts and propertiesPE 459 LECTURE 2- natural gas basic concepts and properties
PE 459 LECTURE 2- natural gas basic concepts and properties
 
Introduction to Data Visualization,Matplotlib.pdf
Introduction to Data Visualization,Matplotlib.pdfIntroduction to Data Visualization,Matplotlib.pdf
Introduction to Data Visualization,Matplotlib.pdf
 
Jaipur ❤CALL GIRL 0000000000❤CALL GIRLS IN Jaipur ESCORT SERVICE❤CALL GIRL IN...
Jaipur ❤CALL GIRL 0000000000❤CALL GIRLS IN Jaipur ESCORT SERVICE❤CALL GIRL IN...Jaipur ❤CALL GIRL 0000000000❤CALL GIRLS IN Jaipur ESCORT SERVICE❤CALL GIRL IN...
Jaipur ❤CALL GIRL 0000000000❤CALL GIRLS IN Jaipur ESCORT SERVICE❤CALL GIRL IN...
 
"Lesotho Leaps Forward: A Chronicle of Transformative Developments"
"Lesotho Leaps Forward: A Chronicle of Transformative Developments""Lesotho Leaps Forward: A Chronicle of Transformative Developments"
"Lesotho Leaps Forward: A Chronicle of Transformative Developments"
 
Double Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torqueDouble Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torque
 
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Service
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best ServiceTamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Service
Tamil Call Girls Bhayandar WhatsApp +91-9930687706, Best Service
 

Web development using HTML and CSS

  • 1. Web Development using HTML and CSS SIDDHANT SINGH ENROLLMENT NO - 1901460118
  • 2. What is Web development?  Web development usually refers to developing the website for the internet.  Also known as web programming and it is the creation of dynamic web applications.  Examples of web applications are facebook or e-commerce site like amazon, etc.  The main division of web development is front-end development which is also called as client-side development.
  • 3. Front end development.  Front-end development refers to producing a web application so that a user can see and interact with them directly.  The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant.  The technologies we can use here are – HTML,CSS.
  • 4. What is HTML? • HTML stands for Hyper Text Markup Language • It is the standard markup language for creating Web pages • It describes the structure of a Web page • It consists of a series of elements • Html elements tell the browser how to display the content.
  • 5. A Simple Html Document. Example Explained •The <html> element is the root element of an HTML page •The <head> element contains meta information about the HTML page •The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) •The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
  • 6. Use and Importance of Html. • HTML is the foundation of a website it contains the information that tells the browser what is on the page in terms of text, links, where to find images. html is a platform independence means it is possible to create html file on any computer (like windows, Mac os,etc)with any editor.it is easy to learn because its have a simple structures and it is easy to understand. • HTML allow video, image and other files to be embedded which is used to create interactive web pages. HTML also embed scripts and styles, scripts affect the behavior of HTML web pages and styles (Cascading Style Sheets) define the look and layout of web pages.
  • 7. What is CSS? • CSS stands for Cascading Style Sheets • CSS describes how HTML elements are to be displayed on screen, paper, or in other media • CSS saves a lot of work. It can control the layout of multiple web pages all at once • External stylesheets are stored in CSS files
  • 8. Use of CSS. CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language.
  • 9. CSS Demo – Same page Different Style. Here the content is same but The presentation style is different.
  • 10. File – Extensions for Html and Css • An HTML file is nothing more than plain ASCII text, but all HTML files must have a special file extension for web browsers to recognize them. This extension is . html. • When the html document is created and one want to style it than he/she can do it by creating a file named style or anything by adding the extension .CSS.
  • 11. Code – Editors. • Installation process is not a task in html and css by just adding the .html and .css extension the browser will recognize. • Html and Css can be done only using Notepad but to increase the speed and for convenience Many code – editors were developed. • Eg - 1. Vs code. • 2. Atom. • 3. Notepad ++. • 4. Sublime Text.
  • 12. Some more Examples of html.
  • 13. Understanding the tags used in Example. • The heading tags indicate heading on a web page and they are from h1 to h6. • HTML paragraph or HTML p tag is used to define a paragraph in a webpage. • <ul> - Defines an unordered list. • <ol> - Defines an Ordered list. • <li> - Defines a list item. • The <body> tag defines the document's body.
  • 15. • If we see the previous example we have used class selector and group selector. • The class selector selects HTML elements with a specific class attribute. • The grouping selector selects all the HTML elements with the same style definitions. • The universal selector (*) selects all HTML elements on the page. This is used when the user wants same style all over the page.