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

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 

Recently uploaded (20)

The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Navigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern EnterpriseNavigating Identity and Access Management in the Modern Enterprise
Navigating Identity and Access Management in the Modern Enterprise
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Modernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using BallerinaModernizing Legacy Systems Using Ballerina
Modernizing Legacy Systems Using Ballerina
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 

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