SlideShare a Scribd company logo
PHP -  Introduction to PHP CSS
Introduction to PHPIntroduction to PHP
CSSCSS
Objectives:
- “What is CSS?”
- Structure of CSS
- How to use CSS in your webpage
Web Workshop: CSS
CSS stands for “Cascading Style Sheets”
Cascading: refers to the procedure that determines
which style will apply to a certain section, if you
have more than one style rule.
What is CSS?
CSS stands for “Cascading Style Sheets”
Style: how you want a certain part of your page to
look. You can set things like color, margins, font, etc
for things like tables, paragraphs, and headings.
What is CSS?
CSS stands for “Cascading Style Sheets”
Sheets: the “sheets” are like templates, or a set of
rules, for determining how the webpage will look.
What is CSS?
So, CSS (all together) is a styling language – a set of
rules to tell browsers how your webpage should
look.
What is CSS?
“Style” is a command that you set to tell the browser
how a certain section of your webpage should look.
You can use style on many HTML “elements”
(like <p> <h1> <table> etc)
What is “Style”
Two parts: (1) selector and (2) declaration.
Selector: the HTML element you want to add style to.
<p> <h1> <table> etc
Declaration: the statement of style for that element.
Made up of property and value.
How to write style rules
Selector {declaration;}
Declaration = {property: value;}
Property: what aspect you want to change
ex: color, font, margins, etc.
Value: the exact setting for that aspect.
ex: red, italic, 40px, etc.
How to write style rules
selector {property: value;}
Essentially means:
The thing I want to change
{the aspect of that thing I want to change: what I
want it to be;}
How to write style rules
Selector {property: value;}
h1 {color: red;}
Means: Speaking of my heading1, I want the text
color to be red.
How to write style rules
Selector {property: value;}
I want the color of the text in my paragraph
to be yellow.
How to write style rules
p {color: yellow;}
This is the text in this paragraph.
Selector {property: value;}
h1 {color: blue;
background-color: green;}
Means:
Speaking of my heading1, I want the text color to be
blue and the background color to be green.
How to write style rules
Selector {property: value;}
I want the text color of my link to be red
and the background color to be yellow.
How to write style rules
a{color: red;background-color: yellow;}
This is my link
There are three types of style-rule-places that we will
cover:
- Inlined
- Internal Style Sheet
- External Style Sheet
Where do I put my style rules?
<html>
<head><title>My Wonderful Example</title>
</head>
<body>
<p>What was I thinking?</p>
</body>
</html>
a) Inlined example-1
Original html
code
a) Inlined example-2
<body>
<p style=“text-align: center; font- weight:
bold; color: yellow;”>What was I thinking?</p>
</body>
What was I thinking?
<head><title>My Wonderful Example</title>
<style type=“text/css”>
body {
text-align: left;
font-family: trebuchet,
verdana;}
</style>
</head>
b) Internal-1
b) Internal-2
<head><title>My Wonderful Example</title>
<style type=“text/css”>
body
{
text-align: left;
font-family: Trebuchet,
verdana;
}
</style>
</head>
Internal: Statement of style
<style type=“text/css”>
…
</style>
this is a style
sheet (style type)
written (text) in
css (CSS)
language
Internal: Brackets & Declaration
<style type=“text/css”>
body
{
text-align: left;
font-family: trebuchet, verdana;
}
</style>
I want the
“align text”
property to be
given the value
of “left”
c) External
<html>
<head><title>My Way</title>
<link rel="stylesheet"
href="http://www2.hawaii.edu/~myway. css"
type="text/css“>
</head>
<body> </body>
</html> Link to a
separate css page
ThankThank You !!!You !!!
For More Information click below link:
Follow Us on:
http://vibranttechnologies.co.in/php-classes-in-mumbai.html
Ad

More Related Content

What's hot (17)

Introduction to css & its attributes with syntax
Introduction to css & its attributes with syntaxIntroduction to css & its attributes with syntax
Introduction to css & its attributes with syntax
priyadharshini murugan
 
Fwd week2 tw-20120903
Fwd week2 tw-20120903Fwd week2 tw-20120903
Fwd week2 tw-20120903
TerryWeber
 
Web programming css
Web programming cssWeb programming css
Web programming css
Uma mohan
 
Css presentation introdution with sample basic projects
Css presentation introdution with sample basic projectsCss presentation introdution with sample basic projects
Css presentation introdution with sample basic projects
Digital Shende
 
Css1
Css1Css1
Css1
Pulkit Tanwar
 
Css intro
Css introCss intro
Css intro
Andz Bass
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
Evolution Network
 
Basic HTML/CSS
Basic HTML/CSSBasic HTML/CSS
Basic HTML/CSS
Chris Heiden
 
CSS- Cascading Style Sheet
CSS- Cascading Style SheetCSS- Cascading Style Sheet
CSS- Cascading Style Sheet
Codewizacademy
 
CSS
CSSCSS
CSS
seedinteractive
 
Css inclusion
Css   inclusionCss   inclusion
Css inclusion
AbhishekMondal42
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
Marc Steel
 
Session Two css
Session Two cssSession Two css
Session Two css
Mustafa Saeed
 
Html Expression Web
Html Expression WebHtml Expression Web
Html Expression Web
Mark Frydenberg
 
CSS
CSSCSS
CSS
venkatachalam84
 
Cascading style sheet (css)]
Cascading style sheet (css)]Cascading style sheet (css)]
Cascading style sheet (css)]
9574395990
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
tutorialsruby
 

Similar to PHP - Introduction to PHP CSS (20)

Unit 2 Internet and web technology CSS report
Unit 2 Internet and web technology CSS reportUnit 2 Internet and web technology CSS report
Unit 2 Internet and web technology CSS report
ajaysahusistec
 
html-css
html-csshtml-css
html-css
Dhirendra Chauhan
 
CSS – CASCADING STYLE SHEET - MY_PPT.pptx
CSS – CASCADING STYLE SHEET - MY_PPT.pptxCSS – CASCADING STYLE SHEET - MY_PPT.pptx
CSS – CASCADING STYLE SHEET - MY_PPT.pptx
IorlahaSamuel1
 
CSS – CASCADING STYLE SHEET - MY_PPT.pptx
CSS – CASCADING STYLE SHEET - MY_PPT.pptxCSS – CASCADING STYLE SHEET - MY_PPT.pptx
CSS – CASCADING STYLE SHEET - MY_PPT.pptx
IorlahaSamuel1
 
v5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptxv5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
v5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptxv5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
Make Css easy : easy tips for css
Make Css easy : easy tips for cssMake Css easy : easy tips for css
Make Css easy : easy tips for css
shabab shihan
 
Cascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSSCascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
Unitegergergegegegetgegegegegegeg-2-CSS.pptx
Unitegergergegegegetgegegegegegeg-2-CSS.pptxUnitegergergegegegetgegegegegegeg-2-CSS.pptx
Unitegergergegegegetgegegegegegeg-2-CSS.pptx
VikasTuwar1
 
CSS
CSSCSS
CSS
Raja Kumar Ranjan
 
css1.ppt
css1.pptcss1.ppt
css1.ppt
BalasundaramSr
 
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.pptwaxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
Ismaciil2
 
CSS
CSSCSS
CSS
People Strategists
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
vishal choudhary
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
Sanjeev Kumar
 
CSS notes
CSS notesCSS notes
CSS notes
Rajendra Prasad
 
Cascading Style Sheets By Mukesh
Cascading Style Sheets By MukeshCascading Style Sheets By Mukesh
Cascading Style Sheets By Mukesh
Mukesh Kumar
 
BITM3730 9-19.pptx
BITM3730 9-19.pptxBITM3730 9-19.pptx
BITM3730 9-19.pptx
MattMarino13
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
Vladimir Valencia
 
Css
CssCss
Css
Venkat Krishnan
 
Unit 2 Internet and web technology CSS report
Unit 2 Internet and web technology CSS reportUnit 2 Internet and web technology CSS report
Unit 2 Internet and web technology CSS report
ajaysahusistec
 
CSS – CASCADING STYLE SHEET - MY_PPT.pptx
CSS – CASCADING STYLE SHEET - MY_PPT.pptxCSS – CASCADING STYLE SHEET - MY_PPT.pptx
CSS – CASCADING STYLE SHEET - MY_PPT.pptx
IorlahaSamuel1
 
CSS – CASCADING STYLE SHEET - MY_PPT.pptx
CSS – CASCADING STYLE SHEET - MY_PPT.pptxCSS – CASCADING STYLE SHEET - MY_PPT.pptx
CSS – CASCADING STYLE SHEET - MY_PPT.pptx
IorlahaSamuel1
 
v5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptxv5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
v5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptxv5-introduction to html-css-210321161444.pptx
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
Make Css easy : easy tips for css
Make Css easy : easy tips for cssMake Css easy : easy tips for css
Make Css easy : easy tips for css
shabab shihan
 
Cascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSSCascading style sheet, CSS Box model, Table in CSS
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
Unitegergergegegegetgegegegegegeg-2-CSS.pptx
Unitegergergegegegetgegegegegegeg-2-CSS.pptxUnitegergergegegegetgegegegegegeg-2-CSS.pptx
Unitegergergegegegetgegegegegegeg-2-CSS.pptx
VikasTuwar1
 
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.pptwaxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
Ismaciil2
 
Cascading Style Sheets By Mukesh
Cascading Style Sheets By MukeshCascading Style Sheets By Mukesh
Cascading Style Sheets By Mukesh
Mukesh Kumar
 
BITM3730 9-19.pptx
BITM3730 9-19.pptxBITM3730 9-19.pptx
BITM3730 9-19.pptx
MattMarino13
 
Ad

More from Vibrant Technologies & Computers (20)

Buisness analyst business analysis overview ppt 5
Buisness analyst business analysis overview ppt 5Buisness analyst business analysis overview ppt 5
Buisness analyst business analysis overview ppt 5
Vibrant Technologies & Computers
 
SQL Introduction to displaying data from multiple tables
SQL Introduction to displaying data from multiple tables  SQL Introduction to displaying data from multiple tables
SQL Introduction to displaying data from multiple tables
Vibrant Technologies & Computers
 
SQL- Introduction to MySQL
SQL- Introduction to MySQLSQL- Introduction to MySQL
SQL- Introduction to MySQL
Vibrant Technologies & Computers
 
SQL- Introduction to SQL database
SQL- Introduction to SQL database SQL- Introduction to SQL database
SQL- Introduction to SQL database
Vibrant Technologies & Computers
 
ITIL - introduction to ITIL
ITIL - introduction to ITILITIL - introduction to ITIL
ITIL - introduction to ITIL
Vibrant Technologies & Computers
 
Salesforce - Introduction to Security & Access
Salesforce -  Introduction to Security & Access Salesforce -  Introduction to Security & Access
Salesforce - Introduction to Security & Access
Vibrant Technologies & Computers
 
Data ware housing- Introduction to olap .
Data ware housing- Introduction to  olap .Data ware housing- Introduction to  olap .
Data ware housing- Introduction to olap .
Vibrant Technologies & Computers
 
Data ware housing - Introduction to data ware housing process.
Data ware housing - Introduction to data ware housing process.Data ware housing - Introduction to data ware housing process.
Data ware housing - Introduction to data ware housing process.
Vibrant Technologies & Computers
 
Data ware housing- Introduction to data ware housing
Data ware housing- Introduction to data ware housingData ware housing- Introduction to data ware housing
Data ware housing- Introduction to data ware housing
Vibrant Technologies & Computers
 
Salesforce - classification of cloud computing
Salesforce - classification of cloud computingSalesforce - classification of cloud computing
Salesforce - classification of cloud computing
Vibrant Technologies & Computers
 
Salesforce - cloud computing fundamental
Salesforce - cloud computing fundamentalSalesforce - cloud computing fundamental
Salesforce - cloud computing fundamental
Vibrant Technologies & Computers
 
SQL- Introduction to PL/SQL
SQL- Introduction to  PL/SQLSQL- Introduction to  PL/SQL
SQL- Introduction to PL/SQL
Vibrant Technologies & Computers
 
SQL- Introduction to advanced sql concepts
SQL- Introduction to  advanced sql conceptsSQL- Introduction to  advanced sql concepts
SQL- Introduction to advanced sql concepts
Vibrant Technologies & Computers
 
SQL Inteoduction to SQL manipulating of data
SQL Inteoduction to SQL manipulating of data   SQL Inteoduction to SQL manipulating of data
SQL Inteoduction to SQL manipulating of data
Vibrant Technologies & Computers
 
SQL- Introduction to SQL Set Operations
SQL- Introduction to SQL Set OperationsSQL- Introduction to SQL Set Operations
SQL- Introduction to SQL Set Operations
Vibrant Technologies & Computers
 
Sas - Introduction to designing the data mart
Sas - Introduction to designing the data martSas - Introduction to designing the data mart
Sas - Introduction to designing the data mart
Vibrant Technologies & Computers
 
Sas - Introduction to working under change management
Sas - Introduction to working under change managementSas - Introduction to working under change management
Sas - Introduction to working under change management
Vibrant Technologies & Computers
 
SAS - overview of SAS
SAS - overview of SASSAS - overview of SAS
SAS - overview of SAS
Vibrant Technologies & Computers
 
Teradata - Architecture of Teradata
Teradata - Architecture of TeradataTeradata - Architecture of Teradata
Teradata - Architecture of Teradata
Vibrant Technologies & Computers
 
Teradata - Restoring Data
Teradata - Restoring Data Teradata - Restoring Data
Teradata - Restoring Data
Vibrant Technologies & Computers
 
Data ware housing - Introduction to data ware housing process.
Data ware housing - Introduction to data ware housing process.Data ware housing - Introduction to data ware housing process.
Data ware housing - Introduction to data ware housing process.
Vibrant Technologies & Computers
 
Ad

Recently uploaded (20)

Big Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur MorganBig Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur Morgan
Arthur Morgan
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
TrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business ConsultingTrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business Consulting
Trs Labs
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
Web and Graphics Designing Training in Rajpura
Web and Graphics Designing Training in RajpuraWeb and Graphics Designing Training in Rajpura
Web and Graphics Designing Training in Rajpura
Erginous Technology
 
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
organizerofv
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
Social Media App Development Company-EmizenTech
Social Media App Development Company-EmizenTechSocial Media App Development Company-EmizenTech
Social Media App Development Company-EmizenTech
Steve Jonas
 
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc
 
Build Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For DevsBuild Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For Devs
Brian McKeiver
 
Unlocking the Power of IVR: A Comprehensive Guide
Unlocking the Power of IVR: A Comprehensive GuideUnlocking the Power of IVR: A Comprehensive Guide
Unlocking the Power of IVR: A Comprehensive Guide
vikasascentbpo
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
TrsLabs Consultants - DeFi, WEb3, Token Listing
TrsLabs Consultants - DeFi, WEb3, Token ListingTrsLabs Consultants - DeFi, WEb3, Token Listing
TrsLabs Consultants - DeFi, WEb3, Token Listing
Trs Labs
 
Vaibhav Gupta BAML: AI work flows without Hallucinations
Vaibhav Gupta BAML: AI work flows without HallucinationsVaibhav Gupta BAML: AI work flows without Hallucinations
Vaibhav Gupta BAML: AI work flows without Hallucinations
john409870
 
MINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PRMINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PR
MIND CTI
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsAI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global Trends
InData Labs
 
Big Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur MorganBig Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur Morgan
Arthur Morgan
 
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfSAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdf
Precisely
 
TrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business ConsultingTrsLabs - Fintech Product & Business Consulting
TrsLabs - Fintech Product & Business Consulting
Trs Labs
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...
BookNet Canada
 
Web and Graphics Designing Training in Rajpura
Web and Graphics Designing Training in RajpuraWeb and Graphics Designing Training in Rajpura
Web and Graphics Designing Training in Rajpura
Erginous Technology
 
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...
organizerofv
 
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADCybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure AD
VICTOR MAESTRE RAMIREZ
 
Social Media App Development Company-EmizenTech
Social Media App Development Company-EmizenTechSocial Media App Development Company-EmizenTech
Social Media App Development Company-EmizenTech
Steve Jonas
 
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...
TrustArc
 
Build Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For DevsBuild Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For Devs
Brian McKeiver
 
Unlocking the Power of IVR: A Comprehensive Guide
Unlocking the Power of IVR: A Comprehensive GuideUnlocking the Power of IVR: A Comprehensive Guide
Unlocking the Power of IVR: A Comprehensive Guide
vikasascentbpo
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
TrsLabs Consultants - DeFi, WEb3, Token Listing
TrsLabs Consultants - DeFi, WEb3, Token ListingTrsLabs Consultants - DeFi, WEb3, Token Listing
TrsLabs Consultants - DeFi, WEb3, Token Listing
Trs Labs
 
Vaibhav Gupta BAML: AI work flows without Hallucinations
Vaibhav Gupta BAML: AI work flows without HallucinationsVaibhav Gupta BAML: AI work flows without Hallucinations
Vaibhav Gupta BAML: AI work flows without Hallucinations
john409870
 
MINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PRMINDCTI revenue release Quarter 1 2025 PR
MINDCTI revenue release Quarter 1 2025 PR
MIND CTI
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath MaestroDev Dives: Automate and orchestrate your processes with UiPath Maestro
Dev Dives: Automate and orchestrate your processes with UiPath Maestro
UiPathCommunity
 
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsAI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global Trends
InData Labs
 

PHP - Introduction to PHP CSS

  • 3. Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage Web Workshop: CSS
  • 4. CSS stands for “Cascading Style Sheets” Cascading: refers to the procedure that determines which style will apply to a certain section, if you have more than one style rule. What is CSS?
  • 5. CSS stands for “Cascading Style Sheets” Style: how you want a certain part of your page to look. You can set things like color, margins, font, etc for things like tables, paragraphs, and headings. What is CSS?
  • 6. CSS stands for “Cascading Style Sheets” Sheets: the “sheets” are like templates, or a set of rules, for determining how the webpage will look. What is CSS?
  • 7. So, CSS (all together) is a styling language – a set of rules to tell browsers how your webpage should look. What is CSS?
  • 8. “Style” is a command that you set to tell the browser how a certain section of your webpage should look. You can use style on many HTML “elements” (like <p> <h1> <table> etc) What is “Style”
  • 9. Two parts: (1) selector and (2) declaration. Selector: the HTML element you want to add style to. <p> <h1> <table> etc Declaration: the statement of style for that element. Made up of property and value. How to write style rules
  • 10. Selector {declaration;} Declaration = {property: value;} Property: what aspect you want to change ex: color, font, margins, etc. Value: the exact setting for that aspect. ex: red, italic, 40px, etc. How to write style rules
  • 11. selector {property: value;} Essentially means: The thing I want to change {the aspect of that thing I want to change: what I want it to be;} How to write style rules
  • 12. Selector {property: value;} h1 {color: red;} Means: Speaking of my heading1, I want the text color to be red. How to write style rules
  • 13. Selector {property: value;} I want the color of the text in my paragraph to be yellow. How to write style rules p {color: yellow;} This is the text in this paragraph.
  • 14. Selector {property: value;} h1 {color: blue; background-color: green;} Means: Speaking of my heading1, I want the text color to be blue and the background color to be green. How to write style rules
  • 15. Selector {property: value;} I want the text color of my link to be red and the background color to be yellow. How to write style rules a{color: red;background-color: yellow;} This is my link
  • 16. There are three types of style-rule-places that we will cover: - Inlined - Internal Style Sheet - External Style Sheet Where do I put my style rules?
  • 17. <html> <head><title>My Wonderful Example</title> </head> <body> <p>What was I thinking?</p> </body> </html> a) Inlined example-1 Original html code
  • 18. a) Inlined example-2 <body> <p style=“text-align: center; font- weight: bold; color: yellow;”>What was I thinking?</p> </body> What was I thinking?
  • 19. <head><title>My Wonderful Example</title> <style type=“text/css”> body { text-align: left; font-family: trebuchet, verdana;} </style> </head> b) Internal-1
  • 20. b) Internal-2 <head><title>My Wonderful Example</title> <style type=“text/css”> body { text-align: left; font-family: Trebuchet, verdana; } </style> </head>
  • 21. Internal: Statement of style <style type=“text/css”> … </style> this is a style sheet (style type) written (text) in css (CSS) language
  • 22. Internal: Brackets & Declaration <style type=“text/css”> body { text-align: left; font-family: trebuchet, verdana; } </style> I want the “align text” property to be given the value of “left”
  • 23. c) External <html> <head><title>My Way</title> <link rel="stylesheet" href="http://www2.hawaii.edu/~myway. css" type="text/css“> </head> <body> </body> </html> Link to a separate css page
  • 24. ThankThank You !!!You !!! For More Information click below link: Follow Us on: http://vibranttechnologies.co.in/php-classes-in-mumbai.html

Editor's Notes

  • #10: Selector: the thing I want to make styled: a paragraph, a table, a header, etc. Declaration: what I want to do to my paragraph, table, header, etc.
  • #13: This is if you are writing an embedded style rule!
  • #14: This is if you are writing an embedded style rule!
  • #15: This is if you are writing an embedded style rule!
  • #16: This is if you are writing an embedded style rule!
  • #17: We just saw an example of “inlined” style. Are there any Qs?