SlideShare une entreprise Scribd logo
1  sur  20
Lecture 2: CSS I SFDV2001 Web Development
Cascading Style Sheets ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Cascading Style Sheets ,[object Object],[object Object],[object Object]
A little background ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Getting started ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Getting started ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
 
 
CSS Rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
CSS Rules ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Cascading ,[object Object],[object Object],[object Object]
The cascade ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],* Later files take precedence over earlier ones. ** Later rules have greater weight.
The cascade ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
 
Ultimately the user wins ,[object Object]
Inheritance ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Inheritance
Inheritance Alter to suit
Inheritance ,[object Object],[object Object],[object Object],[object Object]
Recommended sites: CSS Zen garden: http://www.csszengarden.com/ A List Apart's CSS articles: http://www.alistapart.com/topics/code/css/ W3C's CSS Home Page: http://www.w3.org/Style/CSS/ Further reading: Cascading Style Sheets the Definitive Guide  by Eric A. Meyer CSS Cookbook  by Christopher Schmitt

Contenu connexe

Tendances

Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksAndolasoft Inc
 
6 Steps to Make Your CSS Code More Maintainable
6 Steps to Make Your CSS Code More Maintainable6 Steps to Make Your CSS Code More Maintainable
6 Steps to Make Your CSS Code More Maintainable10Clouds
 
Web Development Workshop (Front End)
Web Development Workshop (Front End)Web Development Workshop (Front End)
Web Development Workshop (Front End)DSCIIITLucknow
 
Style Your Site Part 1
Style Your Site Part 1Style Your Site Part 1
Style Your Site Part 1Ben MacNeill
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web DevelopmentRahul Mishra
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSNYCSS Meetup
 
Lesson 110 24 aug13-1400-ay
Lesson 110 24 aug13-1400-ayLesson 110 24 aug13-1400-ay
Lesson 110 24 aug13-1400-ayCodecademy Ren
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaverchowders
 
Web Designing Bugs - Fixes By Nyros Developer
Web Designing Bugs - Fixes By Nyros DeveloperWeb Designing Bugs - Fixes By Nyros Developer
Web Designing Bugs - Fixes By Nyros DeveloperNyros Technologies
 
Upstate CSCI 450 WebDev Chapter 3
Upstate CSCI 450 WebDev Chapter 3Upstate CSCI 450 WebDev Chapter 3
Upstate CSCI 450 WebDev Chapter 3DanWooster1
 
Css Architecture
Css ArchitectureCss Architecture
Css Architecturepelletized
 

Tendances (20)

Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
 
Organize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS TricksOrganize Your Website With Advanced CSS Tricks
Organize Your Website With Advanced CSS Tricks
 
6 Steps to Make Your CSS Code More Maintainable
6 Steps to Make Your CSS Code More Maintainable6 Steps to Make Your CSS Code More Maintainable
6 Steps to Make Your CSS Code More Maintainable
 
Web Development Workshop (Front End)
Web Development Workshop (Front End)Web Development Workshop (Front End)
Web Development Workshop (Front End)
 
HTML and CSS
HTML and CSSHTML and CSS
HTML and CSS
 
Css intro
Css introCss intro
Css intro
 
Css external style sheet
Css external style sheetCss external style sheet
Css external style sheet
 
Css introduction
Css   introductionCss   introduction
Css introduction
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Style Your Site Part 1
Style Your Site Part 1Style Your Site Part 1
Style Your Site Part 1
 
Css inclusion
Css   inclusionCss   inclusion
Css inclusion
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Web1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSSWeb1O1 - Intro to HTML/CSS
Web1O1 - Intro to HTML/CSS
 
Lesson 110 24 aug13-1400-ay
Lesson 110 24 aug13-1400-ayLesson 110 24 aug13-1400-ay
Lesson 110 24 aug13-1400-ay
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Web Designing Bugs - Fixes By Nyros Developer
Web Designing Bugs - Fixes By Nyros DeveloperWeb Designing Bugs - Fixes By Nyros Developer
Web Designing Bugs - Fixes By Nyros Developer
 
Rakshat bhati
Rakshat bhatiRakshat bhati
Rakshat bhati
 
Upstate CSCI 450 WebDev Chapter 3
Upstate CSCI 450 WebDev Chapter 3Upstate CSCI 450 WebDev Chapter 3
Upstate CSCI 450 WebDev Chapter 3
 
Css Architecture
Css ArchitectureCss Architecture
Css Architecture
 
Session 2 intro to Css
Session 2 intro to CssSession 2 intro to Css
Session 2 intro to Css
 

En vedette (8)

Lecture 8 Video
Lecture 8 VideoLecture 8 Video
Lecture 8 Video
 
Navigation1 A
Navigation1 ANavigation1 A
Navigation1 A
 
Lecture2 CSS 3
Lecture2   CSS 3Lecture2   CSS 3
Lecture2 CSS 3
 
Lecture 5 XML
Lecture 5  XMLLecture 5  XML
Lecture 5 XML
 
Lecture 9 Usability Orignal
Lecture 9 Usability OrignalLecture 9 Usability Orignal
Lecture 9 Usability Orignal
 
Lecture11 A Image
Lecture11 A ImageLecture11 A Image
Lecture11 A Image
 
Lecture 10 Image Format
Lecture 10  Image FormatLecture 10  Image Format
Lecture 10 Image Format
 
Lecture 11 B Security
Lecture 11 B SecurityLecture 11 B Security
Lecture 11 B Security
 

Similaire à Lecture2 CSS1

Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8RohanMistry15
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbookjackchenvlo
 
New Css style
New Css styleNew Css style
New Css styleBUDNET
 
This is css which compiled by alex that is impo
This is css which compiled by alex that is impoThis is css which compiled by alex that is impo
This is css which compiled by alex that is impoAlebelAyalneh
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.docbutest
 
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simpleJagadishBabuParri
 
Advance Css
Advance CssAdvance Css
Advance Cssvijayta
 
Advance Css 1194323118268797 5
Advance Css 1194323118268797 5Advance Css 1194323118268797 5
Advance Css 1194323118268797 5dharshyamal
 
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdfwubiederebe1
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer NotesVskills
 

Similaire à Lecture2 CSS1 (20)

Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
 
Css
CssCss
Css
 
New Css style
New Css styleNew Css style
New Css style
 
Css
CssCss
Css
 
This is css which compiled by alex that is impo
This is css which compiled by alex that is impoThis is css which compiled by alex that is impo
This is css which compiled by alex that is impo
 
Css
CssCss
Css
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Intermediate Web Design.doc
Intermediate Web Design.docIntermediate Web Design.doc
Intermediate Web Design.doc
 
Teched Inetrgation ppt and lering in simple
Teched Inetrgation ppt  and lering in simpleTeched Inetrgation ppt  and lering in simple
Teched Inetrgation ppt and lering in simple
 
Advance Css
Advance CssAdvance Css
Advance Css
 
Advance Css 1194323118268797 5
Advance Css 1194323118268797 5Advance Css 1194323118268797 5
Advance Css 1194323118268797 5
 
DHTML
DHTMLDHTML
DHTML
 
Css home
Css   homeCss   home
Css home
 
CSS
CSSCSS
CSS
 
Chapter 3 - CSS.pdf
Chapter 3 - CSS.pdfChapter 3 - CSS.pdf
Chapter 3 - CSS.pdf
 
Vskills certified css designer Notes
Vskills certified css designer NotesVskills certified css designer Notes
Vskills certified css designer Notes
 
Web technologies part-2
Web technologies part-2Web technologies part-2
Web technologies part-2
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Css - Tutorial
Css - TutorialCss - Tutorial
Css - Tutorial
 

Plus de Sur College of Applied Sciences (7)

Lecture 9 Professional Practices
Lecture 9 Professional PracticesLecture 9 Professional Practices
Lecture 9 Professional Practices
 
Lecture 9 Accessibility Original
Lecture 9 Accessibility OriginalLecture 9 Accessibility Original
Lecture 9 Accessibility Original
 
Accessibility Usability Professional Summry
Accessibility Usability Professional SummryAccessibility Usability Professional Summry
Accessibility Usability Professional Summry
 
Lecture 6 Data Driven Design
Lecture 6  Data Driven DesignLecture 6  Data Driven Design
Lecture 6 Data Driven Design
 
Lecture2 CSS 2
Lecture2  CSS 2Lecture2  CSS 2
Lecture2 CSS 2
 
Lecture1 B Frames&Forms
Lecture1 B  Frames&FormsLecture1 B  Frames&Forms
Lecture1 B Frames&Forms
 
Lecture 3 Javascript1
Lecture 3  Javascript1Lecture 3  Javascript1
Lecture 3 Javascript1
 

Dernier

psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docxPoojaSen20
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfAdmir Softic
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdfQucHHunhnh
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin ClassesCeline George
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docxPoojaSen20
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxheathfieldcps1
 
Magic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptxMagic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptxdhanalakshmis0310
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...christianmathematics
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxDenish Jangid
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17Celine George
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and ModificationsMJDuyan
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentationcamerronhm
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxRamakrishna Reddy Bijjam
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptxMaritesTamaniVerdade
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxcallscotland1987
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfNirmal Dwivedi
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.christianmathematics
 

Dernier (20)

Spatium Project Simulation student brief
Spatium Project Simulation student briefSpatium Project Simulation student brief
Spatium Project Simulation student brief
 
psychiatric nursing HISTORY COLLECTION .docx
psychiatric  nursing HISTORY  COLLECTION  .docxpsychiatric  nursing HISTORY  COLLECTION  .docx
psychiatric nursing HISTORY COLLECTION .docx
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
Magic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptxMagic bus Group work1and 2 (Team 3).pptx
Magic bus Group work1and 2 (Team 3).pptx
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Understanding Accommodations and Modifications
Understanding  Accommodations and ModificationsUnderstanding  Accommodations and Modifications
Understanding Accommodations and Modifications
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Python Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docxPython Notes for mca i year students osmania university.docx
Python Notes for mca i year students osmania university.docx
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptx
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 

Lecture2 CSS1

  • 1. Lecture 2: CSS I SFDV2001 Web Development
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.  
  • 8.  
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.  
  • 15.
  • 16.
  • 19.
  • 20. Recommended sites: CSS Zen garden: http://www.csszengarden.com/ A List Apart's CSS articles: http://www.alistapart.com/topics/code/css/ W3C's CSS Home Page: http://www.w3.org/Style/CSS/ Further reading: Cascading Style Sheets the Definitive Guide by Eric A. Meyer CSS Cookbook by Christopher Schmitt

Notes de l'éditeur

  1. Show CSS Zen Garden - Dave Shea (pronouned "shay") Show CSS Zean Garden files - same HTML for all versions.
  2. Show web standards project site with Acid2 test. Internet Explorer 5.0 for the Macintosh, shipped in March of 2000, was the first browser to have full (better than 99 per cent) CSS1 support. Microsoft Internet Explorer , whose version 6 lacks support for about 30 percent of CSS2 properties, and, more significantly, misinterprets a significant number of important properties, such as "width", "height", and "float". "We fully recognize that IE is behind the game today in CSS support. We’ve dug through the Acid 2 Test and analyzed IE’s problems with the test in some great detail, and we’ve made sure the bugs and features are on our list - however, there are some fairly large and difficult features to implement, and they will not all sort to the top of the stack in IE7. I believe we are doing a much better service to web developers out there in IE7 by fixing our known bang-your-head-on-the-desk bugs and usability problems first, and prioritizing the most commonly-requested features based on all the feedback we've had." - http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx
  3. You can use multiple linked or imported style sheets.
  4. You can use multiple linked or imported style sheets.
  5. User "!important" rules override author "!important" rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.
  6. Play with inheritance code. - Show that font face inherits automatically. - Show that background color does not automatically inherit but text color does. - Show that list color is automatic, show how to force border inhertitance.