Enviar pesquisa
Carregar
Cascading style sheets (css)
•
Transferir como PPT, PDF
•
1 gostou
•
1,159 visualizações
V
veasnarin
Seguir
Tecnologia
Educação
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 28
Baixar agora
Recomendados
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
Recomendados
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
Mais conteúdo relacionado
Destaque
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
Destaque
(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
Semelhante a 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
Semelhante a 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
Último
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
charlottematthew16
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
Zilliz
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
Scott Keck-Warren
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
NavinnSomaal
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Slibray Presentation
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
null - The Open Security Community
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
BookNet Canada
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Safe Software
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
Memoori
Training state-of-the-art general text embedding
Training state-of-the-art general text embedding
Zilliz
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
2toLead Limited
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
Enterprise Knowledge
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
Ridwan Fadjar
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
ScyllaDB
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Dubai Multi Commodity Centre
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
The Digital Insurer
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
hariprasad279825
Último
(20)
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
Training state-of-the-art general text embedding
Training state-of-the-art general text embedding
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
My INSURER PTE LTD - Insurtech Innovation Award 2024
My INSURER PTE LTD - Insurtech Innovation Award 2024
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
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?
Baixar agora