SlideShare a Scribd company logo
1 of 30
CSS Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL.
HISTORY Style sheets have existed in one form or another since the beginnings of SGML in the 1970s. Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents. As HTML grew, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers. This evolution gave the designer more control over site appearance but at the cost of HTML becoming more complex to write and maintain. Variations in web browser implementations made consistent site appearance difficult, and users had less control over how web content was displayed.
CSS STYLING
STYLING BACKGROUNDS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
STYLING TEXT ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS FONT FAMILIES ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS BOX MODEL
BOX MODEL ,[object Object],[object Object],[object Object],[object Object],[object Object]
BORDER ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS MARGIN ,[object Object],[object Object]
CSS PADDING ,[object Object],[object Object]
PADDING INDIVIDUAL SLIDES ,[object Object],[object Object]
PADDING SHORT HAND PROPERTY ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS GROUPING AND NESTING SELECTORS
GROUPING SELECTORS ,[object Object],[object Object],To minimize the code, you can group selectors. Separate each selector with a comma. In the example below we have grouped the selectors from the code above:
NESTING SELECTORS ,[object Object],[object Object],[object Object]
CSS DISPLAY
CSS Display - Block and Inline Elements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS POSITIONING
[object Object],[object Object],[object Object]
Static Positioning HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.
Fixed Positioning ,[object Object],[object Object]
CSS NAVIGATION BAR
Vertical Navigation Bar ,[object Object]
Horizontal Navigation Bar Horizontal Navigation Bar There are two ways to create a horizontal navigation bar. Using inline or floating list items. Both methods work fine, but if you want the links to be the same size, you have to use the floating method.
CSS MEDIA TYPES ,[object Object],[object Object],all Used for all media type devices aural Used for speech and sound synthesizers braille Used for braille tactile feedback devices embossed Used for paged braille printers handheld Used for small or handheld devices print Used for printers projection Used for projected presentations, like slides screen Used for computer screens tty Used for media using a fixed-pitch character grid, like teletypes and terminals tv Used for television-type devices
CSS FLOAT ,[object Object]
Turning off Float - Using Clear ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
HOW ELEMENTS FLOAT ,[object Object]
CSS FLOAT PROPERTIES Property    Description  Values CSS clear Specifies which sides of an element where other floating elements are not allowed left right both none inherit 1 float Specifies whether or not a box should float left right none inherit 1

More Related Content

What's hot

What's hot (20)

Pemrograman Web 3 - CSS Basic Part 2
Pemrograman Web 3 - CSS Basic Part 2Pemrograman Web 3 - CSS Basic Part 2
Pemrograman Web 3 - CSS Basic Part 2
 
Chapter 12: CSS Part 2
Chapter 12: CSS Part 2Chapter 12: CSS Part 2
Chapter 12: CSS Part 2
 
Chapter 13: Colors and Backgrounds
Chapter 13: Colors and BackgroundsChapter 13: Colors and Backgrounds
Chapter 13: Colors and Backgrounds
 
Css
CssCss
Css
 
Chapter 11: Intro to CSS
Chapter 11: Intro to CSSChapter 11: Intro to CSS
Chapter 11: Intro to CSS
 
CSS
CSS CSS
CSS
 
CSS Walktrough Internship Course
CSS Walktrough Internship CourseCSS Walktrough Internship Course
CSS Walktrough Internship Course
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Art of css
Art of cssArt of css
Art of css
 
css.ppt
css.pptcss.ppt
css.ppt
 
Css
CssCss
Css
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
CSS Cascade Style Sheet
CSS Cascade Style SheetCSS Cascade Style Sheet
CSS Cascade Style Sheet
 
Css ppt
Css pptCss ppt
Css ppt
 
Pemrograman Web 2 - CSS
Pemrograman Web 2 - CSSPemrograman Web 2 - CSS
Pemrograman Web 2 - CSS
 
Css Founder.com | Cssfounder in
Css Founder.com | Cssfounder inCss Founder.com | Cssfounder in
Css Founder.com | Cssfounder in
 
Html Expression Web
Html Expression WebHtml Expression Web
Html Expression Web
 
Css 101
Css 101Css 101
Css 101
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 

Viewers also liked

HTML
HTMLHTML
HTMLARJUN
 
Kwan US Trade in Services
Kwan US Trade in ServicesKwan US Trade in Services
Kwan US Trade in ServicesStephen Kwan
 
WEB 2.0
WEB 2.0WEB 2.0
WEB 2.0ARJUN
 
Nuestro homenaje a
Nuestro homenaje aNuestro homenaje a
Nuestro homenaje aisabelri
 
Japan Institute for Design Promotion, December 21st, 2011, Tokyo, Japan.
Japan Institute for Design Promotion, December 21st, 2011, Tokyo, Japan.Japan Institute for Design Promotion, December 21st, 2011, Tokyo, Japan.
Japan Institute for Design Promotion, December 21st, 2011, Tokyo, Japan.Stephen Kwan
 
MYSQL
MYSQLMYSQL
MYSQLARJUN
 
School magazine evaluation
School magazine evaluation School magazine evaluation
School magazine evaluation 07hhalim1
 
WEBD 162: What is a Web Page?
WEBD 162: What is a Web Page?WEBD 162: What is a Web Page?
WEBD 162: What is a Web Page?palomateach
 
HTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSSHTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSSDinis Correia
 
WEBD 162: display property, Float and Clear
WEBD 162: display property, Float and ClearWEBD 162: display property, Float and Clear
WEBD 162: display property, Float and Clearpalomateach
 
Getting Started with your Website
Getting Started with your WebsiteGetting Started with your Website
Getting Started with your WebsiteNicole Ryan
 
Structure Web Content
Structure Web ContentStructure Web Content
Structure Web ContentNicole Ryan
 
Getting Started with CSS
Getting Started with CSSGetting Started with CSS
Getting Started with CSSNicole Ryan
 
Laying Out Elements with CSS
Laying Out Elements with CSSLaying Out Elements with CSS
Laying Out Elements with CSSNicole Ryan
 

Viewers also liked (20)

HTML
HTMLHTML
HTML
 
Kwan US Trade in Services
Kwan US Trade in ServicesKwan US Trade in Services
Kwan US Trade in Services
 
WEB 2.0
WEB 2.0WEB 2.0
WEB 2.0
 
PHP
PHPPHP
PHP
 
Nuestro homenaje a
Nuestro homenaje aNuestro homenaje a
Nuestro homenaje a
 
Japan Institute for Design Promotion, December 21st, 2011, Tokyo, Japan.
Japan Institute for Design Promotion, December 21st, 2011, Tokyo, Japan.Japan Institute for Design Promotion, December 21st, 2011, Tokyo, Japan.
Japan Institute for Design Promotion, December 21st, 2011, Tokyo, Japan.
 
MYSQL
MYSQLMYSQL
MYSQL
 
School magazine evaluation
School magazine evaluation School magazine evaluation
School magazine evaluation
 
WEBD 162: What is a Web Page?
WEBD 162: What is a Web Page?WEBD 162: What is a Web Page?
WEBD 162: What is a Web Page?
 
Steps for CSS Layout
Steps for CSS LayoutSteps for CSS Layout
Steps for CSS Layout
 
HTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSSHTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSS
 
WEBD 162: display property, Float and Clear
WEBD 162: display property, Float and ClearWEBD 162: display property, Float and Clear
WEBD 162: display property, Float and Clear
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
 
CSS Layout
CSS LayoutCSS Layout
CSS Layout
 
Getting Started with your Website
Getting Started with your WebsiteGetting Started with your Website
Getting Started with your Website
 
Structure Web Content
Structure Web ContentStructure Web Content
Structure Web Content
 
Floating
FloatingFloating
Floating
 
Getting Started with CSS
Getting Started with CSSGetting Started with CSS
Getting Started with CSS
 
Laying Out Elements with CSS
Laying Out Elements with CSSLaying Out Elements with CSS
Laying Out Elements with CSS
 
Css floats
Css floatsCss floats
Css floats
 

Similar to CSS (20)

Css
CssCss
Css
 
Web - CSS 1.pptx
Web - CSS 1.pptxWeb - CSS 1.pptx
Web - CSS 1.pptx
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Basic css
Basic cssBasic css
Basic css
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
 
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
 
CSS - Basics
CSS - BasicsCSS - Basics
CSS - Basics
 
html-css
html-csshtml-css
html-css
 
Web Programming-css.pptx
Web Programming-css.pptxWeb Programming-css.pptx
Web Programming-css.pptx
 
Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 3Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 3
 
CSS
CSSCSS
CSS
 
Css
CssCss
Css
 
Css Introduction
Css IntroductionCss Introduction
Css Introduction
 
CSS Basic and Common Errors
CSS Basic and Common ErrorsCSS Basic and Common Errors
CSS Basic and Common Errors
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
Css
CssCss
Css
 
CSS
CSSCSS
CSS
 
Css.prabu
Css.prabuCss.prabu
Css.prabu
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 

Recently uploaded

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 

Recently uploaded (20)

Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 

CSS

  • 1. CSS Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL.
  • 2. HISTORY Style sheets have existed in one form or another since the beginnings of SGML in the 1970s. Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents. As HTML grew, it came to encompass a wider variety of stylistic capabilities to meet the demands of web developers. This evolution gave the designer more control over site appearance but at the cost of HTML becoming more complex to write and maintain. Variations in web browser implementations made consistent site appearance difficult, and users had less control over how web content was displayed.
  • 4.
  • 5.
  • 6.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14. CSS GROUPING AND NESTING SELECTORS
  • 15.
  • 16.
  • 18.
  • 20.
  • 21. Static Positioning HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.
  • 22.
  • 24.
  • 25. Horizontal Navigation Bar Horizontal Navigation Bar There are two ways to create a horizontal navigation bar. Using inline or floating list items. Both methods work fine, but if you want the links to be the same size, you have to use the floating method.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30. CSS FLOAT PROPERTIES Property Description Values CSS clear Specifies which sides of an element where other floating elements are not allowed left right both none inherit 1 float Specifies whether or not a box should float left right none inherit 1