SlideShare a Scribd company logo
6.53
CSS
WHAT IS CSS
CSS stands for Cascading
Style Sheets. It is a style sheet
language which is used to
describe the look and
formatting of a document
written in markup language.
CSS is used along with HTML
and JavaScript in most
websites to create user
interfaces for web applications
and user interfaces for many
mobile applications.
7/1/20XX 2
WHAT DOES CSS
DO?
‱You can add new looks to
your old HTML documents.
‱You can completely
change the look of your
website with only a few
changes in CSS code.
7/1/20XX 3
WHY USE CSS
THESE ARE THE THREE MAJOR BENEFITS OF CSS:
7/1/20XX 4
1)
Solves a
big
problem
2) Saves
a lot of
time
3) Provide
more
attributes
CSS SYNTAX
A CSS RULE SET CONTAINS A SELECTOR AND A DECLARATION BLOCK.
THERE ARE THREE TYPES OF CSS
‱ Inline CSS
‱ Internal or Embedded CSS
‱ External CSS
INLINE CSS
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:#009900; font-size:50px;
font-style:italic; text-align:center;">
ComSci
</p>
</body>
</html>
INTERNAL OR EMBEDDED CSS
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div class ="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>
EXTERNAL CSS
body { background-color:powderblue; }
.main { text-align:center; }
.bg { color:#009900; font-size:50px; font-
weight:bold; }
#text { font-style:bold; font-size:20px; }
ADDING CSS IN HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=“oms.css"/>
</head>
<body>
<div class = "main">
<div class =“gg">HEllo</div>
<div id ="geeks">
Aim High ComSci
</div>
</div>
</body>
</html>
THANK YOU
7/1/20XX Pitch deck title 11

More Related Content

Similar to MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx (20)

PPTX
Intro to CSS
Theo Crithary
 
PPTX
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
PPTX
Beginners css tutorial for web designers
Singsys Pte Ltd
 
PPTX
Cascading Styling Sheets(CSS) simple design language intended to transform th...
JebaRaj26
 
PPTX
chitra
sweet chitra
 
PPT
Cascading style sheet (css)]
9574395990
 
PPTX
Css(cascading style sheets)
akhand Akhandenator
 
PPTX
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
PPSX
CSS tutorial
Shajed Talukder
 
PDF
Css
Kamal Acharya
 
PPTX
Css
Hemant Saini
 
PPTX
Upstate CSCI 450 WebDev Chapter 3
DanWooster1
 
PPTX
Css
veena parihar
 
PPTX
Cashcading stylesheets
reddivarihareesh
 
PPTX
Cascading Style Sheets for web browser.pptx
alvindalejoyosa1
 
PPT
Css siva
ch samaram
 
PPT
Css siva
ch samaram
 
PPTX
Css and its types
Mansi Mahadik
 
PPTX
Cascading Style Sheets (CSS) - An introduction
rachaelboyer
 
Intro to CSS
Theo Crithary
 
v5-introduction to html-css-210321161444.pptx
hannahroseline2
 
Beginners css tutorial for web designers
Singsys Pte Ltd
 
Cascading Styling Sheets(CSS) simple design language intended to transform th...
JebaRaj26
 
chitra
sweet chitra
 
Cascading style sheet (css)]
9574395990
 
Css(cascading style sheets)
akhand Akhandenator
 
Cascading style sheet, CSS Box model, Table in CSS
SherinRappai
 
CSS tutorial
Shajed Talukder
 
Upstate CSCI 450 WebDev Chapter 3
DanWooster1
 
Cashcading stylesheets
reddivarihareesh
 
Cascading Style Sheets for web browser.pptx
alvindalejoyosa1
 
Css siva
ch samaram
 
Css siva
ch samaram
 
Css and its types
Mansi Mahadik
 
Cascading Style Sheets (CSS) - An introduction
rachaelboyer
 

More from ArjayBalberan1 (20)

PDF
PPE-Module-1.2 PPE-Module-1.2 PPE-Module-1.2.pdf
ArjayBalberan1
 
PDF
PPE-Module-1.1 PPE-Module-1.1 PPE-Module-1.1.pdf
ArjayBalberan1
 
PPTX
LESSON 5 LESSON 5 LESSON 5 LESSON 5.pptx
ArjayBalberan1
 
PPTX
LESSON 1 AUTOMATA LESSON 1 AUTOMATA.pptx
ArjayBalberan1
 
PPTX
AUTOMATA AUTOMATA Automata10Chapter-8-and-9.pptx
ArjayBalberan1
 
PPTX
AUTOMATA AUTOMATA AUTOMATAAutomata9Chapter8.pptx
ArjayBalberan1
 
PPTX
AUTOMATA AUTOMATA Automata8Chapter7.pptx
ArjayBalberan1
 
PPTX
AUTOMATA AUTOMATA AUTOMATAAutomata7Chapter6.pptx
ArjayBalberan1
 
PPTX
AUTOMATA AUTOMATA AUTOMATA Automata6Chapter5.pptx
ArjayBalberan1
 
PPTX
AUTOMATA AUTOMATA Automata5Chapter4.pptx
ArjayBalberan1
 
PPTX
AUTOMATA AUTOMATA Automata4Chapter3.pptx
ArjayBalberan1
 
PPTX
AUTOMATA THEORY AUTOMATA THEORYAutomata3Chapter2.pptx
ArjayBalberan1
 
PPTX
automata theory and formal languages Automata2Chapter1.pptx
ArjayBalberan1
 
PPTX
Group-1 (1) Group-1 (1) Group-1 (1)Group-1 (1).pptx
ArjayBalberan1
 
PPTX
Introduction to Algorithms Introduction to Algorithms.pptx
ArjayBalberan1
 
PPTX
MYSQL DATABASE MYSQL DATABASEGroup-1.pptx
ArjayBalberan1
 
PPTX
Appdev appdev appdev app devAPPDEV 1.2.pptx
ArjayBalberan1
 
PPTX
Rizals-Family-Childhood-Early-Education.pptx
ArjayBalberan1
 
PPTX
MYSQL DATABASE Operating System Part2 (1).pptx
ArjayBalberan1
 
PPTX
MYSQL DATABASE APP DEV POWERPOINT 1.pptx
ArjayBalberan1
 
PPE-Module-1.2 PPE-Module-1.2 PPE-Module-1.2.pdf
ArjayBalberan1
 
PPE-Module-1.1 PPE-Module-1.1 PPE-Module-1.1.pdf
ArjayBalberan1
 
LESSON 5 LESSON 5 LESSON 5 LESSON 5.pptx
ArjayBalberan1
 
LESSON 1 AUTOMATA LESSON 1 AUTOMATA.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA Automata10Chapter-8-and-9.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA AUTOMATAAutomata9Chapter8.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA Automata8Chapter7.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA AUTOMATAAutomata7Chapter6.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA AUTOMATA Automata6Chapter5.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA Automata5Chapter4.pptx
ArjayBalberan1
 
AUTOMATA AUTOMATA Automata4Chapter3.pptx
ArjayBalberan1
 
AUTOMATA THEORY AUTOMATA THEORYAutomata3Chapter2.pptx
ArjayBalberan1
 
automata theory and formal languages Automata2Chapter1.pptx
ArjayBalberan1
 
Group-1 (1) Group-1 (1) Group-1 (1)Group-1 (1).pptx
ArjayBalberan1
 
Introduction to Algorithms Introduction to Algorithms.pptx
ArjayBalberan1
 
MYSQL DATABASE MYSQL DATABASEGroup-1.pptx
ArjayBalberan1
 
Appdev appdev appdev app devAPPDEV 1.2.pptx
ArjayBalberan1
 
Rizals-Family-Childhood-Early-Education.pptx
ArjayBalberan1
 
MYSQL DATABASE Operating System Part2 (1).pptx
ArjayBalberan1
 
MYSQL DATABASE APP DEV POWERPOINT 1.pptx
ArjayBalberan1
 
Ad

Recently uploaded (20)

PDF
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
PPTX
Wondershare Filmora Crack Free Download 2025
josanj305
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
PDF
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PDF
🚀 Let’s Build Our First Slack Workflow! 🔧.pdf
SanjeetMishra29
 
PDF
“ONNX and Python to C++: State-of-the-art Graph Compilation,” a Presentation ...
Edge AI and Vision Alliance
 
PDF
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
PPTX
CapCut Pro PC Crack Latest Version Free Free
josanj305
 
PDF
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
PDF
Home Cleaning App Development Services.pdf
V3cube
 
PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
PDF
NASA A Researcher’s Guide to International Space Station : Fundamental Physics
Dr. PANKAJ DHUSSA
 
PPTX
Essential Content-centric Plugins for your Website
Laura Byrne
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
PPTX
Securing Model Context Protocol with Keycloak: AuthN/AuthZ for MCP Servers
Hitachi, Ltd. OSS Solution Center.
 
PDF
Linux schedulers for fun and profit with SchedKit
Alessio Biancalana
 
PPTX
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
PDF
NASA A Researcher’s Guide to International Space Station : Earth Observations
Dr. PANKAJ DHUSSA
 
PDF
Modern Decentralized Application Architectures.pdf
Kalema Edgar
 
PDF
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
Transforming Utility Networks: Large-scale Data Migrations with FME
Safe Software
 
Wondershare Filmora Crack Free Download 2025
josanj305
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
🚀 Let’s Build Our First Slack Workflow! 🔧.pdf
SanjeetMishra29
 
“ONNX and Python to C++: State-of-the-art Graph Compilation,” a Presentation ...
Edge AI and Vision Alliance
 
Automating Feature Enrichment and Station Creation in Natural Gas Utility Net...
Safe Software
 
CapCut Pro PC Crack Latest Version Free Free
josanj305
 
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
Home Cleaning App Development Services.pdf
V3cube
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
NASA A Researcher’s Guide to International Space Station : Fundamental Physics
Dr. PANKAJ DHUSSA
 
Essential Content-centric Plugins for your Website
Laura Byrne
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
Securing Model Context Protocol with Keycloak: AuthN/AuthZ for MCP Servers
Hitachi, Ltd. OSS Solution Center.
 
Linux schedulers for fun and profit with SchedKit
Alessio Biancalana
 
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
NASA A Researcher’s Guide to International Space Station : Earth Observations
Dr. PANKAJ DHUSSA
 
Modern Decentralized Application Architectures.pdf
Kalema Edgar
 
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
Ad

MYSQL DATABASE MYSQL DATABASE MYSQL DATABASECSS.pptx

  • 2. WHAT IS CSS CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications. 7/1/20XX 2
  • 3. WHAT DOES CSS DO? ‱You can add new looks to your old HTML documents. ‱You can completely change the look of your website with only a few changes in CSS code. 7/1/20XX 3
  • 4. WHY USE CSS THESE ARE THE THREE MAJOR BENEFITS OF CSS: 7/1/20XX 4 1) Solves a big problem 2) Saves a lot of time 3) Provide more attributes
  • 5. CSS SYNTAX A CSS RULE SET CONTAINS A SELECTOR AND A DECLARATION BLOCK.
  • 6. THERE ARE THREE TYPES OF CSS ‱ Inline CSS ‱ Internal or Embedded CSS ‱ External CSS
  • 7. INLINE CSS <!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:#009900; font-size:50px; font-style:italic; text-align:center;"> ComSci </p> </body> </html>
  • 8. INTERNAL OR EMBEDDED CSS <!DOCTYPE html> <html> <head> <title>Internal CSS</title> <style> .main { text-align:center; } .GFG { color:#009900; font-size:50px; font-weight:bold; } .geeks { font-style:bold; font-size:20px; } </style> </head> <body> <div class = "main"> <div class ="GFG">GeeksForGeeks</div> <div class ="geeks"> A computer science portal for geeks </div> </div> </body> </html>
  • 9. EXTERNAL CSS body { background-color:powderblue; } .main { text-align:center; } .bg { color:#009900; font-size:50px; font- weight:bold; } #text { font-style:bold; font-size:20px; }
  • 10. ADDING CSS IN HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href=“oms.css"/> </head> <body> <div class = "main"> <div class =“gg">HEllo</div> <div id ="geeks"> Aim High ComSci </div> </div> </body> </html>
  • 11. THANK YOU 7/1/20XX Pitch deck title 11

Editor's Notes

  • #5: Before CSS, tags like font, color, background style, element alignments, border and size had to be repeated on every web page. This was a very long process. For example: If you are developing a large website where fonts and color information are added on every single page, it will be become a long and expensive process.  CSS style definitions are saved in external CSS files so it is possible to change the entire website by changing just one file. CSS provides more detailed attributes than plain HTML to define the look and feel of the website.
  • #6: Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>, <title> etc. Declaration Block: The declaration block can contain one or more declarations separated by a semicolon. For the above example, there are two declarations: color: yellow; font-size: 11 px; Each declaration contains a property name and value, separated by a colon. Property: A Property is a type of attribute of HTML element. It could be color, border etc. Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to color property.
  • #7: Inline CSS: Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is embedded within the HTML file.  External CSS: External CSS contains separate CSS file which contains only style property with the help of tag attributes (For example class, id, heading, 
 etc). CSS property written in a separate file with .css extension and should be linked to the HTML document using link tag. 
  • #11: Created external style sheet   link tag is used to link the external style sheet with the html webpage. href attribute is used to specify the location of the external style sheet file.