SlideShare a Scribd company logo
C S S
Cascading Style Sheets
C S S
Cascading Style Sheets
Introduction
What is CSS?
CSS is an extension to basic HTML
that allows you to style
your web pages.
C S S
Cascading Style Sheets
Role of CSS
1. MULTIPLE style sheets can apply to the SAME Web page
2. SAME style sheets can apply to the MULTIPLE Web page
C S S
Cascading Style Sheets
How to use CSS?
There are 3 ways to use CSS
Internal Style SheetInline Style Sheet External Style Sheet
(inside the <head> tag)(inside HTML element)
C S S
Cascading Style Sheets
Rules in CSS
A CSS Style Sheet is basically a collection of rules,
describing how the browser should display HTML elements.
Each rule contains 2 parts:
1. A Selector, stating which element in the HTML a
rule applies to;
2. One or more Declarations, which describe how
these elements should be displayed
C S S
Cascading Style Sheets
Selector
For Example
{
font-family: Times, Georgia, serif;
font-size: 24px;
text-align: center;
}
h1
Declarations
Enclosed in curly brackets { }
Selector
C S S
Cascading Style Sheets
h1{
font-family: Times, Georgia, serif;
font-size: 24px;
text-align: center;
}
Declaration has also 2 Parts
Properties Values
Properties and values
separated with a colon
Each declaration separated
with a semi-colon
For Example
Declarations consist of 2 parts: a property and a value. Each declaration ends with
a semi-colon ( ; ). Properties and values are separated with a colon ( : )

More Related Content

What's hot (12)

Styling text using css
Styling text using cssStyling text using css
Styling text using css
Daniel Francis
 
How To Add CSS The Correct Way.
How To Add CSS The Correct Way.How To Add CSS The Correct Way.
How To Add CSS The Correct Way.
Reema
 
N5 CSS
N5 CSSN5 CSS
N5 CSS
Forrester High School
 
YL html
YL htmlYL html
YL html
dilom1986
 
Html Styles-CSS
Html Styles-CSSHtml Styles-CSS
Html Styles-CSS
ispkosova
 
Page Layout 2010
Page Layout 2010Page Layout 2010
Page Layout 2010
guest0f1e7f
 
css
csscss
css
sonam1602
 
web development basics tables part2
web development basics tables part2web development basics tables part2
web development basics tables part2
Kalluri Vinay Reddy
 
Tips For Ms Word
Tips For Ms WordTips For Ms Word
Tips For Ms Word
louisekelly94
 
9 pernos
9 pernos9 pernos
9 pernos
Lyiizzii RoOdriiguez
 
Week3 css
Week3 cssWeek3 css
Week3 css
Rowena LI
 
Css
CssCss
Css
Anuj Singh Rajput
 

Similar to Css presentation (20)

Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
 
HTML Styles.pptx
HTML Styles.pptxHTML Styles.pptx
HTML Styles.pptx
Somaia Gaber
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
jackchenvlo
 
Using Cascading Style Sheets2
Using Cascading Style Sheets2Using Cascading Style Sheets2
Using Cascading Style Sheets2
Sutinder Mann
 
Css basic
Css basicCss basic
Css basic
Jaypalsing Rajput
 
HTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxHTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptx
JJFajardo1
 
Css
CssCss
Css
NIRMAL FELIX
 
Introduction to Wed System And Technologies (1).pptx
Introduction to Wed System And Technologies (1).pptxIntroduction to Wed System And Technologies (1).pptx
Introduction to Wed System And Technologies (1).pptx
AmeerHamza183012
 
Unit iii css and javascript 1
Unit iii css and javascript 1Unit iii css and javascript 1
Unit iii css and javascript 1
Jesus Obenita Jr.
 
Intro to css
Intro to cssIntro to css
Intro to css
Rajashekarkorva
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
vishal choudhary
 
Higher Computing Science CSS
Higher Computing Science CSSHigher Computing Science CSS
Higher Computing Science CSS
Forrester High School
 
This is css which compiled by alex that is impo
This is css which compiled by alex that is impoThis is css which compiled by alex that is impo
This is css which compiled by alex that is impo
AlebelAyalneh
 
Css intro
Css introCss intro
Css intro
Andz Bass
 
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
wubiederebe1
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
nikhilsh66131
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Erin M. Kidwell
 
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
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
Joseph Gabriel
 
Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3
Binu Paul
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
jackchenvlo
 
Using Cascading Style Sheets2
Using Cascading Style Sheets2Using Cascading Style Sheets2
Using Cascading Style Sheets2
Sutinder Mann
 
HTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptxHTML to CSS Basics Exer 2.pptx
HTML to CSS Basics Exer 2.pptx
JJFajardo1
 
Introduction to Wed System And Technologies (1).pptx
Introduction to Wed System And Technologies (1).pptxIntroduction to Wed System And Technologies (1).pptx
Introduction to Wed System And Technologies (1).pptx
AmeerHamza183012
 
Unit iii css and javascript 1
Unit iii css and javascript 1Unit iii css and javascript 1
Unit iii css and javascript 1
Jesus Obenita Jr.
 
This is css which compiled by alex that is impo
This is css which compiled by alex that is impoThis is css which compiled by alex that is impo
This is css which compiled by alex that is impo
AlebelAyalneh
 
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
wubiederebe1
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Erin M. Kidwell
 
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
 
Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3Cordova training - Day 2 Introduction to CSS 3
Cordova training - Day 2 Introduction to CSS 3
Binu Paul
 

More from Webtech Learning (20)

Benefits of Digital Marketing
Benefits of Digital MarketingBenefits of Digital Marketing
Benefits of Digital Marketing
Webtech Learning
 
Digital Marketing Benefits
Digital Marketing  BenefitsDigital Marketing  Benefits
Digital Marketing Benefits
Webtech Learning
 
Future Scope of Digital Marketing in India
Future Scope of Digital Marketing in IndiaFuture Scope of Digital Marketing in India
Future Scope of Digital Marketing in India
Webtech Learning
 
Css types internal, external and inline (1)
Css types internal, external and inline (1)Css types internal, external and inline (1)
Css types internal, external and inline (1)
Webtech Learning
 
Bootstrap webtech presentation - new
Bootstrap   webtech presentation - newBootstrap   webtech presentation - new
Bootstrap webtech presentation - new
Webtech Learning
 
Client side &amp; Server side Scripting
Client side &amp; Server side Scripting Client side &amp; Server side Scripting
Client side &amp; Server side Scripting
Webtech Learning
 
Software testing & Quality Assurance
Software testing & Quality Assurance Software testing & Quality Assurance
Software testing & Quality Assurance
Webtech Learning
 
Shadows Effects in CSS
Shadows Effects in CSSShadows Effects in CSS
Shadows Effects in CSS
Webtech Learning
 
Bs Typography
Bs TypographyBs Typography
Bs Typography
Webtech Learning
 
Bootstrap grids
Bootstrap gridsBootstrap grids
Bootstrap grids
Webtech Learning
 
Html formatting
Html formattingHtml formatting
Html formatting
Webtech Learning
 
Css box-sizing
Css box-sizingCss box-sizing
Css box-sizing
Webtech Learning
 
Css position
Css positionCss position
Css position
Webtech Learning
 
Css margins
Css marginsCss margins
Css margins
Webtech Learning
 
Css box-model
Css box-modelCss box-model
Css box-model
Webtech Learning
 
Css Display Property
Css Display PropertyCss Display Property
Css Display Property
Webtech Learning
 
Html media
Html mediaHtml media
Html media
Webtech Learning
 
Css floats
Css floatsCss floats
Css floats
Webtech Learning
 
Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
Webtech Learning
 
Css pseudo-classes
Css pseudo-classesCss pseudo-classes
Css pseudo-classes
Webtech Learning
 

Recently uploaded (20)

Beyond Compare 4.4.0.25886 Crack + License Key 2025
Beyond Compare 4.4.0.25886 Crack + License Key 2025Beyond Compare 4.4.0.25886 Crack + License Key 2025
Beyond Compare 4.4.0.25886 Crack + License Key 2025
Designer
 
Supplier Sourcing Sample Work of Maisie.pdf
Supplier Sourcing Sample Work of Maisie.pdfSupplier Sourcing Sample Work of Maisie.pdf
Supplier Sourcing Sample Work of Maisie.pdf
MelissaMaisieVillanu
 
Designing for Critical and Severe Medical Cases.pptx
Designing for Critical and Severe Medical Cases.pptxDesigning for Critical and Severe Medical Cases.pptx
Designing for Critical and Severe Medical Cases.pptx
Prof. Hany M. El-Said
 
TFT Unlock Tool For PC & Windows Fully Unlocked {Lifetime}
TFT Unlock Tool For PC & Windows Fully Unlocked {Lifetime}TFT Unlock Tool For PC & Windows Fully Unlocked {Lifetime}
TFT Unlock Tool For PC & Windows Fully Unlocked {Lifetime}
Mudasir
 
MacX HD Video Converter Pro 5.16.0 Full Crack 2025
MacX HD Video Converter Pro 5.16.0 Full Crack 2025MacX HD Video Converter Pro 5.16.0 Full Crack 2025
MacX HD Video Converter Pro 5.16.0 Full Crack 2025
Yahoo
 
AVS Video Converter 12.1.5.673 Full Crack Download [Latest]
AVS Video Converter 12.1.5.673 Full Crack Download [Latest]AVS Video Converter 12.1.5.673 Full Crack Download [Latest]
AVS Video Converter 12.1.5.673 Full Crack Download [Latest]
Google
 
Design and research synthesis: how to make sense of all what you've learned?
Design and research synthesis: how to make sense of all what you've learned?Design and research synthesis: how to make sense of all what you've learned?
Design and research synthesis: how to make sense of all what you've learned?
Master Service Design
 
Canva Pro 2025 PC Crack Latest Version [New Updated]
Canva Pro 2025 PC Crack Latest Version [New Updated]Canva Pro 2025 PC Crack Latest Version [New Updated]
Canva Pro 2025 PC Crack Latest Version [New Updated]
abidkhan77g77
 
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack DownloadApowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Designer
 
Keyword Researcher Pro 13.180 Full Crack 2025
Keyword Researcher Pro 13.180 Full Crack 2025Keyword Researcher Pro 13.180 Full Crack 2025
Keyword Researcher Pro 13.180 Full Crack 2025
Designer
 
Boom 3D 1.2.3 Full Crack for Windows Free Download 2025
Boom 3D 1.2.3 Full Crack for Windows Free Download 2025Boom 3D 1.2.3 Full Crack for Windows Free Download 2025
Boom 3D 1.2.3 Full Crack for Windows Free Download 2025
Designer
 
Best Website Designing Company In Delhi NCR
Best Website Designing Company In Delhi NCRBest Website Designing Company In Delhi NCR
Best Website Designing Company In Delhi NCR
Etoile Info Solutions
 
Global Audience and Game Economy Design - The Journey of Digital Games around...
Global Audience and Game Economy Design - The Journey of Digital Games around...Global Audience and Game Economy Design - The Journey of Digital Games around...
Global Audience and Game Economy Design - The Journey of Digital Games around...
Alireza Ranjbar SHourabi
 
FORENSIC ENGINEERING IN THE DIGITAL AGE A PATHWAY TO RESILIENT AND SUSTAINABL...
FORENSIC ENGINEERING IN THE DIGITAL AGE A PATHWAY TO RESILIENT AND SUSTAINABL...FORENSIC ENGINEERING IN THE DIGITAL AGE A PATHWAY TO RESILIENT AND SUSTAINABL...
FORENSIC ENGINEERING IN THE DIGITAL AGE A PATHWAY TO RESILIENT AND SUSTAINABL...
shivamkumarsharma441
 
Bulk Image Downloader 6.02.0 Full Crack Download 2025
Bulk Image Downloader 6.02.0 Full Crack Download 2025Bulk Image Downloader 6.02.0 Full Crack Download 2025
Bulk Image Downloader 6.02.0 Full Crack Download 2025
Designer
 
The Career of a Service Design practitioner - Leading Conversations series
The Career of a Service Design practitioner - Leading Conversations seriesThe Career of a Service Design practitioner - Leading Conversations series
The Career of a Service Design practitioner - Leading Conversations series
Master Service Design
 
Free YouTube To MP3 Converter 4.3.58.1027 Premium Crack [Latest]
Free YouTube To MP3 Converter 4.3.58.1027 Premium Crack [Latest]Free YouTube To MP3 Converter 4.3.58.1027 Premium Crack [Latest]
Free YouTube To MP3 Converter 4.3.58.1027 Premium Crack [Latest]
Designer
 
NoteBurner Spotify Music Converter 2.2.4 with Crack [Latest]
NoteBurner Spotify Music Converter 2.2.4 with Crack [Latest]NoteBurner Spotify Music Converter 2.2.4 with Crack [Latest]
NoteBurner Spotify Music Converter 2.2.4 with Crack [Latest]
Google
 
All Lectures DECO1006 and DECO2016 in 2025.pdf
All Lectures DECO1006 and DECO2016 in 2025.pdfAll Lectures DECO1006 and DECO2016 in 2025.pdf
All Lectures DECO1006 and DECO2016 in 2025.pdf
R. Sosa
 
Windows Video Converter 2025 v9.7.0.0 Full Crack 2025
Windows Video Converter 2025 v9.7.0.0 Full Crack 2025Windows Video Converter 2025 v9.7.0.0 Full Crack 2025
Windows Video Converter 2025 v9.7.0.0 Full Crack 2025
Yahoo
 
Beyond Compare 4.4.0.25886 Crack + License Key 2025
Beyond Compare 4.4.0.25886 Crack + License Key 2025Beyond Compare 4.4.0.25886 Crack + License Key 2025
Beyond Compare 4.4.0.25886 Crack + License Key 2025
Designer
 
Supplier Sourcing Sample Work of Maisie.pdf
Supplier Sourcing Sample Work of Maisie.pdfSupplier Sourcing Sample Work of Maisie.pdf
Supplier Sourcing Sample Work of Maisie.pdf
MelissaMaisieVillanu
 
Designing for Critical and Severe Medical Cases.pptx
Designing for Critical and Severe Medical Cases.pptxDesigning for Critical and Severe Medical Cases.pptx
Designing for Critical and Severe Medical Cases.pptx
Prof. Hany M. El-Said
 
TFT Unlock Tool For PC & Windows Fully Unlocked {Lifetime}
TFT Unlock Tool For PC & Windows Fully Unlocked {Lifetime}TFT Unlock Tool For PC & Windows Fully Unlocked {Lifetime}
TFT Unlock Tool For PC & Windows Fully Unlocked {Lifetime}
Mudasir
 
MacX HD Video Converter Pro 5.16.0 Full Crack 2025
MacX HD Video Converter Pro 5.16.0 Full Crack 2025MacX HD Video Converter Pro 5.16.0 Full Crack 2025
MacX HD Video Converter Pro 5.16.0 Full Crack 2025
Yahoo
 
AVS Video Converter 12.1.5.673 Full Crack Download [Latest]
AVS Video Converter 12.1.5.673 Full Crack Download [Latest]AVS Video Converter 12.1.5.673 Full Crack Download [Latest]
AVS Video Converter 12.1.5.673 Full Crack Download [Latest]
Google
 
Design and research synthesis: how to make sense of all what you've learned?
Design and research synthesis: how to make sense of all what you've learned?Design and research synthesis: how to make sense of all what you've learned?
Design and research synthesis: how to make sense of all what you've learned?
Master Service Design
 
Canva Pro 2025 PC Crack Latest Version [New Updated]
Canva Pro 2025 PC Crack Latest Version [New Updated]Canva Pro 2025 PC Crack Latest Version [New Updated]
Canva Pro 2025 PC Crack Latest Version [New Updated]
abidkhan77g77
 
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack DownloadApowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Apowersoft Video Editor 1.6.8.13 ApowerEdit Crack Download
Designer
 
Keyword Researcher Pro 13.180 Full Crack 2025
Keyword Researcher Pro 13.180 Full Crack 2025Keyword Researcher Pro 13.180 Full Crack 2025
Keyword Researcher Pro 13.180 Full Crack 2025
Designer
 
Boom 3D 1.2.3 Full Crack for Windows Free Download 2025
Boom 3D 1.2.3 Full Crack for Windows Free Download 2025Boom 3D 1.2.3 Full Crack for Windows Free Download 2025
Boom 3D 1.2.3 Full Crack for Windows Free Download 2025
Designer
 
Best Website Designing Company In Delhi NCR
Best Website Designing Company In Delhi NCRBest Website Designing Company In Delhi NCR
Best Website Designing Company In Delhi NCR
Etoile Info Solutions
 
Global Audience and Game Economy Design - The Journey of Digital Games around...
Global Audience and Game Economy Design - The Journey of Digital Games around...Global Audience and Game Economy Design - The Journey of Digital Games around...
Global Audience and Game Economy Design - The Journey of Digital Games around...
Alireza Ranjbar SHourabi
 
FORENSIC ENGINEERING IN THE DIGITAL AGE A PATHWAY TO RESILIENT AND SUSTAINABL...
FORENSIC ENGINEERING IN THE DIGITAL AGE A PATHWAY TO RESILIENT AND SUSTAINABL...FORENSIC ENGINEERING IN THE DIGITAL AGE A PATHWAY TO RESILIENT AND SUSTAINABL...
FORENSIC ENGINEERING IN THE DIGITAL AGE A PATHWAY TO RESILIENT AND SUSTAINABL...
shivamkumarsharma441
 
Bulk Image Downloader 6.02.0 Full Crack Download 2025
Bulk Image Downloader 6.02.0 Full Crack Download 2025Bulk Image Downloader 6.02.0 Full Crack Download 2025
Bulk Image Downloader 6.02.0 Full Crack Download 2025
Designer
 
The Career of a Service Design practitioner - Leading Conversations series
The Career of a Service Design practitioner - Leading Conversations seriesThe Career of a Service Design practitioner - Leading Conversations series
The Career of a Service Design practitioner - Leading Conversations series
Master Service Design
 
Free YouTube To MP3 Converter 4.3.58.1027 Premium Crack [Latest]
Free YouTube To MP3 Converter 4.3.58.1027 Premium Crack [Latest]Free YouTube To MP3 Converter 4.3.58.1027 Premium Crack [Latest]
Free YouTube To MP3 Converter 4.3.58.1027 Premium Crack [Latest]
Designer
 
NoteBurner Spotify Music Converter 2.2.4 with Crack [Latest]
NoteBurner Spotify Music Converter 2.2.4 with Crack [Latest]NoteBurner Spotify Music Converter 2.2.4 with Crack [Latest]
NoteBurner Spotify Music Converter 2.2.4 with Crack [Latest]
Google
 
All Lectures DECO1006 and DECO2016 in 2025.pdf
All Lectures DECO1006 and DECO2016 in 2025.pdfAll Lectures DECO1006 and DECO2016 in 2025.pdf
All Lectures DECO1006 and DECO2016 in 2025.pdf
R. Sosa
 
Windows Video Converter 2025 v9.7.0.0 Full Crack 2025
Windows Video Converter 2025 v9.7.0.0 Full Crack 2025Windows Video Converter 2025 v9.7.0.0 Full Crack 2025
Windows Video Converter 2025 v9.7.0.0 Full Crack 2025
Yahoo
 

Css presentation

  • 1. C S S Cascading Style Sheets
  • 2. C S S Cascading Style Sheets Introduction What is CSS? CSS is an extension to basic HTML that allows you to style your web pages.
  • 3. C S S Cascading Style Sheets Role of CSS 1. MULTIPLE style sheets can apply to the SAME Web page 2. SAME style sheets can apply to the MULTIPLE Web page
  • 4. C S S Cascading Style Sheets How to use CSS? There are 3 ways to use CSS Internal Style SheetInline Style Sheet External Style Sheet (inside the <head> tag)(inside HTML element)
  • 5. C S S Cascading Style Sheets Rules in CSS A CSS Style Sheet is basically a collection of rules, describing how the browser should display HTML elements. Each rule contains 2 parts: 1. A Selector, stating which element in the HTML a rule applies to; 2. One or more Declarations, which describe how these elements should be displayed
  • 6. C S S Cascading Style Sheets Selector For Example { font-family: Times, Georgia, serif; font-size: 24px; text-align: center; } h1 Declarations Enclosed in curly brackets { } Selector
  • 7. C S S Cascading Style Sheets h1{ font-family: Times, Georgia, serif; font-size: 24px; text-align: center; } Declaration has also 2 Parts Properties Values Properties and values separated with a colon Each declaration separated with a semi-colon For Example Declarations consist of 2 parts: a property and a value. Each declaration ends with a semi-colon ( ; ). Properties and values are separated with a colon ( : )