SlideShare a Scribd company logo
Introduction to CSS
Why CSS?
• CSS Provides Efficiency in Design and Updates
• CSS relatively easy to use
• Can give you more flexibility and control
• Faster loading pages
• Increased consistency
• Brings more sophistication to web design
• CSS is designed primarily to enable the separation
of document content from document presentation.
Why CSS? (continued)
• W3C standard, started in 1996
• Improves accessibility
– Tables not required for elegance
• Reduces the complexity of pages
– Which in turn has led to more sophistication…
• It’s open up the way for other technologies to be
built on and be supported by CSS. There are dozens,
and still growing.
• Example, “Bootstrap”, which is an open source
framework that combines CSS, HTML and Javascript
CSS Overview
• CSS (Cascading Style Sheets)
• CSS defines HTML display
• Styles were added to HTML 4.0 to solve a
problem
• External Style Sheets are stored in .css files
CSS Syntax
• Selectors
• Declaration
• Properties
• Values
Selectors
• A “selector” is an instruction in a CSS rule set
that tells the browser what elements to
‘select’ for styling.
• Here are some that we will look at:
– element Selector
– id Selector
– class Selector
– grouping Selectors
Element or Tag Selector
• This selector selects tags by tag or “element”
name.
• This selector must match one or more HTML
elements of the same name.
• Easiest to use
Element Selector
p {
text-align: center;
color: red;
}
HTML
<p>UAlbany is one of the SUNY
centers.</p>
ID Selector
• The ID selector as a unique identifier to an element.
• The id selector is used if you want to select a single,
unique element.
• CSS uses a hash or pound sign (#) to indicate it’s ID
• ID's are unique
– IDs in theory, are only supposed to be used once per
page
– In other words, a page would not be validate by W3C
standards.
• Anytime we see ID in the computer world, think
“unique”.
The id Selector
#text1 {
text-align: center;
color: green;
}
<h1 id="text1">Think Spring!</h1>
Class Selector
• This selector allows you to style content
irrespective of what tag you apply it to
• Classes are NOT unique
– Use same class on multiple elements.
– Use multiple classes on the same element.
The class Selector
.center {
text-align: center;
color: green;
}
<h1 class="center">Think Spring!</h1>
<p class="center">Think Spring!</p>
CSS Grouping
• When several selectors share the same declarations, they may be
grouped into a comma-separated list.
• Take this
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
And, do this:
h1, h2, h3 { font-family: sans-serif }
CSS Comments
• As with other computer languages, CSS allows
for comments
• Comments remind you and tell fellow coders
what your CSS does
• Allows you to “flag” code for further review
• Indispensable for large website and
programming projects
CSS Comments
h1 { font-size: 24px; font-
weight: bold; border: 1px solid
black; color: pink; }
/* This will make all <h1>
headers big, bold, pink, and
inside of a thin black
rectangle! */
Ways to Insert CSS
• Externally
• Internally
• Inline styles (inside tags)
Inline Styles
• Insert CSS style right within the HTML tag that
you want to apply them too.
• Very quick
• However, difficult to maintain
• Use sparingly
<h1 style="color:blue;margin-
left:30px;">Think Spring!</h1>
Internal (or Embedded) CSS
• Placed right on top of the page that it will
affect
• As with DTDs, you can internally create a
stylesheet
• They are more convenient for small webpages
• Mixing content and style will cause your pages
to become unwieldy over time.
Internal CSS stylesheet
<html>
<head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>White text on a black background!</p>
</body>
</html>
External Stylesheet
• Why use an external stylesheet?
– It keeps your website design and content separate.
• CSS code is easier to reuse.
• Instead of typing the same CSS code on every web
page you have,
• Merely have many pages refer to a single CSS file
with the "link" tag.
• You can make massive alterations to your web
pages with just a few changes in a single CSS file
External CSS Stylesheet
In your .XSL file, you will link out using this
command:
<head>
<link rel="stylesheet" type="tex
t/css" href="mystyle.css“/>
</head>
Browsers and CSS3
To be
replaced by
project
“Spartan”

More Related Content

Similar to Introduction to CSS.pptx web for web web (20)

Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
vishal choudhary
 
Cashcading stylesheets
Cashcading stylesheetsCashcading stylesheets
Cashcading stylesheets
reddivarihareesh
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
Rafi Haidari
 
Css
CssCss
Css
Kamal Acharya
 
cascading style sheets- About cascading style sheets on the selectors
cascading style sheets- About cascading style sheets on the selectorscascading style sheets- About cascading style sheets on the selectors
cascading style sheets- About cascading style sheets on the selectors
JayanthiM19
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
Abhishek Kesharwani
 
WEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptxWEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptx
karthiksmart21
 
Css
CssCss
Css
Abhishek Kesharwani
 
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 SlidesIntro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
Heather Rock
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
SURYANARAYANBISWAL1
 
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
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
QA TrainingHub
 
Unit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology projectUnit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology project
abhiramhatwar
 
UNIT 3WOP fgfufhbuiibpvihbvpihivbhibvipuuvbiuvboi
UNIT 3WOP fgfufhbuiibpvihbvpihivbhibvipuuvbiuvboiUNIT 3WOP fgfufhbuiibpvihbvpihivbhibvipuuvbiuvboi
UNIT 3WOP fgfufhbuiibpvihbvpihivbhibvipuuvbiuvboi
utsavsd11
 
chitra
chitrachitra
chitra
sweet chitra
 
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
 
CSS 101
CSS 101CSS 101
CSS 101
dunclair
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
vedaste
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
Sohail Christoper
 
Css - Tutorial
Css - TutorialCss - Tutorial
Css - Tutorial
adelaticleanu
 
CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)CSS_Day_ONE (W3schools)
CSS_Day_ONE (W3schools)
Rafi Haidari
 
cascading style sheets- About cascading style sheets on the selectors
cascading style sheets- About cascading style sheets on the selectorscascading style sheets- About cascading style sheets on the selectors
cascading style sheets- About cascading style sheets on the selectors
JayanthiM19
 
WEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptxWEB TECHNOLOGY Unit-2.pptx
WEB TECHNOLOGY Unit-2.pptx
karthiksmart21
 
Intro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 SlidesIntro to HTML and CSS - Class 2 Slides
Intro to HTML and CSS - Class 2 Slides
Heather Rock
 
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
 
Css training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentialsCss training tutorial css3 &amp; css4 essentials
Css training tutorial css3 &amp; css4 essentials
QA TrainingHub
 
Unit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology projectUnit 2 WT-CSS.pptx web technology project
Unit 2 WT-CSS.pptx web technology project
abhiramhatwar
 
UNIT 3WOP fgfufhbuiibpvihbvpihivbhibvipuuvbiuvboi
UNIT 3WOP fgfufhbuiibpvihbvpihivbhibvipuuvbiuvboiUNIT 3WOP fgfufhbuiibpvihbvpihivbhibvipuuvbiuvboi
UNIT 3WOP fgfufhbuiibpvihbvpihivbhibvipuuvbiuvboi
utsavsd11
 
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
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
vedaste
 

More from compengwaelalahmar (20)

week1 computer architecture and design for
week1 computer architecture and design forweek1 computer architecture and design for
week1 computer architecture and design for
compengwaelalahmar
 
HTML-CSS.pptx computer architect design v
HTML-CSS.pptx computer architect design vHTML-CSS.pptx computer architect design v
HTML-CSS.pptx computer architect design v
compengwaelalahmar
 
ITEC229_Chapter8_new.ppt computer architecture
ITEC229_Chapter8_new.ppt computer architectureITEC229_Chapter8_new.ppt computer architecture
ITEC229_Chapter8_new.ppt computer architecture
compengwaelalahmar
 
lec11_CSS.pptx web page description desi
lec11_CSS.pptx web page description desilec11_CSS.pptx web page description desi
lec11_CSS.pptx web page description desi
compengwaelalahmar
 
ilet109_2.pptx web designer web page for
ilet109_2.pptx web designer web page forilet109_2.pptx web designer web page for
ilet109_2.pptx web designer web page for
compengwaelalahmar
 
8.haft design web designer web for web w
8.haft design web designer web for web w8.haft design web designer web for web w
8.haft design web designer web for web w
compengwaelalahmar
 
HTML 3 - Stiller for December design web
HTML 3 - Stiller for December design webHTML 3 - Stiller for December design web
HTML 3 - Stiller for December design web
compengwaelalahmar
 
HTML 1 - Girf desigcomp web design web g
HTML 1 - Girf desigcomp web design web gHTML 1 - Girf desigcomp web design web g
HTML 1 - Girf desigcomp web design web g
compengwaelalahmar
 
software architecturev2.pptx cop computr
software architecturev2.pptx cop computrsoftware architecturev2.pptx cop computr
software architecturev2.pptx cop computr
compengwaelalahmar
 
lec01_intr architecture com computeo.ppt
lec01_intr architecture com computeo.pptlec01_intr architecture com computeo.ppt
lec01_intr architecture com computeo.ppt
compengwaelalahmar
 
lecture-11-1590405846 computer architect
lecture-11-1590405846 computer architectlecture-11-1590405846 computer architect
lecture-11-1590405846 computer architect
compengwaelalahmar
 
Compiler to compiler whatsypechecking.PPT
Compiler to compiler whatsypechecking.PPTCompiler to compiler whatsypechecking.PPT
Compiler to compiler whatsypechecking.PPT
compengwaelalahmar
 
D-lr-parsing compiler how to compiler com
D-lr-parsing compiler how to compiler comD-lr-parsing compiler how to compiler com
D-lr-parsing compiler how to compiler com
compengwaelalahmar
 
Camtasia Getting Started Guide how to design.ppt
Camtasia Getting Started Guide how to design.pptCamtasia Getting Started Guide how to design.ppt
Camtasia Getting Started Guide how to design.ppt
compengwaelalahmar
 
LR_Parser compiler how to compiler lr1 ll1
LR_Parser compiler how to compiler lr1 ll1LR_Parser compiler how to compiler lr1 ll1
LR_Parser compiler how to compiler lr1 ll1
compengwaelalahmar
 
lec00-outline.PPT cpp compiler how to cpp
lec00-outline.PPT cpp compiler how to cpplec00-outline.PPT cpp compiler how to cpp
lec00-outline.PPT cpp compiler how to cpp
compengwaelalahmar
 
A-overview.pptbb cpp introduction how cpp
A-overview.pptbb cpp introduction  how cppA-overview.pptbb cpp introduction  how cpp
A-overview.pptbb cpp introduction how cpp
compengwaelalahmar
 
CS540-2-lecture1.pptgvcxc increment cpp cpp
CS540-2-lecture1.pptgvcxc increment cpp cppCS540-2-lecture1.pptgvcxc increment cpp cpp
CS540-2-lecture1.pptgvcxc increment cpp cpp
compengwaelalahmar
 
1587076798CAES you learn here here ARON.pptx
1587076798CAES you learn here here ARON.pptx1587076798CAES you learn here here ARON.pptx
1587076798CAES you learn here here ARON.pptx
compengwaelalahmar
 
Monitoring_2019_Validator how mointering
Monitoring_2019_Validator how mointeringMonitoring_2019_Validator how mointering
Monitoring_2019_Validator how mointering
compengwaelalahmar
 
week1 computer architecture and design for
week1 computer architecture and design forweek1 computer architecture and design for
week1 computer architecture and design for
compengwaelalahmar
 
HTML-CSS.pptx computer architect design v
HTML-CSS.pptx computer architect design vHTML-CSS.pptx computer architect design v
HTML-CSS.pptx computer architect design v
compengwaelalahmar
 
ITEC229_Chapter8_new.ppt computer architecture
ITEC229_Chapter8_new.ppt computer architectureITEC229_Chapter8_new.ppt computer architecture
ITEC229_Chapter8_new.ppt computer architecture
compengwaelalahmar
 
lec11_CSS.pptx web page description desi
lec11_CSS.pptx web page description desilec11_CSS.pptx web page description desi
lec11_CSS.pptx web page description desi
compengwaelalahmar
 
ilet109_2.pptx web designer web page for
ilet109_2.pptx web designer web page forilet109_2.pptx web designer web page for
ilet109_2.pptx web designer web page for
compengwaelalahmar
 
8.haft design web designer web for web w
8.haft design web designer web for web w8.haft design web designer web for web w
8.haft design web designer web for web w
compengwaelalahmar
 
HTML 3 - Stiller for December design web
HTML 3 - Stiller for December design webHTML 3 - Stiller for December design web
HTML 3 - Stiller for December design web
compengwaelalahmar
 
HTML 1 - Girf desigcomp web design web g
HTML 1 - Girf desigcomp web design web gHTML 1 - Girf desigcomp web design web g
HTML 1 - Girf desigcomp web design web g
compengwaelalahmar
 
software architecturev2.pptx cop computr
software architecturev2.pptx cop computrsoftware architecturev2.pptx cop computr
software architecturev2.pptx cop computr
compengwaelalahmar
 
lec01_intr architecture com computeo.ppt
lec01_intr architecture com computeo.pptlec01_intr architecture com computeo.ppt
lec01_intr architecture com computeo.ppt
compengwaelalahmar
 
lecture-11-1590405846 computer architect
lecture-11-1590405846 computer architectlecture-11-1590405846 computer architect
lecture-11-1590405846 computer architect
compengwaelalahmar
 
Compiler to compiler whatsypechecking.PPT
Compiler to compiler whatsypechecking.PPTCompiler to compiler whatsypechecking.PPT
Compiler to compiler whatsypechecking.PPT
compengwaelalahmar
 
D-lr-parsing compiler how to compiler com
D-lr-parsing compiler how to compiler comD-lr-parsing compiler how to compiler com
D-lr-parsing compiler how to compiler com
compengwaelalahmar
 
Camtasia Getting Started Guide how to design.ppt
Camtasia Getting Started Guide how to design.pptCamtasia Getting Started Guide how to design.ppt
Camtasia Getting Started Guide how to design.ppt
compengwaelalahmar
 
LR_Parser compiler how to compiler lr1 ll1
LR_Parser compiler how to compiler lr1 ll1LR_Parser compiler how to compiler lr1 ll1
LR_Parser compiler how to compiler lr1 ll1
compengwaelalahmar
 
lec00-outline.PPT cpp compiler how to cpp
lec00-outline.PPT cpp compiler how to cpplec00-outline.PPT cpp compiler how to cpp
lec00-outline.PPT cpp compiler how to cpp
compengwaelalahmar
 
A-overview.pptbb cpp introduction how cpp
A-overview.pptbb cpp introduction  how cppA-overview.pptbb cpp introduction  how cpp
A-overview.pptbb cpp introduction how cpp
compengwaelalahmar
 
CS540-2-lecture1.pptgvcxc increment cpp cpp
CS540-2-lecture1.pptgvcxc increment cpp cppCS540-2-lecture1.pptgvcxc increment cpp cpp
CS540-2-lecture1.pptgvcxc increment cpp cpp
compengwaelalahmar
 
1587076798CAES you learn here here ARON.pptx
1587076798CAES you learn here here ARON.pptx1587076798CAES you learn here here ARON.pptx
1587076798CAES you learn here here ARON.pptx
compengwaelalahmar
 
Monitoring_2019_Validator how mointering
Monitoring_2019_Validator how mointeringMonitoring_2019_Validator how mointering
Monitoring_2019_Validator how mointering
compengwaelalahmar
 
Ad

Recently uploaded (20)

"Dictyoptera: The Order of Cockroaches and Mantises" Or, more specifically: ...
"Dictyoptera: The Order of Cockroaches and Mantises"  Or, more specifically: ..."Dictyoptera: The Order of Cockroaches and Mantises"  Or, more specifically: ...
"Dictyoptera: The Order of Cockroaches and Mantises" Or, more specifically: ...
Arshad Shaikh
 
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
wygalkelceqg
 
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based EducatorDiana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda
 
Types of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo SlidesTypes of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo Slides
Celine George
 
Pragya Champion's Chalice 2025 Set , General Quiz
Pragya Champion's Chalice 2025 Set , General QuizPragya Champion's Chalice 2025 Set , General Quiz
Pragya Champion's Chalice 2025 Set , General Quiz
Pragya - UEM Kolkata Quiz Club
 
How to Manage Orders in Odoo 18 Lunch - Odoo Slides
How to Manage Orders in Odoo 18 Lunch - Odoo SlidesHow to Manage Orders in Odoo 18 Lunch - Odoo Slides
How to Manage Orders in Odoo 18 Lunch - Odoo Slides
Celine George
 
Order Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptxOrder Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptx
Arshad Shaikh
 
Exploring Identity Through Colombian Companies
Exploring Identity Through Colombian CompaniesExploring Identity Through Colombian Companies
Exploring Identity Through Colombian Companies
OlgaLeonorTorresSnch
 
LDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-inLDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-in
LDM & Mia eStudios
 
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
Arshad Shaikh
 
QUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptx
QUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptxQUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptx
QUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptx
Sourav Kr Podder
 
Critical Thinking and Bias with Jibi Moses
Critical Thinking and Bias with Jibi MosesCritical Thinking and Bias with Jibi Moses
Critical Thinking and Bias with Jibi Moses
Excellence Foundation for South Sudan
 
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly WorkshopsLDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDM & Mia eStudios
 
Order: Odonata Isoptera and Thysanoptera.pptx
Order: Odonata Isoptera and Thysanoptera.pptxOrder: Odonata Isoptera and Thysanoptera.pptx
Order: Odonata Isoptera and Thysanoptera.pptx
Arshad Shaikh
 
POS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 SlidesPOS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 Slides
Celine George
 
How to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guidesHow to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guides
Celine George
 
CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...
CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...
CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...
Sritoma Majumder
 
LDMMIA About me 2025 Edition 3 College Volume
LDMMIA About me 2025 Edition 3 College VolumeLDMMIA About me 2025 Edition 3 College Volume
LDMMIA About me 2025 Edition 3 College Volume
LDM & Mia eStudios
 
How to Setup Renewal of Subscription in Odoo 18
How to Setup Renewal of Subscription in Odoo 18How to Setup Renewal of Subscription in Odoo 18
How to Setup Renewal of Subscription in Odoo 18
Celine George
 
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdfপ্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
Pragya - UEM Kolkata Quiz Club
 
"Dictyoptera: The Order of Cockroaches and Mantises" Or, more specifically: ...
"Dictyoptera: The Order of Cockroaches and Mantises"  Or, more specifically: ..."Dictyoptera: The Order of Cockroaches and Mantises"  Or, more specifically: ...
"Dictyoptera: The Order of Cockroaches and Mantises" Or, more specifically: ...
Arshad Shaikh
 
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
Active Surveillance For Localized Prostate Cancer A New Paradigm For Clinical...
wygalkelceqg
 
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based EducatorDiana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda
 
Types of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo SlidesTypes of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo Slides
Celine George
 
How to Manage Orders in Odoo 18 Lunch - Odoo Slides
How to Manage Orders in Odoo 18 Lunch - Odoo SlidesHow to Manage Orders in Odoo 18 Lunch - Odoo Slides
How to Manage Orders in Odoo 18 Lunch - Odoo Slides
Celine George
 
Order Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptxOrder Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptx
Arshad Shaikh
 
Exploring Identity Through Colombian Companies
Exploring Identity Through Colombian CompaniesExploring Identity Through Colombian Companies
Exploring Identity Through Colombian Companies
OlgaLeonorTorresSnch
 
LDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-inLDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-in
LDM & Mia eStudios
 
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
Arshad Shaikh
 
QUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptx
QUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptxQUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptx
QUIZ-O-FORCE FINAL SET BY SUDIPTA & SUBHAM.pptx
Sourav Kr Podder
 
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly WorkshopsLDMMIA Free Reiki Yoga S7 Weekly Workshops
LDMMIA Free Reiki Yoga S7 Weekly Workshops
LDM & Mia eStudios
 
Order: Odonata Isoptera and Thysanoptera.pptx
Order: Odonata Isoptera and Thysanoptera.pptxOrder: Odonata Isoptera and Thysanoptera.pptx
Order: Odonata Isoptera and Thysanoptera.pptx
Arshad Shaikh
 
POS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 SlidesPOS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 Slides
Celine George
 
How to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guidesHow to Setup Lunch in Odoo 18 - Odoo guides
How to Setup Lunch in Odoo 18 - Odoo guides
Celine George
 
CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...
CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...
CBSE - Grade 11 - Mathematics - Ch 2 - Relations And Functions - Notes (PDF F...
Sritoma Majumder
 
LDMMIA About me 2025 Edition 3 College Volume
LDMMIA About me 2025 Edition 3 College VolumeLDMMIA About me 2025 Edition 3 College Volume
LDMMIA About me 2025 Edition 3 College Volume
LDM & Mia eStudios
 
How to Setup Renewal of Subscription in Odoo 18
How to Setup Renewal of Subscription in Odoo 18How to Setup Renewal of Subscription in Odoo 18
How to Setup Renewal of Subscription in Odoo 18
Celine George
 
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdfপ্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
প্রত্যুৎপন্নমতিত্ব - Prottutponnomotittwa 2025.pdf
Pragya - UEM Kolkata Quiz Club
 
Ad

Introduction to CSS.pptx web for web web

  • 2. Why CSS? • CSS Provides Efficiency in Design and Updates • CSS relatively easy to use • Can give you more flexibility and control • Faster loading pages • Increased consistency • Brings more sophistication to web design • CSS is designed primarily to enable the separation of document content from document presentation.
  • 3. Why CSS? (continued) • W3C standard, started in 1996 • Improves accessibility – Tables not required for elegance • Reduces the complexity of pages – Which in turn has led to more sophistication… • It’s open up the way for other technologies to be built on and be supported by CSS. There are dozens, and still growing. • Example, “Bootstrap”, which is an open source framework that combines CSS, HTML and Javascript
  • 4. CSS Overview • CSS (Cascading Style Sheets) • CSS defines HTML display • Styles were added to HTML 4.0 to solve a problem • External Style Sheets are stored in .css files
  • 5. CSS Syntax • Selectors • Declaration • Properties • Values
  • 6. Selectors • A “selector” is an instruction in a CSS rule set that tells the browser what elements to ‘select’ for styling. • Here are some that we will look at: – element Selector – id Selector – class Selector – grouping Selectors
  • 7. Element or Tag Selector • This selector selects tags by tag or “element” name. • This selector must match one or more HTML elements of the same name. • Easiest to use
  • 8. Element Selector p { text-align: center; color: red; } HTML <p>UAlbany is one of the SUNY centers.</p>
  • 9. ID Selector • The ID selector as a unique identifier to an element. • The id selector is used if you want to select a single, unique element. • CSS uses a hash or pound sign (#) to indicate it’s ID • ID's are unique – IDs in theory, are only supposed to be used once per page – In other words, a page would not be validate by W3C standards. • Anytime we see ID in the computer world, think “unique”.
  • 10. The id Selector #text1 { text-align: center; color: green; } <h1 id="text1">Think Spring!</h1>
  • 11. Class Selector • This selector allows you to style content irrespective of what tag you apply it to • Classes are NOT unique – Use same class on multiple elements. – Use multiple classes on the same element.
  • 12. The class Selector .center { text-align: center; color: green; } <h1 class="center">Think Spring!</h1> <p class="center">Think Spring!</p>
  • 13. CSS Grouping • When several selectors share the same declarations, they may be grouped into a comma-separated list. • Take this h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } And, do this: h1, h2, h3 { font-family: sans-serif }
  • 14. CSS Comments • As with other computer languages, CSS allows for comments • Comments remind you and tell fellow coders what your CSS does • Allows you to “flag” code for further review • Indispensable for large website and programming projects
  • 15. CSS Comments h1 { font-size: 24px; font- weight: bold; border: 1px solid black; color: pink; } /* This will make all <h1> headers big, bold, pink, and inside of a thin black rectangle! */
  • 16. Ways to Insert CSS • Externally • Internally • Inline styles (inside tags)
  • 17. Inline Styles • Insert CSS style right within the HTML tag that you want to apply them too. • Very quick • However, difficult to maintain • Use sparingly <h1 style="color:blue;margin- left:30px;">Think Spring!</h1>
  • 18. Internal (or Embedded) CSS • Placed right on top of the page that it will affect • As with DTDs, you can internally create a stylesheet • They are more convenient for small webpages • Mixing content and style will cause your pages to become unwieldy over time.
  • 19. Internal CSS stylesheet <html> <head> <style type="text/css"> p {color: white; } body {background-color: black; } </style> </head> <body> <p>White text on a black background!</p> </body> </html>
  • 20. External Stylesheet • Why use an external stylesheet? – It keeps your website design and content separate. • CSS code is easier to reuse. • Instead of typing the same CSS code on every web page you have, • Merely have many pages refer to a single CSS file with the "link" tag. • You can make massive alterations to your web pages with just a few changes in a single CSS file
  • 21. External CSS Stylesheet In your .XSL file, you will link out using this command: <head> <link rel="stylesheet" type="tex t/css" href="mystyle.css“/> </head>
  • 22. Browsers and CSS3 To be replaced by project “Spartan”