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
HTML
ARJUN
 
WEB 2.0
WEB 2.0WEB 2.0
WEB 2.0
ARJUN
 
Nuestro homenaje a
Nuestro homenaje aNuestro homenaje a
Nuestro homenaje a
isabelri
 
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
MYSQL
ARJUN
 
School magazine evaluation
School magazine evaluation School magazine evaluation
School magazine evaluation
07hhalim1
 

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
 
CascadingStyleSheets in ONESHOT By DeathCodeYT .pdf
CascadingStyleSheets  in ONESHOT By DeathCodeYT .pdfCascadingStyleSheets  in ONESHOT By DeathCodeYT .pdf
CascadingStyleSheets in ONESHOT By DeathCodeYT .pdf
 
Css.prabu
Css.prabuCss.prabu
Css.prabu
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 

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