Suche senden
Hochladen
Cascading style sheets (css)
•
Als PPT, PDF herunterladen
•
1 gefällt mir
•
1,159 views
V
veasnarin
Folgen
Technologie
Bildung
Diashow-Anzeige
Melden
Teilen
Diashow-Anzeige
Melden
Teilen
1 von 28
Jetzt herunterladen
Empfohlen
How else does Adobe help in HTML5 development?
How else does Adobe help in HTML5 development?
bhaktipingale
Css 1. -_introduction_2010-11_
Css 1. -_introduction_2010-11_
Jupiterstar Ko
INFT132 093 04 HTML and XHTML
INFT132 093 04 HTML and XHTML
Michael Rees
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
Andy Stratton
Chapter 17: Responsive Web Design
Chapter 17: Responsive Web Design
Steve Guinan
Css week11 2019 2020 for g10 by eng.osama ghandour
Css week11 2019 2020 for g10 by eng.osama ghandour
Osama Ghandour Geris
Html css
Html css
mohamed ashraf
Introduction to CSS3
Introduction to CSS3
Doris Chen
Empfohlen
How else does Adobe help in HTML5 development?
How else does Adobe help in HTML5 development?
bhaktipingale
Css 1. -_introduction_2010-11_
Css 1. -_introduction_2010-11_
Jupiterstar Ko
INFT132 093 04 HTML and XHTML
INFT132 093 04 HTML and XHTML
Michael Rees
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
Andy Stratton
Chapter 17: Responsive Web Design
Chapter 17: Responsive Web Design
Steve Guinan
Css week11 2019 2020 for g10 by eng.osama ghandour
Css week11 2019 2020 for g10 by eng.osama ghandour
Osama Ghandour Geris
Html css
Html css
mohamed ashraf
Introduction to CSS3
Introduction to CSS3
Doris Chen
Html Css
Html Css
pumas26
An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)
Ardee Aram
Css advanced – session 4
Css advanced – session 4
Dr. Ramkumar Lakshminarayanan
Introduction to CSS
Introduction to CSS
Shehzad Yaqoob
Cascading Style Sheets
Cascading Style Sheets
Marc Steel
Css
Css
Balakumaran Arunachalam
Cascading Style Sheets
Cascading Style Sheets
Paul Dionysius
Cashcading stylesheets
Cashcading stylesheets
reddivarihareesh
Cascading Style Sheets By Mukesh
Cascading Style Sheets By Mukesh
Mukesh Kumar
CSS
CSS
Vladimir Zhidal
Introduction to Cascading Style Sheets
Introduction to Cascading Style Sheets
Tushar Joshi
Cascading style sheets - CSS
Cascading style sheets - CSS
iFour Institute - Sustainable Learning
Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)
Reshmi Rajan
CSS Selectors
CSS Selectors
Rachel Andrew
CSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - Introduction
Mukesh Tekwani
CSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box Model
jamiecavanaugh
Cascading Style Sheets - CSS
Cascading Style Sheets - CSS
Sun Technlogies
LinkedIn SlideShare: Knowledge, Well-Presented
LinkedIn SlideShare: Knowledge, Well-Presented
SlideShare
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
CSC PPT 4.pptx
CSC PPT 4.pptx
DrRavneetSingh
Web design-workflow
Web design-workflow
Peter Kaizer
Css
Css
BalaKrishna Kolliboina
Weitere ähnliche Inhalte
Andere mochten auch
Html Css
Html Css
pumas26
An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)
Ardee Aram
Css advanced – session 4
Css advanced – session 4
Dr. Ramkumar Lakshminarayanan
Introduction to CSS
Introduction to CSS
Shehzad Yaqoob
Cascading Style Sheets
Cascading Style Sheets
Marc Steel
Css
Css
Balakumaran Arunachalam
Cascading Style Sheets
Cascading Style Sheets
Paul Dionysius
Cashcading stylesheets
Cashcading stylesheets
reddivarihareesh
Cascading Style Sheets By Mukesh
Cascading Style Sheets By Mukesh
Mukesh Kumar
CSS
CSS
Vladimir Zhidal
Introduction to Cascading Style Sheets
Introduction to Cascading Style Sheets
Tushar Joshi
Cascading style sheets - CSS
Cascading style sheets - CSS
iFour Institute - Sustainable Learning
Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)
Reshmi Rajan
CSS Selectors
CSS Selectors
Rachel Andrew
CSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - Introduction
Mukesh Tekwani
CSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box Model
jamiecavanaugh
Cascading Style Sheets - CSS
Cascading Style Sheets - CSS
Sun Technlogies
LinkedIn SlideShare: Knowledge, Well-Presented
LinkedIn SlideShare: Knowledge, Well-Presented
SlideShare
Andere mochten auch
(18)
Html Css
Html Css
An Introduction to Cascading Style Sheets (CSS3)
An Introduction to Cascading Style Sheets (CSS3)
Css advanced – session 4
Css advanced – session 4
Introduction to CSS
Introduction to CSS
Cascading Style Sheets
Cascading Style Sheets
Css
Css
Cascading Style Sheets
Cascading Style Sheets
Cashcading stylesheets
Cashcading stylesheets
Cascading Style Sheets By Mukesh
Cascading Style Sheets By Mukesh
CSS
CSS
Introduction to Cascading Style Sheets
Introduction to Cascading Style Sheets
Cascading style sheets - CSS
Cascading style sheets - CSS
Cascading Style Sheets(CSS)
Cascading Style Sheets(CSS)
CSS Selectors
CSS Selectors
CSS-Cascading Style Sheets - Introduction
CSS-Cascading Style Sheets - Introduction
CSS, CSS Selectors, CSS Box Model
CSS, CSS Selectors, CSS Box Model
Cascading Style Sheets - CSS
Cascading Style Sheets - CSS
LinkedIn SlideShare: Knowledge, Well-Presented
LinkedIn SlideShare: Knowledge, Well-Presented
Ähnlich wie Cascading style sheets (css)
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
CSC PPT 4.pptx
CSC PPT 4.pptx
DrRavneetSingh
Web design-workflow
Web design-workflow
Peter Kaizer
Css
Css
BalaKrishna Kolliboina
Css
Css
Sumit Gupta
2 introduction css
2 introduction css
Jalpesh Vasa
uptu web technology unit 2 Css
uptu web technology unit 2 Css
Abhishek Kesharwani
Introduction to ExtJS and its new features
Introduction to ExtJS and its new features
Synerzip
Ext Js introduction and new features in Ext Js 6
Ext Js introduction and new features in Ext Js 6
Sushil Shinde
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1
Jyoti Yadav
Team styles
Team styles
nathanscott
Vskills certified css designer Notes
Vskills certified css designer Notes
Vskills
Intro to HTML, CSS & JS - Internship Presentation Week-3
Intro to HTML, CSS & JS - Internship Presentation Week-3
Devang Garach
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
Mediacurrent
Howcssworks 100207024009-phpapp01
Howcssworks 100207024009-phpapp01
Likitha47
Beginners css tutorial for web designers
Beginners css tutorial for web designers
Singsys Pte Ltd
Designing using Web Standards with Dreamweaver
Designing using Web Standards with Dreamweaver
Dennis Deacon
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Suzanne Dergacheva
CSS Bootstrap.pdf
CSS Bootstrap.pdf
Priyankapawar886284
Building Rich Internet Applications with Ext JS
Building Rich Internet Applications with Ext JS
Mats Bryntse
Ähnlich wie Cascading style sheets (css)
(20)
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
CSC PPT 4.pptx
CSC PPT 4.pptx
Web design-workflow
Web design-workflow
Css
Css
Css
Css
2 introduction css
2 introduction css
uptu web technology unit 2 Css
uptu web technology unit 2 Css
Introduction to ExtJS and its new features
Introduction to ExtJS and its new features
Ext Js introduction and new features in Ext Js 6
Ext Js introduction and new features in Ext Js 6
4. Web Technology CSS Basics-1
4. Web Technology CSS Basics-1
Team styles
Team styles
Vskills certified css designer Notes
Vskills certified css designer Notes
Intro to HTML, CSS & JS - Internship Presentation Week-3
Intro to HTML, CSS & JS - Internship Presentation Week-3
Let's dig into the Omega Theme!
Let's dig into the Omega Theme!
Howcssworks 100207024009-phpapp01
Howcssworks 100207024009-phpapp01
Beginners css tutorial for web designers
Beginners css tutorial for web designers
Designing using Web Standards with Dreamweaver
Designing using Web Standards with Dreamweaver
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
Creating Landing Pages and Layouts for Drupal 8 - DrupalCon Baltimore
CSS Bootstrap.pdf
CSS Bootstrap.pdf
Building Rich Internet Applications with Ext JS
Building Rich Internet Applications with Ext JS
Kürzlich hochgeladen
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
Khem
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Puma Security, LLC
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Kürzlich hochgeladen
(20)
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
Cascading style sheets (css)
1.
© 2007 Triune
Group Insight. Strategy. Performance. Cascading Style Sheets (CSS) An Introduction Chris Poteet
2.
© 2007 Triune
Group Insight. Strategy. Performance. Definition • Cascading Style Sheets (CSS) form the presentation layer of the user interface. – Structure (XHTML) – Behavior (Client-Side Scripting) – Presentation (CSS) • Tells the browser agent how the element is to be presented to the user.
3.
© 2007 Triune
Group Insight. Strategy. Performance. Why CSS? • CSS removes the presentation attributes from the structure allowing reusability, ease of maintainability, and an interchangeable presentation layer. • HTML was never meant to be a presentation language. Proprietary vendors have created tags to add presentation to structure. – <font> – <b> – <i> • CSS allows us to make global and instantaneous changes easily.
4.
© 2007 Triune
Group Insight. Strategy. Performance. The Cascade • The power of CSS is found in the “cascade” which is the combination of the browser’s default styles, external style sheets, embedded, inline, and even user- defined styles. • The cascade sets priorities on the individual styles which effects inheritance.
5.
© 2007 Triune
Group Insight. Strategy. Performance. CSS Inheritance • Allows elements to “inherit” styles from parent elements. • Helpful in reducing the amount of CSS to set styles for child elements. • Unless a more specific style is set on a child element, the element looks to the parent element for its styles. • Each style has a numeric specificity value that is given based on its selector.
6.
© 2007 Triune
Group Insight. Strategy. Performance. Using Style Sheets • External Style Sheet <link rel=“stylesheet” type=“text/css” href=“location.css” /> – Also a “media” descriptor (screen, tv, print, handheld, etc) – Preferrd method. • Embedded Styles <style type=“text/css”> body {} </style> • Inline Styles <p style=“font-size: 12px”>Lorem ipsum</p>
7.
© 2007 Triune
Group Insight. Strategy. Performance. CSS Syntax selector/element { property: value; } The selector can either be a grouping of elements, an indentifier, class, or single XHTML element (body, div, etc)
8.
© 2007 Triune
Group Insight. Strategy. Performance. Type (Element) Selector Specify the style(s) for a single XHTML element. body { margin: 0; padding: 0; border-top: 1px solid #ff0; }
9.
© 2007 Triune
Group Insight. Strategy. Performance. Grouping Elements Allows you to specify a single style for multiple elements at one time. h1, h2, h3, h4, h5, h6 { font-family: “Trebuchet MS”, sans-serif; }
10.
© 2007 Triune
Group Insight. Strategy. Performance. The Class Selector <p class=“intro”>This is my introduction text</p> .intro { font: 12px verdana, sans-serif; margin: 10px; }
11.
© 2007 Triune
Group Insight. Strategy. Performance. The Identifier Selector <p id=“intro”> This is my introduction text</p> #intro { border-bottom: 2px dashed #fff; }
12.
© 2007 Triune
Group Insight. Strategy. Performance. CSS Selectors • Identifier or class? What’s the difference? – An identifier is specified only once on a page and has a higher inheritance specificity than a class. – A class is reusable as many times as needed in a page. – Use identifiers for main sections and sub- sections of your document.
13.
© 2007 Triune
Group Insight. Strategy. Performance. Advanced CSS Selectors • Descendant Selector body h1 { } #navigation p {} • Adjacent Sibling Selectors p.intro , span {} • Child Selectors div ol > p {} • Universal Selector * {} • Attribute Selectors div[href=“http://home.org”] • Pseudo-Class Selectors a:active {} #nav:hover {}
14.
© 2007 Triune
Group Insight. Strategy. Performance. The Box Model • Every element in the DOM (Document Object Model) has a conceptual “box” for presentation. • The box consists of margin, padding, border, content (width, height), and offset (top, left)
15.
© 2007 Triune
Group Insight. Strategy. Performance. CSS and Semantic Web • CSS aids in increasing the semantic value of the web content. • Increasing the semantic value of content aids in accessibility, and it is integral in the move away from (X)HTML to XML driven applications. • An example would be using an unordered list for navigation instead of a table. – Navigation is truly a “list” of information and not tabular data.
16.
© 2007 Triune
Group Insight. Strategy. Performance. CSS Browser Acceptance • The advent of modern browsers (IE 5.5+, Firefox 1.5+, Safari 2+, Opera) has eliminated the fear of effectively utilizing CSS. • There remain certain selectors and attributes that vary in browser acceptance, but IE7, FF 2, Safari 3 all accept the CSS 2.1 specification. • There no longer remains any excuse not to utilize CSS in your application.
17.
© 2007 Triune
Group Insight. Strategy. Performance. CSS Fonts • Font-family • Font-weight • Font-style • Font-size
18.
© 2007 Triune
Group Insight. Strategy. Performance. CSS Units & Colors • Units – % – in – cm – mm – em – px – pt • Colors – color name (red, etc) – rgb(x,x,x) – #rrggbb (HEX)
19.
© 2007 Triune
Group Insight. Strategy. Performance. CSS Layout • Margin • Padding • Border • Z-index • Positioning • Width • Height • Float • Text-align • Vertical-align
20.
© 2007 Triune
Group Insight. Strategy. Performance. CSS vs Table Layouts • Tables are designed only for tabular data and not for layout. – Reduces semantic value of markup – Makes updating difficult and impractical • CSS allows positioning that reduces overall markup size, form, and allows layout to be changed by only editing a stylesheet. • CSS layouts also improve accessibility, because screen readers turn off style sheets allowing only the content to remain.
21.
© 2007 Triune
Group Insight. Strategy. Performance. CSS Text • Text-indent • Text-align • Text-decoration • Letter-spacing • Text-transform • Word-spacing • White-space
22.
© 2007 Triune
Group Insight. Strategy. Performance. CSS Background • Background-color • Background-image • Background-position • Background-repeat
23.
© 2007 Triune
Group Insight. Strategy. Performance. CSS Lists • List-style • List-style-image • List-style-position • List-style-type
24.
© 2007 Triune
Group Insight. Strategy. Performance. CSS Shorthand • Consolidates many styles into a single declaration. font-family: verdana, sans-serif; font-weight: bold; font-size: 12px; font: bold 12px verdana, sans-serif; padding-top: 5px; padding-right: 8px; padding-bottom: 5px; padding-left: 10px; padding: 5px 8px 5px 10px;
25.
© 2007 Triune
Group Insight. Strategy. Performance. CSS and Accessibility • Section 508 Standards – “Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.” (1194.22C) – “A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.” (1194.22K) • By moving all presentation into style sheets and removing tables from layout the content is presented in an optimal manner to screen readers and other accessibility tools. • CSS 2.1 has “aural” properties that can be applied to content.
26.
© 2007 Triune
Group Insight. Strategy. Performance. Recommendations • Remove antiquated browser checks and deliver different sheets. • Consolidate all our main styles into site.css in the App_Themes folder. • All CSS files should be in the App_Themes folder and have a .css extension (not .txt). • Make a decision on what standard colors, fonts, alignment, etc should go into the app. • Remove spacer.gifs, table layouts, and other browser hacks in lieu of proper CSS. • Make a decision on how individual modules should implement their styles. • Make a decision on how the CSS file is to be structured. • Move inline presentation formatting to CSS external sheets.
27.
© 2007 Triune
Group Insight. Strategy. Performance. CSS Resources • CSS2 Reference • CSS Units • CSS Colors • Tableless Forms • Preparing your CSS for Internet Explorer 7 • CSS Tinderbox (CSS Layouts) • Approx Conversion From pts to px • CSS 2 Cheat Sheet • CSS Shorthand Guide
28.
© 2007 Triune
Group Insight. Strategy. Performance. Questions?
Jetzt herunterladen