SlideShare una empresa de Scribd logo
1 de 12
INTRODUCTION
CSS are the powerful way to affect the presentation
 of a document or collection of a document.

 Mozilla and related browsers use CSS to affect the
  presentation of the browser Chrome itself.
Applying CSS

Uses
 We need to change the style of document.

 Easy to use.

 Time saving
Applying CSS example
 <html>
 <head>
 <title> Untitled Document </title>
 </head>
 <body>                               HTML
 <p> This is a paragraph </p>
 </body>
 </html>

 <style type = "text/CSS">
 p
 {
           color : black;
           font : Arial;
                                      CSS
 }
 </style>
Selectors
 A selector is most often an HTML element

       H1
            {
                color : Red;
                background : Yellow;
            }


            H1                   Selector
            color                Property
            Red                  Value
Grouping Selectors
           H2, p
              {
                   color : Gray;
                   background : Yellow;
              }

              H2, p                 Selector
              color                 Property
              Red                   Value
 Here we defined a rule where the style on the right
  (color : Gray;) applies to elements referenced by
  both selectors.
Universal selectors
 CSS2 introduced a new simple selectors called
  universal selector
   *{color: red;}


 Class selectors
   <p.class="warning"> This is a sample slide</p>
   <p> Hello world, <span class="warning"> good morning</p>
   *.warning {font-weight: bold;}
Pseudo – Class selectors
 Pseudo – Class selectors are most supported by
  browsers.

             a. visited {color: red;}
             a. link {color: blue;}
             a. hover {color: purple;}
             a. active {color: yellow;}
Advantages
 Save a lot of time

 Easy to use

 Page load faster

 Easy maintains
Disadvantages

 Browser compatibility.

 An extra download is required to import style
  information for each document.
Conclusion

 CSS is the most powerful way to make the
  website more attractive. CSS is easy to use
  and learn.
CSS

Más contenido relacionado

Similar a CSS

css-presentation.ppt
css-presentation.pptcss-presentation.ppt
css-presentation.ppt
prathur68
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
Larry King
 
Web topic 15 2 basic css layout
Web topic 15 2  basic css layoutWeb topic 15 2  basic css layout
Web topic 15 2 basic css layout
CK Yang
 

Similar a CSS (20)

CSS CASCADE
CSS CASCADECSS CASCADE
CSS CASCADE
 
3. CSS
3. CSS3. CSS
3. CSS
 
css-presentation.ppt
css-presentation.pptcss-presentation.ppt
css-presentation.ppt
 
Day5
Day5Day5
Day5
 
Css
CssCss
Css
 
Make Css easy : easy tips for css
Make Css easy : easy tips for cssMake Css easy : easy tips for css
Make Css easy : easy tips for css
 
Lec 1
Lec 1Lec 1
Lec 1
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
Unit 2.1
Unit 2.1Unit 2.1
Unit 2.1
 
Unit 2.1
Unit 2.1Unit 2.1
Unit 2.1
 
Csstutorial
CsstutorialCsstutorial
Csstutorial
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Css - Tutorial
Css - TutorialCss - Tutorial
Css - Tutorial
 
Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8Advanced Web Programming Chapter 8
Advanced Web Programming Chapter 8
 
CSS-STUDY MATERIAL.pdf
CSS-STUDY MATERIAL.pdfCSS-STUDY MATERIAL.pdf
CSS-STUDY MATERIAL.pdf
 
Web topic 15 2 basic css layout
Web topic 15 2  basic css layoutWeb topic 15 2  basic css layout
Web topic 15 2 basic css layout
 
WEB PROGRAMMING
WEB PROGRAMMINGWEB PROGRAMMING
WEB PROGRAMMING
 
Cascading Style Sheets - CSS - Tutorial
Cascading Style Sheets - CSS  -  TutorialCascading Style Sheets - CSS  -  Tutorial
Cascading Style Sheets - CSS - Tutorial
 
CSS.pptx
CSS.pptxCSS.pptx
CSS.pptx
 
html
htmlhtml
html
 

Más de Nitheesh Adithyan

Más de Nitheesh Adithyan (7)

HTML
HTMLHTML
HTML
 
Google fiber
Google fiberGoogle fiber
Google fiber
 
Google fiber front page
Google fiber   front pageGoogle fiber   front page
Google fiber front page
 
Google fiber
Google fiberGoogle fiber
Google fiber
 
Ethical hacking front page
Ethical hacking   front pageEthical hacking   front page
Ethical hacking front page
 
Ethical hacking
Ethical hackingEthical hacking
Ethical hacking
 
Ethical Hacking
Ethical HackingEthical Hacking
Ethical Hacking
 

Último

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 

Último (20)

Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 

CSS

  • 1.
  • 2. INTRODUCTION CSS are the powerful way to affect the presentation of a document or collection of a document.  Mozilla and related browsers use CSS to affect the presentation of the browser Chrome itself.
  • 3. Applying CSS Uses  We need to change the style of document.  Easy to use.  Time saving
  • 4. Applying CSS example <html> <head> <title> Untitled Document </title> </head> <body> HTML <p> This is a paragraph </p> </body> </html> <style type = "text/CSS"> p { color : black; font : Arial; CSS } </style>
  • 5. Selectors  A selector is most often an HTML element H1 { color : Red; background : Yellow; } H1 Selector color Property Red Value
  • 6. Grouping Selectors H2, p { color : Gray; background : Yellow; } H2, p Selector color Property Red Value  Here we defined a rule where the style on the right (color : Gray;) applies to elements referenced by both selectors.
  • 7. Universal selectors  CSS2 introduced a new simple selectors called universal selector *{color: red;}  Class selectors <p.class="warning"> This is a sample slide</p> <p> Hello world, <span class="warning"> good morning</p> *.warning {font-weight: bold;}
  • 8. Pseudo – Class selectors  Pseudo – Class selectors are most supported by browsers. a. visited {color: red;} a. link {color: blue;} a. hover {color: purple;} a. active {color: yellow;}
  • 9. Advantages  Save a lot of time  Easy to use  Page load faster  Easy maintains
  • 10. Disadvantages  Browser compatibility.  An extra download is required to import style information for each document.
  • 11. Conclusion  CSS is the most powerful way to make the website more attractive. CSS is easy to use and learn.