SlideShare a Scribd company logo
Introduction
   Cascading Style Sheets (CSS) is a style sheet language used to describe the
    presentation semantics (the look and formatting) of a document written in a
    mark-up 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 plain XML, SVG and XUL.
   CSS is designed primarily to enable the separation of document content (written in HTML
    or a similar mark-up language) from document presentation, including elements such as the
    layout, colours, and fonts.
Example of CSS
CSS types-:
   Internal

   Inline

   External
Internal Css
 It is used within a page & style
  applied are consistent for single page,
  they often used within head tags
 By default html displays Arial font.
Example of Internal CSS
<style type="text/css">          ------tag open
.notice-wrapper-WCI-call-for-
     papers
 {
   border: 1px solid #bbb;
                                 -----Arial Internal CSS code
    background-color: #fcfcfc;
      text-align: left;
    font-size: .9em;
     }
</style>                         -----------tag close
Inline CSS
Inline styles are written within the tags and they are used
    in attributes
         Example Given below-:
<a href="http://en.wikipedia.org/wiki/Internet_media_type" title="Internet
    media type">
  Internet media type
  </a>
External CSS
   IT is applied to the whole website.
   In this case a notepad file created of extension .css
    which has some website related info.
    Then this Document is link in Html tags.
Example External CSS

         load_002.css

            <link rel="stylesheet" href="Cascading_Style_Sheets_files/load_002.css"
            type="text/css" media="all">


Notepad
load_002.css
file

                              Linking file in a tag
Version of CSS
    1)CSS 1
    The first CSS specification to become an official W3C
     Recommendation is CSS level 1, published in December
     1996. Among its capabilities are support for:
    Font properties such as typeface and emphasis
    Color of text, backgrounds, and other elements
    Text attributes such as spacing between words, letters, and
     lines of text
    Alignment of text, images, tables and other elements
    Margin, border, padding, and positioning for most elements
    Unique identification and generic classification of groups of
     attributes
    The W3C no longer maintains the CSS 1 Recommendation.
CSS 2


       CSS level 2 specification was developed by the
        W3C and published as a Recommendation in
        May 1998. A superset of CSS 1, CSS 2 includes a
        number of new capabilities like absolute,
        relative, and fixed positioning of elements and
        z-index, the concept of media types, support for
        aural style sheets and bidirectional text, and new
        font properties such as shadows. The W3C no
        longer maintains the CSS 2 recommendation
CSS 3

   Instead of defining all features in a single, large
    specification like CSS 2, CSS 3 is divided into several
    separate documents called "modules". Each module
    adds new capability or extends features defined in
    CSS 2, over preserving backward compatibility. Work
    on CSS level 3 started around the time of publication
    of the original CSS 2 recommendation. The earliest
    CSS 3 drafts were published in June 19
Advantage
   Flexibility
   Accessibility
   Separation of content from presentation
   Site-wide consistency
   Bandwidth
   Page reformatting
Limitations

   Poor controls for flexible layouts 
   Selectors are unable to ascend
   Vertical control limitations
   Absence of expressions
   Lack of column declaration 
   Cannot explicitly declare new scope independently of
    position

More Related Content

What's hot (20)

Week 12 CSS - Review from last week
Week 12 CSS - Review from last weekWeek 12 CSS - Review from last week
Week 12 CSS - Review from last week
 
N5 CSS
N5 CSSN5 CSS
N5 CSS
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
 
Cascading Style Sheets
Cascading Style SheetsCascading Style Sheets
Cascading Style Sheets
 
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
 
Working with Mediawiki
Working with MediawikiWorking with Mediawiki
Working with Mediawiki
 
Cascading Style Sheet | CSS
Cascading Style Sheet | CSSCascading Style Sheet | CSS
Cascading Style Sheet | CSS
 
Casc Style Sheets Ii
Casc Style Sheets IiCasc Style Sheets Ii
Casc Style Sheets Ii
 
Cascading Style Sheet
Cascading Style SheetCascading Style Sheet
Cascading Style Sheet
 
05. session 05 introducing css
05. session 05   introducing css05. session 05   introducing css
05. session 05 introducing css
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Cascading Style Sheets (CSS) - An introduction
Cascading Style Sheets (CSS) - An introductionCascading Style Sheets (CSS) - An introduction
Cascading Style Sheets (CSS) - An introduction
 
html & css
html & css html & css
html & css
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Introduction to css & its attributes with syntax
Introduction to css & its attributes with syntaxIntroduction to css & its attributes with syntax
Introduction to css & its attributes with syntax
 
Css
CssCss
Css
 
Cascading style sheets (CSS)
Cascading style sheets (CSS)Cascading style sheets (CSS)
Cascading style sheets (CSS)
 
Kajol52
Kajol52Kajol52
Kajol52
 

Viewers also liked

El meu diari
El meu diariEl meu diari
El meu diari4etarras
 
Revised time tble
Revised time tbleRevised time tble
Revised time tbleDeepak Boss
 
วิตามินบี 2
วิตามินบี 2วิตามินบี 2
วิตามินบี 2fah_pattarin
 
วิตามินบี 2
วิตามินบี 2วิตามินบี 2
วิตามินบี 2fah_pattarin
 
Video interviewing, ActiveInterview.com
Video interviewing, ActiveInterview.comVideo interviewing, ActiveInterview.com
Video interviewing, ActiveInterview.comsghael
 
โรคขาดวิตามินบี 2
โรคขาดวิตามินบี 2โรคขาดวิตามินบี 2
โรคขาดวิตามินบี 2fah_pattarin
 
脱「情弱向け」プレセンテーション at ギー沖LT 2012/3/11
脱「情弱向け」プレセンテーション at ギー沖LT 2012/3/11脱「情弱向け」プレセンテーション at ギー沖LT 2012/3/11
脱「情弱向け」プレセンテーション at ギー沖LT 2012/3/11Yuu Yonashiro
 
Amazon Web Services でサーバー構築「クラス」の学習環境を作ってみた
Amazon Web Services でサーバー構築「クラス」の学習環境を作ってみたAmazon Web Services でサーバー構築「クラス」の学習環境を作ってみた
Amazon Web Services でサーバー構築「クラス」の学習環境を作ってみたYuu Yonashiro
 
#Favtileの使い道
#Favtileの使い道#Favtileの使い道
#Favtileの使い道Yuu Yonashiro
 
About cloneko(與那城雄について)
About cloneko(與那城雄について)About cloneko(與那城雄について)
About cloneko(與那城雄について)Yuu Yonashiro
 
Project intrusion alert
Project intrusion alertProject intrusion alert
Project intrusion alertarpit1010
 
Communication & presentation skills updated
Communication & presentation skills updatedCommunication & presentation skills updated
Communication & presentation skills updatedDarshana_Herath
 
Vlsi techniques
Vlsi techniquesVlsi techniques
Vlsi techniquesarpit1010
 

Viewers also liked (16)

El meu diari
El meu diariEl meu diari
El meu diari
 
Revised time tble
Revised time tbleRevised time tble
Revised time tble
 
วิตามินบี 2
วิตามินบี 2วิตามินบี 2
วิตามินบี 2
 
วิตามินบี 2
วิตามินบี 2วิตามินบี 2
วิตามินบี 2
 
Video interviewing, ActiveInterview.com
Video interviewing, ActiveInterview.comVideo interviewing, ActiveInterview.com
Video interviewing, ActiveInterview.com
 
โรคขาดวิตามินบี 2
โรคขาดวิตามินบี 2โรคขาดวิตามินบี 2
โรคขาดวิตามินบี 2
 
脱「情弱向け」プレセンテーション at ギー沖LT 2012/3/11
脱「情弱向け」プレセンテーション at ギー沖LT 2012/3/11脱「情弱向け」プレセンテーション at ギー沖LT 2012/3/11
脱「情弱向け」プレセンテーション at ギー沖LT 2012/3/11
 
Amazon Web Services でサーバー構築「クラス」の学習環境を作ってみた
Amazon Web Services でサーバー構築「クラス」の学習環境を作ってみたAmazon Web Services でサーバー構築「クラス」の学習環境を作ってみた
Amazon Web Services でサーバー構築「クラス」の学習環境を作ってみた
 
#Favtileの使い道
#Favtileの使い道#Favtileの使い道
#Favtileの使い道
 
About cloneko(與那城雄について)
About cloneko(與那城雄について)About cloneko(與那城雄について)
About cloneko(與那城雄について)
 
REIL
REILREIL
REIL
 
HS2 Slideshow
HS2 SlideshowHS2 Slideshow
HS2 Slideshow
 
Project intrusion alert
Project intrusion alertProject intrusion alert
Project intrusion alert
 
Communication & presentation skills updated
Communication & presentation skills updatedCommunication & presentation skills updated
Communication & presentation skills updated
 
Vlsi techniques
Vlsi techniquesVlsi techniques
Vlsi techniques
 
Population explosion
Population explosionPopulation explosion
Population explosion
 

Similar to CSS

Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdfwubiederebe1
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designersSingsys Pte Ltd
 
CSS Training in Bangalore
CSS Training in BangaloreCSS Training in Bangalore
CSS Training in Bangalorerajkamal560066
 
intro_To_HTML_and__CSS_using_presentation.pptx
intro_To_HTML_and__CSS_using_presentation.pptxintro_To_HTML_and__CSS_using_presentation.pptx
intro_To_HTML_and__CSS_using_presentation.pptxAsrithaKorupolu
 
lecture CSS 1-2_2022_2023.pptx
lecture CSS 1-2_2022_2023.pptxlecture CSS 1-2_2022_2023.pptx
lecture CSS 1-2_2022_2023.pptxzheerhimdad
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer NotesVskills
 
Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and Style
Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and StyleLesson One Fourth Quarter Fourth Year High School CSS Modern Layout and Style
Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and StylePerry Mallari
 
CSS Cascading Style Sheet Introduction slides
CSS Cascading Style Sheet Introduction slidesCSS Cascading Style Sheet Introduction slides
CSS Cascading Style Sheet Introduction slidesAasma13
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.pptPramenathA
 
Cascading Styling Sheets(CSS) simple design language intended to transform th...
Cascading Styling Sheets(CSS) simple design language intended to transform th...Cascading Styling Sheets(CSS) simple design language intended to transform th...
Cascading Styling Sheets(CSS) simple design language intended to transform th...JebaRaj26
 

Similar to CSS (20)

Css
CssCss
Css
 
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
CSS Training in Bangalore
CSS Training in BangaloreCSS Training in Bangalore
CSS Training in Bangalore
 
intro_To_HTML_and__CSS_using_presentation.pptx
intro_To_HTML_and__CSS_using_presentation.pptxintro_To_HTML_and__CSS_using_presentation.pptx
intro_To_HTML_and__CSS_using_presentation.pptx
 
lecture CSS 1-2_2022_2023.pptx
lecture CSS 1-2_2022_2023.pptxlecture CSS 1-2_2022_2023.pptx
lecture CSS 1-2_2022_2023.pptx
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
 
Css class-01
Css class-01Css class-01
Css class-01
 
Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and Style
Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and StyleLesson One Fourth Quarter Fourth Year High School CSS Modern Layout and Style
Lesson One Fourth Quarter Fourth Year High School CSS Modern Layout and Style
 
Web technology Unit-II Part-C
Web technology Unit-II Part-CWeb technology Unit-II Part-C
Web technology Unit-II Part-C
 
CSS Overview
CSS OverviewCSS Overview
CSS Overview
 
Css siva
Css sivaCss siva
Css siva
 
Css siva
Css sivaCss siva
Css siva
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
CSS Cascading Style Sheet Introduction slides
CSS Cascading Style Sheet Introduction slidesCSS Cascading Style Sheet Introduction slides
CSS Cascading Style Sheet Introduction slides
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
DW_lesson2.ppt
DW_lesson2.pptDW_lesson2.ppt
DW_lesson2.ppt
 
Cascading Styling Sheets(CSS) simple design language intended to transform th...
Cascading Styling Sheets(CSS) simple design language intended to transform th...Cascading Styling Sheets(CSS) simple design language intended to transform th...
Cascading Styling Sheets(CSS) simple design language intended to transform th...
 

Recently uploaded

UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1DianaGray10
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoTAnalytics
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomCzechDreamin
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Product School
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekCzechDreamin
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIES VE
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Julian Hyde
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Alison B. Lowndes
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...Product School
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxDavid Michel
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
 
In-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsIn-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsExpeed Software
 
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀DianaGray10
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesThousandEyes
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...Product School
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
 

Recently uploaded (20)

UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
 
In-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsIn-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT Professionals
 
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
 

CSS

  • 1.
  • 2.
  • 3. Introduction  Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a mark-up 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 plain XML, SVG and XUL.  CSS is designed primarily to enable the separation of document content (written in HTML or a similar mark-up language) from document presentation, including elements such as the layout, colours, and fonts.
  • 5. CSS types-:  Internal  Inline  External
  • 6. Internal Css  It is used within a page & style applied are consistent for single page, they often used within head tags  By default html displays Arial font.
  • 7. Example of Internal CSS <style type="text/css"> ------tag open .notice-wrapper-WCI-call-for- papers { border: 1px solid #bbb; -----Arial Internal CSS code background-color: #fcfcfc; text-align: left; font-size: .9em; } </style> -----------tag close
  • 8. Inline CSS Inline styles are written within the tags and they are used in attributes Example Given below-: <a href="http://en.wikipedia.org/wiki/Internet_media_type" title="Internet media type"> Internet media type </a>
  • 9. External CSS  IT is applied to the whole website.  In this case a notepad file created of extension .css which has some website related info. Then this Document is link in Html tags.
  • 10. Example External CSS load_002.css <link rel="stylesheet" href="Cascading_Style_Sheets_files/load_002.css" type="text/css" media="all"> Notepad load_002.css file Linking file in a tag
  • 11. Version of CSS 1)CSS 1  The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for:  Font properties such as typeface and emphasis  Color of text, backgrounds, and other elements  Text attributes such as spacing between words, letters, and lines of text  Alignment of text, images, tables and other elements  Margin, border, padding, and positioning for most elements  Unique identification and generic classification of groups of attributes  The W3C no longer maintains the CSS 1 Recommendation.
  • 12. CSS 2  CSS level 2 specification was developed by the W3C and published as a Recommendation in May 1998. A superset of CSS 1, CSS 2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements and z-index, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows. The W3C no longer maintains the CSS 2 recommendation
  • 13. CSS 3  Instead of defining all features in a single, large specification like CSS 2, CSS 3 is divided into several separate documents called "modules". Each module adds new capability or extends features defined in CSS 2, over preserving backward compatibility. Work on CSS level 3 started around the time of publication of the original CSS 2 recommendation. The earliest CSS 3 drafts were published in June 19
  • 14. Advantage  Flexibility  Accessibility  Separation of content from presentation  Site-wide consistency  Bandwidth  Page reformatting
  • 15. Limitations  Poor controls for flexible layouts   Selectors are unable to ascend  Vertical control limitations  Absence of expressions  Lack of column declaration   Cannot explicitly declare new scope independently of position