SlideShare une entreprise Scribd logo

Advanced Cascading Style Sheets

•Télécharger en tant que PPT, PDF•
•
F
fantasticdigitaltools

Advanced CSS by: Alexandra Vlachakis Sandy Creek High School, Fayette County Schools Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media COURSE: Advanced Web Design UNIT 6: BCS-AWD-6 Advanced CSS

Formation
1  sur  111
Advanced CSS by: Alexandra Vlachakis Sandy Creek High School, Fayette County Schools Content and Resources Used With Permission: Interact With Web Standards. Copyright 2010. Erin Anderson et. Al. W3 Schools. www.w3schools.com. 12-25-11.
Instructors Note: ,[object Object],[object Object],[object Object]
CSS Review
Selector Review ,[object Object],[object Object],*The selector is normally the HTML element you want to style
Selector Review ,[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],Selector Review
Property & Value Review ,[object Object],*Properties are separated from their respective values by colons : * Pairs are separated from each other by semicolons ;
Declaration Review ,[object Object],*Each declaration consists of a property and a value.
Style Sheets Review ,[object Object],[object Object],[object Object],[object Object],[object Object]
Class Selectors Review ,[object Object],[object Object],[object Object],[object Object],[object Object]
id Selectors Review ,[object Object],[object Object],[object Object],[object Object],[object Object]
Class and id Selectors Review ,[object Object],# .
How well do you know CSS? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
End Review ,[object Object],[object Object]
Lesson 1: Alpha or Transparent Colors
[object Object],[object Object],[object Object],[object Object],[object Object],Lesson 1: Alpha or Transparent Colors
Lesson 1 Assignment Part 1 of 2: CSS Alpha Color HTML Page ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 1 Assignment Part 2 of 2: CSS Alpha Color Style Sheet ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 2: Block elements
Lesson 2: Block elements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 2 Assignment: Div Tags & Block elements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 3: CSS Positioning
Lesson 3: CSS Positioning ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 3: CSS Positioning ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
SPECIAL PAUSE FOR DOCTYPE! ,[object Object],[object Object],[object Object],[object Object],[object Object]
SPECIAL PAUSE FOR DOCTYPE! ,[object Object],[object Object],[object Object],[object Object],[object Object]
SPECIAL PAUSE FOR DOCTYPE! ,[object Object],[object Object]
Lesson 3: CSS Positioning ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 3: CSS Positioning ,[object Object],[object Object],[object Object],[object Object],[object Object],Source: http://www.w3schools.com/Css/css_positioning.asp
Lesson 3: CSS Positioning ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Source: http://www.w3schools.com/Css/css_positioning.asp
Lesson 3 Assignment: CSS Positioning ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 4: Aligning Block Elements
Lesson 4: Aligning Block Elements ,[object Object],[object Object],[object Object],[object Object]
Lesson 4: Aligning Block Elements ,[object Object],[object Object],[object Object],[object Object],[object Object],Source: http://www.w3schools.com/css/css_align.asp
Lesson 4: Aligning Block Elements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Source: http://www.w3schools.com/css/css_align.asp
Lesson 4: Aligning Block Elements ,[object Object],[object Object],Source: http://www.w3schools.com/css/css_align.asp
Lesson 4: Aligning Block Elements ,[object Object],[object Object],[object Object],[object Object]
Lesson 4: Aligning Block Elements ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 4: Aligning Block Elements ,[object Object],[object Object]
Lesson 5: Float
Lesson 5: Float ,[object Object],[object Object],[object Object]
Lesson 5: How Elements Float ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Source: http://w3schools.com/css/css_float.asp
Lesson 5: Float ,[object Object],[object Object],[object Object],[object Object],[object Object],Source: http://w3schools.com/css/css_float.asp
Lesson 5: Float ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Source: http://w3schools.com/css/css_float.asp
Lesson 5 Assignment: CSS Align and Float ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 6: Lists
Lesson 6: Lists ,[object Object],[object Object],[object Object],[object Object],Source: http://w3schools.com/css/css_list.asp
Lesson 6: Lists ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Source: http://w3schools.com/css/css_list.asp
Lesson 6: Different List Item Markers ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Source: http://w3schools.com/css/css_list.asp
Lesson 6 Assignment: CSS Lists Unordered ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 6 Assignment: CSS Lists Ordered ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 6: Lists Using Images ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],More list examples: http://w3schools.com/css/tryit.asp?filename= trycss_list-style-type_all
Lesson 6 Assignment: CSS Lists With An Image ,[object Object],[object Object],[object Object],[object Object]
Lesson 7: Fonts & Text On Web Pages
Lesson 7: Points are For Print ,[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 7: Setting Font Size ,[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],Lesson 7: Setting Font Size
[object Object],[object Object],[object Object],[object Object],Lesson 7: Setting Font Size
Lesson 7: Setting Font Size with Pixels ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Browser Compatibility: This example allows Firefox, Chrome, and Safari to resize the text, but not Internet Explorer . The text can be resized in all browsers using the zoom tool (however, this resizes the entire page, not just the text).
Lesson 7: Setting Font Size with Em ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 7: Setting Font Size with Em ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 7: Font Style ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 7: CSS Font Families ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 7: CSS Font Families ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 7: Font Bold ,[object Object],[object Object],[object Object],[object Object]
Lesson 7: Setting all the Styles in one line for FONT ,[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 7: Text Color ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 7: Text Alignment ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 7: Text Decoration ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 7: Text Transformation ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 7: Text Indentation ,[object Object],[object Object],[object Object]
Lesson 7 Assignment: CSS Fonts & Text ,[object Object],[object Object]
Lesson 8: CSS Tables
Lesson 8: HTML Tables Review ,[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 8: HTML Tables Review ,[object Object],[object Object]
Lesson 8: CSS Table Borders ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 8: Table Width and Height ,[object Object],[object Object],[object Object],[object Object]
Lesson 8: Table Text Alignment ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 8: Table Padding ,[object Object],[object Object],[object Object]
Lesson 8: Table Color ,[object Object],[object Object],[object Object]
Lesson 8 Assignment: CSS Table ,[object Object],[object Object]
Lesson 9: White Space & Borders
Lesson 9: White Space ,[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 9: Borders ,[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 9: Border-style values: ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 9: Border Width ,[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 9: Border Color ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 9: Border - Individual sides ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 9: Border - Shorthand property ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 9: White Space - Margins ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 9: White Space - Margins ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 9: White Space - Margins ,[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 9: White Space - Margins ,[object Object],[object Object],[object Object],[object Object]
Lesson 9: White Space - Padding ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 9: White Space - Padding ,[object Object],[object Object],[object Object],[object Object]
Lesson 9: White Space - Padding ,[object Object],[object Object],[object Object]
Lesson 9: White Space - Padding ,[object Object],[object Object],[object Object],[object Object]
Lesson 9: White Space - Padding ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 9 Assignment: CSS White Space ,[object Object],[object Object]
Lesson 10: Navigation Menus
Lesson 10: Navigation Menus ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 10: Navigation Menus ,[object Object],[object Object],[object Object]
Lesson 10: Navigation Menus ,[object Object],[object Object],[object Object]
Lesson 10: Vertical Navigation Menus ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 10: Horizontal Navigation Menus ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 10: Navigation Menus Floating List Items ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Lesson 10 Assignment: CSS Navigation Menus ,[object Object],[object Object]
Culminating Unit Performance Task ,[object Object]
Optional Lesson 11: CSS 3
CSS 3 ,[object Object],[object Object]
CSS3 Example ,[object Object],[object Object],CSS3 Reference table: http://w3schools.com/css3/css3_reference.asp

Recommandé

Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basicsEliran Eliassy
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for BeginnersAmit Kumar Singh
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to cssEvolution Network
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation Salman Memon
 
Css Ppt
Css PptCss Ppt
Css PptHema Prasanth
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Chris Poteet
 
CSS Basics
CSS BasicsCSS Basics
CSS BasicsSanjeev Kumar
 

Recommandé

Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basicsEliran Eliassy
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for BeginnersAmit Kumar Singh
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to cssEvolution Network
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation Salman Memon
 
Css Ppt
Css PptCss Ppt
Css PptHema Prasanth
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS PresentationShawn Calvert
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Chris Poteet
 
CSS Basics
CSS BasicsCSS Basics
CSS BasicsSanjeev Kumar
 
Css
CssCss
CssHemant Saini
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 
Html n CSS
Html n CSSHtml n CSS
Html n CSSSukrit Gupta
 
css.ppt
css.pptcss.ppt
css.pptbhasula
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript ProgrammingSehwan Noh
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptFahim Abdullah
 
CSS Basics
CSS BasicsCSS Basics
CSS BasicsWordPress Memphis
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introductionapnwebdev
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpcasestudyhelp
 
CSS
CSSCSS
CSSPeople Strategists
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examplesAlfredo Torre
 
CSS
CSSCSS
CSSVladimir Zhidal
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & JavascriptDavid Lindkvist
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksAmit Tyagi
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSSAmit Tyagi
 
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
CSS CSS
CSS Sunil OS
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)AakankshaR
 
Java script
Java scriptJava script
Java scriptShyam Khant
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSSBrainware Consultancy Pvt Ltd
 
Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSSStrongback Consulting
 
Week3 css
Week3 cssWeek3 css
Week3 cssRowena LI
 

Contenu connexe

Tendances

(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript ProgrammingSehwan Noh
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptFahim Abdullah
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introductionapnwebdev
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpcasestudyhelp
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examplesAlfredo Torre
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksAmit Tyagi
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSSAmit Tyagi
 
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
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)AakankshaR
 

Tendances (20)

Css
CssCss
Css
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Html n CSS
Html n CSSHtml n CSS
Html n CSS
 
css.ppt
css.pptcss.ppt
css.ppt
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
CSS
CSSCSS
CSS
 
HTML5: features with examples
HTML5: features with examplesHTML5: features with examples
HTML5: features with examples
 
CSS
CSSCSS
CSS
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
How Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) WorksHow Cascading Style Sheets (CSS) Works
How Cascading Style Sheets (CSS) Works
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Beginners css tutorial for web designers
Beginners css tutorial for web designersBeginners css tutorial for web designers
Beginners css tutorial for web designers
 
CSS
CSS CSS
CSS
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
 
Java script
Java scriptJava script
Java script
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 

Similaire à Advanced Cascading Style Sheets

Introduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and JqueryIntroduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and Jqueryvaluebound
 
Shyam sunder Rajasthan Computer
Shyam sunder Rajasthan ComputerShyam sunder Rajasthan Computer
Shyam sunder Rajasthan Computershyamverma305
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1Shawn Calvert
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Erin M. Kidwell
 
1. Advanced Web Designing (12th IT) (1).pdf
1. Advanced Web Designing (12th IT) (1).pdf1. Advanced Web Designing (12th IT) (1).pdf
1. Advanced Web Designing (12th IT) (1).pdfAAFREEN SHAIKH
 
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 Mistakessanjay2211
 
Css introduction
Css introductionCss introduction
Css introductionSridhar P
 
Css tutorial by viveksingh698@gmail.com
Css tutorial by viveksingh698@gmail.comCss tutorial by viveksingh698@gmail.com
Css tutorial by viveksingh698@gmail.comvivek698
 

Similaire à Advanced Cascading Style Sheets (20)

Rational HATS and CSS
Rational HATS and CSSRational HATS and CSS
Rational HATS and CSS
 
Week3 css
Week3 cssWeek3 css
Week3 css
 
Csstutorial
CsstutorialCsstutorial
Csstutorial
 
CSS
CSSCSS
CSS
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Introduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and JqueryIntroduction to Html5, css, Javascript and Jquery
Introduction to Html5, css, Javascript and Jquery
 
Shyam sunder Rajasthan Computer
Shyam sunder Rajasthan ComputerShyam sunder Rajasthan Computer
Shyam sunder Rajasthan Computer
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
Girl Develop It Cincinnati: Intro to HTML/CSS Class 2
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Css - Tutorial
Css - TutorialCss - Tutorial
Css - Tutorial
 
1. Advanced Web Designing (12th IT) (1).pdf
1. Advanced Web Designing (12th IT) (1).pdf1. Advanced Web Designing (12th IT) (1).pdf
1. Advanced Web Designing (12th IT) (1).pdf
 
Css
CssCss
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
 
Unit 2.1
Unit 2.1Unit 2.1
Unit 2.1
 
Css introduction
Css introductionCss introduction
Css introduction
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
 
Lecture-6.pptx
Lecture-6.pptxLecture-6.pptx
Lecture-6.pptx
 
Css tutorial by viveksingh698@gmail.com
Css tutorial by viveksingh698@gmail.comCss tutorial by viveksingh698@gmail.com
Css tutorial by viveksingh698@gmail.com
 

Dernier

TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...Nguyen Thanh Tu Collection
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfagholdier
 
Third Battle of Panipat detailed notes.pptx
Third Battle of Panipat detailed notes.pptxThird Battle of Panipat detailed notes.pptx
Third Battle of Panipat detailed notes.pptxAmita Gupta
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibitjbellavia9
 
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
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxVishalSingh1417
 
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
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentationcamerronhm
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.MaryamAhmad92
 
PROCESS RECORDING FORMAT.docx
PROCESS RECORDING FORMAT.docxPROCESS RECORDING FORMAT.docx
PROCESS RECORDING FORMAT.docxPoojaSen20
 
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 Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17Celine George
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxnegromaestrong
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfSherif Taha
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhikauryashika82
 
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
 

Dernier (20)

TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Third Battle of Panipat detailed notes.pptx
Third Battle of Panipat detailed notes.pptxThird Battle of Panipat detailed notes.pptx
Third Battle of Panipat detailed notes.pptx
 
Asian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptxAsian American Pacific Islander Month DDSD 2024.pptx
Asian American Pacific Islander Month DDSD 2024.pptx
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
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
 
Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
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
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 
PROCESS RECORDING FORMAT.docx
PROCESS RECORDING FORMAT.docxPROCESS RECORDING FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
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 Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdf
 
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in DelhiRussian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
 
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
 

Advanced Cascading Style Sheets

  • 1. Advanced CSS by: Alexandra Vlachakis Sandy Creek High School, Fayette County Schools Content and Resources Used With Permission: Interact With Web Standards. Copyright 2010. Erin Anderson et. Al. W3 Schools. www.w3schools.com. 12-25-11.
  • 2.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15. Lesson 1: Alpha or Transparent Colors
  • 16.
  • 17.
  • 18.
  • 19. Lesson 2: Block elements
  • 20.
  • 21.
  • 22. Lesson 3: CSS Positioning
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32. Lesson 4: Aligning Block Elements
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40. Lesson 5: Float
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46. Lesson 6: Lists
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54. Lesson 7: Fonts & Text On Web Pages
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73. Lesson 8: CSS Tables
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82. Lesson 9: White Space & Borders
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100. Lesson 10: Navigation Menus
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 110.
  • 111.