SlideShare a Scribd company logo
CSS CONTENTS INTRODUCTION CSS COMMENTS CSS COLORS CSS TEXT CSS ID AND CLASS POSITIONING OVERLAPPING ELEMENTS CSS ALIGN CROSS BROWSERS COMPATIBLE  ISSUES
INTRODUSTION  *  CSS stands for Cascading Style Sheets  *  Styles define how to display HTML elements *  Styles were added to HTML 4.0 to solve a    problem *  External Style Sheets can save a lot of work *  External Style Sheets are stored in CSS files
CSS COMMENTS Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this: /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }
CSS Colors Colors are displayed combining RED, GREEN, and BLUE light. COLOR VALUES CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). Hex values are written as 3 double digit numbers, starting with a # sign.
CSS TEXT Text Color The color property is used to set the color of the text. The color can be specified by: *  name - a color name, like "red" *  RGB - an RGB value, like "rgb(255,0,0)" *  Hex - a hex value, like "#ff0000" The default color for a page is defined in the body selector. Example body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}
Text Alignment The text-align property is used to set the horizontal alignment of a text. Text can be centered, or aligned to the left or right, or justified. When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight Example h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}
Text Decoration The text-decoration property is used to set or remove decorations from text. The text-decoration property is mostly used to remove underlines from links for design purposes: Example a {text-decoration:none;}
Text Transformation The text-transform property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word. Example p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}
Text Indentation The text-indentation property is used to specify the indentation of the first line of a text. Example p {text-indent:50px;}
CSS Example body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-size:20px; }
CSS ID AND CLASS The id Selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1": Example #para1 { text-align:center; color:red; }
The c lass Selector The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for any HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned: Example .center {text-align:center;}
POSITIONING The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method. There are four different positioning methods.
Static Positioning HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.
Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled: Example p.pos_fixed { position:fixed; top:30px; right:5px; }
Relative Positioning A relative positioned element is positioned relative to its normal position. Example h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }
Absolute Positioning An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>: Example h2 { position:absolute; left:100px; top:150px; }
Overlapping Elements When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order: Example img { position:absolute; left:0px; top:0px; z-index:-1 }
CSS Align Aligning Block Elements A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: * <h1> * <p> * <div>
Center Aligning  Block elements can be aligned by setting the left and right margins to &quot;auto&quot;. Note:  Using margin:auto will not work in Internet Explorer, unless a !DOCTYPE is declared. Setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element: Example . center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; }
Left and Right Aligning   Using the position Property Example .right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }
CROSSBROWSER COMPATIBILITY ISSUES When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers. There is also another problem with IE when using the position property. If a container element (in our case <div class=&quot;container&quot;>) has a specified width, and the !DOCTYPE declaration is missing, IE will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the position property:
Example body{ margin:0; padding:0;} .container{ position:relative; width:100%; } .right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }
THANK  YOU

More Related Content

What's hot

Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Amit Tyagi
 
Css position
Css positionCss position
Css position
Webtech Learning
 
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
Fahim Abdullah
 
Css Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
EPAM Systems
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
abhilashagupta
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
WordPress Memphis
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
Ravinder Kamboj
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
Sanjeev Kumar
 
Javascript
JavascriptJavascript
Javascript
Manav Prasad
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
Amit Kumar Singh
 
Basic html structure
Basic html structureBasic html structure
Basic html structure
Jhaun Paul Enriquez
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
Brainware Consultancy Pvt Ltd
 
2. HTML forms
2. HTML forms2. HTML forms
2. HTML forms
Pavle Đorđević
 
Html table tags
Html table tagsHtml table tags
Html table tags
eShikshak
 
Css ppt
Css pptCss ppt
Css ppt
Nidhi mishra
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
palhaftab
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
Shawn Calvert
 
Java script
Java scriptJava script
Java script
Abhishek Kesharwani
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
Andres Baravalle
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
AakankshaR
 

What's hot (20)

Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Css position
Css positionCss position
Css position
 
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 Complete Notes
Css Complete NotesCss Complete Notes
Css Complete Notes
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Javascript
JavascriptJavascript
Javascript
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Basic html structure
Basic html structureBasic html structure
Basic html structure
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
2. HTML forms
2. HTML forms2. HTML forms
2. HTML forms
 
Html table tags
Html table tagsHtml table tags
Html table tags
 
Css ppt
Css pptCss ppt
Css ppt
 
Lecture 2 introduction to html
Lecture 2  introduction to htmlLecture 2  introduction to html
Lecture 2 introduction to html
 
Html / CSS Presentation
Html / CSS PresentationHtml / CSS Presentation
Html / CSS Presentation
 
Java script
Java scriptJava script
Java script
 
Introduction to JavaScript
Introduction to JavaScriptIntroduction to JavaScript
Introduction to JavaScript
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
 

Similar to Css Ppt

CSS
CSSCSS
Css.prabu
Css.prabuCss.prabu
Css.prabu
Prabu Cse
 
CSS ppt
CSS pptCSS ppt
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Folasade Adedeji
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
Bulldogs83
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
Bulldogs83
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
Programmer Blog
 
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
sanjay2211
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
Vladimir Valencia
 
CSS
CSSCSS
Css advanced – session 5
Css advanced – session 5Css advanced – session 5
Css advanced – session 5
Dr. Ramkumar Lakshminarayanan
 
CSS
CSSCSS
CSS
ARJUN
 
Css introduction
Css  introductionCss  introduction
Css introduction
vishnu murthy
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
vedaste
 
CSS notes
CSS notesCSS notes
CSS notes
Rajendra Prasad
 
css-ppt.pdf
css-ppt.pdfcss-ppt.pdf
css-ppt.pdf
EktaDesai14
 
Css 101
Css 101Css 101
Css
CssCss
CSS Basic and Common Errors
CSS Basic and Common ErrorsCSS Basic and Common Errors
CSS Basic and Common Errors
Hock Leng PUAH
 
CSS.pptx
CSS.pptxCSS.pptx

Similar to Css Ppt (20)

CSS
CSSCSS
CSS
 
Css.prabu
Css.prabuCss.prabu
Css.prabu
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
3.2 introduction to css
3.2 introduction to css3.2 introduction to css
3.2 introduction to css
 
Introduction to css by programmerblog.net
Introduction to css by programmerblog.netIntroduction to css by programmerblog.net
Introduction to css by programmerblog.net
 
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
 
TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0TUTORIAL DE CSS 2.0
TUTORIAL DE CSS 2.0
 
CSS
CSSCSS
CSS
 
Css advanced – session 5
Css advanced – session 5Css advanced – session 5
Css advanced – session 5
 
CSS
CSSCSS
CSS
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
CSS notes
CSS notesCSS notes
CSS notes
 
css-ppt.pdf
css-ppt.pdfcss-ppt.pdf
css-ppt.pdf
 
Css 101
Css 101Css 101
Css 101
 
Css
CssCss
Css
 
CSS Basic and Common Errors
CSS Basic and Common ErrorsCSS Basic and Common Errors
CSS Basic and Common Errors
 
CSS.pptx
CSS.pptxCSS.pptx
CSS.pptx
 

More from Hema Prasanth

Web 2 0 Ppt
Web 2 0 PptWeb 2 0 Ppt
Web 2 0 Ppt
Hema Prasanth
 
Php Ppt
Php PptPhp Ppt
Php Ppt
Hema Prasanth
 
Mysql Ppt
Mysql PptMysql Ppt
Mysql Ppt
Hema Prasanth
 
Linux
Linux Linux
Html Ppt
Html PptHtml Ppt
Html Ppt
Hema Prasanth
 
Apache Ppt
Apache PptApache Ppt
Apache Ppt
Hema Prasanth
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
Hema Prasanth
 

More from Hema Prasanth (7)

Web 2 0 Ppt
Web 2 0 PptWeb 2 0 Ppt
Web 2 0 Ppt
 
Php Ppt
Php PptPhp Ppt
Php Ppt
 
Mysql Ppt
Mysql PptMysql Ppt
Mysql Ppt
 
Linux
Linux Linux
Linux
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Apache Ppt
Apache PptApache Ppt
Apache Ppt
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
 

Recently uploaded

How to Manage Early Receipt Printing in Odoo 17 POS
How to Manage Early Receipt Printing in Odoo 17 POSHow to Manage Early Receipt Printing in Odoo 17 POS
How to Manage Early Receipt Printing in Odoo 17 POS
Celine George
 
Codeavour 5.0 International Impact Report - The Biggest International AI, Cod...
Codeavour 5.0 International Impact Report - The Biggest International AI, Cod...Codeavour 5.0 International Impact Report - The Biggest International AI, Cod...
Codeavour 5.0 International Impact Report - The Biggest International AI, Cod...
Codeavour International
 
ASP.NET Core Interview Questions PDF By ScholarHat.pdf
ASP.NET Core Interview Questions PDF By ScholarHat.pdfASP.NET Core Interview Questions PDF By ScholarHat.pdf
ASP.NET Core Interview Questions PDF By ScholarHat.pdf
Scholarhat
 
Node JS Interview Question PDF By ScholarHat
Node JS Interview Question PDF By ScholarHatNode JS Interview Question PDF By ScholarHat
Node JS Interview Question PDF By ScholarHat
Scholarhat
 
How to Manage Shipping Connectors & Shipping Methods in Odoo 17
How to Manage Shipping Connectors & Shipping Methods in Odoo 17How to Manage Shipping Connectors & Shipping Methods in Odoo 17
How to Manage Shipping Connectors & Shipping Methods in Odoo 17
Celine George
 
View Inheritance in Odoo 17 - Odoo 17 Slides
View Inheritance in Odoo 17 - Odoo 17  SlidesView Inheritance in Odoo 17 - Odoo 17  Slides
View Inheritance in Odoo 17 - Odoo 17 Slides
Celine George
 
Imagination in Computer Science Research
Imagination in Computer Science ResearchImagination in Computer Science Research
Imagination in Computer Science Research
Abhik Roychoudhury
 
QCE – Unpacking the syllabus Implications for Senior School practices and ass...
QCE – Unpacking the syllabus Implications for Senior School practices and ass...QCE – Unpacking the syllabus Implications for Senior School practices and ass...
QCE – Unpacking the syllabus Implications for Senior School practices and ass...
mansk2
 
Introduction to Google Productivity Tools for Office and Personal Use
Introduction to Google Productivity Tools for Office and Personal UseIntroduction to Google Productivity Tools for Office and Personal Use
Introduction to Google Productivity Tools for Office and Personal Use
Excellence Foundation for South Sudan
 
10th Social Studies Enrichment Material (Abhyasa Deepika) EM.pdf
10th Social Studies Enrichment Material (Abhyasa Deepika) EM.pdf10th Social Studies Enrichment Material (Abhyasa Deepika) EM.pdf
10th Social Studies Enrichment Material (Abhyasa Deepika) EM.pdf
SSRCreations
 
C# Interview Questions PDF By ScholarHat.pdf
C# Interview Questions PDF By ScholarHat.pdfC# Interview Questions PDF By ScholarHat.pdf
C# Interview Questions PDF By ScholarHat.pdf
Scholarhat
 
PRESS RELEASE - UNIVERSITY OF GHANA, JULY 16, 2024.pdf
PRESS RELEASE - UNIVERSITY OF GHANA, JULY 16, 2024.pdfPRESS RELEASE - UNIVERSITY OF GHANA, JULY 16, 2024.pdf
PRESS RELEASE - UNIVERSITY OF GHANA, JULY 16, 2024.pdf
nservice241
 
The Cruelty of Animal Testing in the Industry.pdf
The Cruelty of Animal Testing in the Industry.pdfThe Cruelty of Animal Testing in the Industry.pdf
The Cruelty of Animal Testing in the Industry.pdf
luzmilaglez334
 
Benchmarking Sustainability: Neurosciences and AI Tech Research in Macau - Ke...
Benchmarking Sustainability: Neurosciences and AI Tech Research in Macau - Ke...Benchmarking Sustainability: Neurosciences and AI Tech Research in Macau - Ke...
Benchmarking Sustainability: Neurosciences and AI Tech Research in Macau - Ke...
Alvaro Barbosa
 
Mail Server Configuration Using App passwords in Odoo 17
Mail Server Configuration Using App passwords in Odoo 17Mail Server Configuration Using App passwords in Odoo 17
Mail Server Configuration Using App passwords in Odoo 17
Celine George
 
How to Add a Filter in the Odoo 17 - Odoo 17 Slides
How to Add a Filter in the Odoo 17 - Odoo 17 SlidesHow to Add a Filter in the Odoo 17 - Odoo 17 Slides
How to Add a Filter in the Odoo 17 - Odoo 17 Slides
Celine George
 
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cátedra Banco Santander
 
Open Source and AI - ByWater Closing Keynote Presentation.pdf
Open Source and AI - ByWater Closing Keynote Presentation.pdfOpen Source and AI - ByWater Closing Keynote Presentation.pdf
Open Source and AI - ByWater Closing Keynote Presentation.pdf
Jessica Zairo
 
2 Post harvest Physiology of Horticulture produce.pptx
2 Post harvest Physiology of Horticulture  produce.pptx2 Post harvest Physiology of Horticulture  produce.pptx
2 Post harvest Physiology of Horticulture produce.pptx
UmeshTimilsina1
 
Parent PD Design for Professional Development .docx
Parent PD Design for Professional Development .docxParent PD Design for Professional Development .docx
Parent PD Design for Professional Development .docx
AntonioJarligoCompra
 

Recently uploaded (20)

How to Manage Early Receipt Printing in Odoo 17 POS
How to Manage Early Receipt Printing in Odoo 17 POSHow to Manage Early Receipt Printing in Odoo 17 POS
How to Manage Early Receipt Printing in Odoo 17 POS
 
Codeavour 5.0 International Impact Report - The Biggest International AI, Cod...
Codeavour 5.0 International Impact Report - The Biggest International AI, Cod...Codeavour 5.0 International Impact Report - The Biggest International AI, Cod...
Codeavour 5.0 International Impact Report - The Biggest International AI, Cod...
 
ASP.NET Core Interview Questions PDF By ScholarHat.pdf
ASP.NET Core Interview Questions PDF By ScholarHat.pdfASP.NET Core Interview Questions PDF By ScholarHat.pdf
ASP.NET Core Interview Questions PDF By ScholarHat.pdf
 
Node JS Interview Question PDF By ScholarHat
Node JS Interview Question PDF By ScholarHatNode JS Interview Question PDF By ScholarHat
Node JS Interview Question PDF By ScholarHat
 
How to Manage Shipping Connectors & Shipping Methods in Odoo 17
How to Manage Shipping Connectors & Shipping Methods in Odoo 17How to Manage Shipping Connectors & Shipping Methods in Odoo 17
How to Manage Shipping Connectors & Shipping Methods in Odoo 17
 
View Inheritance in Odoo 17 - Odoo 17 Slides
View Inheritance in Odoo 17 - Odoo 17  SlidesView Inheritance in Odoo 17 - Odoo 17  Slides
View Inheritance in Odoo 17 - Odoo 17 Slides
 
Imagination in Computer Science Research
Imagination in Computer Science ResearchImagination in Computer Science Research
Imagination in Computer Science Research
 
QCE – Unpacking the syllabus Implications for Senior School practices and ass...
QCE – Unpacking the syllabus Implications for Senior School practices and ass...QCE – Unpacking the syllabus Implications for Senior School practices and ass...
QCE – Unpacking the syllabus Implications for Senior School practices and ass...
 
Introduction to Google Productivity Tools for Office and Personal Use
Introduction to Google Productivity Tools for Office and Personal UseIntroduction to Google Productivity Tools for Office and Personal Use
Introduction to Google Productivity Tools for Office and Personal Use
 
10th Social Studies Enrichment Material (Abhyasa Deepika) EM.pdf
10th Social Studies Enrichment Material (Abhyasa Deepika) EM.pdf10th Social Studies Enrichment Material (Abhyasa Deepika) EM.pdf
10th Social Studies Enrichment Material (Abhyasa Deepika) EM.pdf
 
C# Interview Questions PDF By ScholarHat.pdf
C# Interview Questions PDF By ScholarHat.pdfC# Interview Questions PDF By ScholarHat.pdf
C# Interview Questions PDF By ScholarHat.pdf
 
PRESS RELEASE - UNIVERSITY OF GHANA, JULY 16, 2024.pdf
PRESS RELEASE - UNIVERSITY OF GHANA, JULY 16, 2024.pdfPRESS RELEASE - UNIVERSITY OF GHANA, JULY 16, 2024.pdf
PRESS RELEASE - UNIVERSITY OF GHANA, JULY 16, 2024.pdf
 
The Cruelty of Animal Testing in the Industry.pdf
The Cruelty of Animal Testing in the Industry.pdfThe Cruelty of Animal Testing in the Industry.pdf
The Cruelty of Animal Testing in the Industry.pdf
 
Benchmarking Sustainability: Neurosciences and AI Tech Research in Macau - Ke...
Benchmarking Sustainability: Neurosciences and AI Tech Research in Macau - Ke...Benchmarking Sustainability: Neurosciences and AI Tech Research in Macau - Ke...
Benchmarking Sustainability: Neurosciences and AI Tech Research in Macau - Ke...
 
Mail Server Configuration Using App passwords in Odoo 17
Mail Server Configuration Using App passwords in Odoo 17Mail Server Configuration Using App passwords in Odoo 17
Mail Server Configuration Using App passwords in Odoo 17
 
How to Add a Filter in the Odoo 17 - Odoo 17 Slides
How to Add a Filter in the Odoo 17 - Odoo 17 SlidesHow to Add a Filter in the Odoo 17 - Odoo 17 Slides
How to Add a Filter in the Odoo 17 - Odoo 17 Slides
 
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
Cómo crear video-tutoriales con ScreenPal (2 de julio de 2024)
 
Open Source and AI - ByWater Closing Keynote Presentation.pdf
Open Source and AI - ByWater Closing Keynote Presentation.pdfOpen Source and AI - ByWater Closing Keynote Presentation.pdf
Open Source and AI - ByWater Closing Keynote Presentation.pdf
 
2 Post harvest Physiology of Horticulture produce.pptx
2 Post harvest Physiology of Horticulture  produce.pptx2 Post harvest Physiology of Horticulture  produce.pptx
2 Post harvest Physiology of Horticulture produce.pptx
 
Parent PD Design for Professional Development .docx
Parent PD Design for Professional Development .docxParent PD Design for Professional Development .docx
Parent PD Design for Professional Development .docx
 

Css Ppt

  • 1. CSS CONTENTS INTRODUCTION CSS COMMENTS CSS COLORS CSS TEXT CSS ID AND CLASS POSITIONING OVERLAPPING ELEMENTS CSS ALIGN CROSS BROWSERS COMPATIBLE ISSUES
  • 2. INTRODUSTION * CSS stands for Cascading Style Sheets * Styles define how to display HTML elements * Styles were added to HTML 4.0 to solve a problem * External Style Sheets can save a lot of work * External Style Sheets are stored in CSS files
  • 3. CSS COMMENTS Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment begins with &quot;/*&quot;, and ends with &quot;*/&quot;, like this: /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }
  • 4. CSS Colors Colors are displayed combining RED, GREEN, and BLUE light. COLOR VALUES CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). Hex values are written as 3 double digit numbers, starting with a # sign.
  • 5. CSS TEXT Text Color The color property is used to set the color of the text. The color can be specified by: * name - a color name, like &quot;red&quot; * RGB - an RGB value, like &quot;rgb(255,0,0)&quot; * Hex - a hex value, like &quot;#ff0000&quot; The default color for a page is defined in the body selector. Example body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}
  • 6. Text Alignment The text-align property is used to set the horizontal alignment of a text. Text can be centered, or aligned to the left or right, or justified. When text-align is set to &quot;justify&quot;, each line is stretched so that every line has equal width, and the left and right margins are straight Example h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}
  • 7. Text Decoration The text-decoration property is used to set or remove decorations from text. The text-decoration property is mostly used to remove underlines from links for design purposes: Example a {text-decoration:none;}
  • 8. Text Transformation The text-transform property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word. Example p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}
  • 9. Text Indentation The text-indentation property is used to specify the indentation of the first line of a text. Example p {text-indent:50px;}
  • 10. CSS Example body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:&quot;Times New Roman&quot;; font-size:20px; }
  • 11. CSS ID AND CLASS The id Selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a &quot;#&quot;. The style rule below will be applied to the element with id=&quot;para1&quot;: Example #para1 { text-align:center; color:red; }
  • 12. The c lass Selector The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for any HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a &quot;.&quot; In the example below, all HTML elements with class=&quot;center&quot; will be center-aligned: Example .center {text-align:center;}
  • 13. POSITIONING The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method. There are four different positioning methods.
  • 14. Static Positioning HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.
  • 15. Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled: Example p.pos_fixed { position:fixed; top:30px; right:5px; }
  • 16. Relative Positioning A relative positioned element is positioned relative to its normal position. Example h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }
  • 17. Absolute Positioning An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>: Example h2 { position:absolute; left:100px; top:150px; }
  • 18. Overlapping Elements When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others). An element can have a positive or negative stack order: Example img { position:absolute; left:0px; top:0px; z-index:-1 }
  • 19. CSS Align Aligning Block Elements A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: * <h1> * <p> * <div>
  • 20. Center Aligning Block elements can be aligned by setting the left and right margins to &quot;auto&quot;. Note: Using margin:auto will not work in Internet Explorer, unless a !DOCTYPE is declared. Setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element: Example . center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; }
  • 21. Left and Right Aligning Using the position Property Example .right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }
  • 22. CROSSBROWSER COMPATIBILITY ISSUES When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers. There is also another problem with IE when using the position property. If a container element (in our case <div class=&quot;container&quot;>) has a specified width, and the !DOCTYPE declaration is missing, IE will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the position property:
  • 23. Example body{ margin:0; padding:0;} .container{ position:relative; width:100%; } .right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }