1 / 16

Cascading Style Sheets - Department of Computer Engineering

A presentation on Cascading Style Sheets also known as CSS, and is presented by Prof. Kimi B. Ramteke, from the department of Computer Engineeringat International Institute of Information Technology, Iu00b2IT. CSS stands for Cascading Style Sheets depict how HTML elements are to be displayed on screen on different media devices. The presentation explains Why to Use CSS, CSS Syntax, How to apply CSS to HTML and more.

I2ITengineeringcollege
Download Presentation

Cascading Style Sheets - Department of Computer Engineering

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WEB TECHNOLOGY CASCADING STYLE SHEET PREPARED BY: PROF. KIMI B. RAMTEKE HOPE FOUNDATION’S INTERNATIONAL INSTITUTE OF IFORMATION TECHNOLOGY, (I²IT) www.isquareit.edu.in +91 20 22933441 / 2

  2. Web TechnologyUNIT 1 Hope Foundation’s International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057 Tel - +91 20 22933441 / 2 / 3 | Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in

  3. Contents • Introduction to CSS • Use of CSS • Syntax of CSS • Types of CSS • External CSS • Internal CSS • Inline CSS • Exercise Hope Foundation’s International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057 Tel - +91 20 22933441 / 2 / 3 | Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in

  4. CSS Introduction • CSS stands for Cascading Style Sheets • CSS depicts about how HTML elements are to be displayed on screen, different media devices • CSS saves a lot of time for styling many pages of a big website just at once with single control file(.css). Hope Foundation’s International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057 Tel - +91 20 22933441 / 2 / 3 | Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in

  5. Why to Use CSS? • CSS is helps you to give design, layout for your web pages and variations in display for various devices and sizes of the screen.  Hope Foundation’s International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057 Tel - +91 20 22933441 / 2 / 3 | Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in

  6. CSS Syntax Hope Foundation’s International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057 Tel - +91 20 22933441 / 2 / 3 | Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in

  7. CSS Syntax Description • The selector helps to style the HTML element you want. • The declaration block can contains one or many declarations which need to be separated by semicolons. • Each declaration has two parts: • 1. property name • 2. a value and both are separated by a colon(:). Hope Foundation’s International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057 Tel - +91 20 22933441 / 2 / 3 | Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in

  8. How to apply CSS to HTML 3 Ways: • External style sheet • External style sheet helps to change style of multiple pages of a website at once by making changes in just one file. • Internal style sheet • An internal style sheet is helpful if one single page has to give a different style. • Inline style • An inline style is helpful if element need to be styled differently. Website Level style Page Level Style Element level Style Hope Foundation’s International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057 Tel - +91 20 22933441 / 2 / 3 | Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in

  9. External style sheet Separate HTML file Separate CSS File HTML file <!DOCTYPE html> <html> <head> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> CSS File <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> Hope Foundation’s International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057 Tel - +91 20 22933441 / 2 / 3 | Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in

  10. Externalstyle sheet Test.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type=“text/css” href=“Demo.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Demo.css <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> Linking CSS with HTML Hope Foundation’s International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057 Tel - +91 20 22933441 / 2 / 3 | Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in

  11. Internal style sheet <html> <head> ......This is example of Internal CSS, style is written inside head element only......... <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> CSS embedded in HTML Hope Foundation’s International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057 Tel - +91 20 22933441 / 2 / 3 | Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in

  12. Inline style <!DOCTYPE html> <html> <body> <h1 style="color:Red;">This is a Blue Heading</h1> </body>ss </html> Inline CSS Hope Foundation’s International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057 Tel - +91 20 22933441 / 2 / 3 | Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in

  13. Exercise • Set "background-color: linen" for the page, using an internal style sheet. • Set "background-color: blue" for the page, using an inline style sheet. • Set <p> with "background-color: green" and <h1> with “color : green” using external style sheet. Hope Foundation’s International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057 Tel - +91 20 22933441 / 2 / 3 | Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in

  14. Guess the Output? <!DOCTYPE html> <html> <head> <style> h1 { color: orange; } </style> <link rel="stylesheet" type="text/css" href=“Demo.css"> </head> <body> <h1>This is a heading</h1> <p>The style of this document is a combination of an external style sheet, and internal style</p> </body> </html> Hope Foundation’s International Institute of Information Technology, I²IT, P-14 Rajiv Gandhi Infotech Park, Hinjawadi, Pune - 411 057 Tel - +91 20 22933441 / 2 / 3 | Website - www.isquareit.edu.in ; Email - info@isquareit.edu.in

  15. References • Ivan Bayross, “Web enabled commercial applications developments using HTML,JavaScript, DHTML,PHP” BPB. • https://www.w3schools.com/css/

  16. THANK YOU For further information please contact Prof. KimiRamteke Department of Computer Engineering Hope Foundation’s International Institute of Information Technology, I²IT Hinjawadi, Pune – 411 057 Phone - +91 20 22933441 www.isquareit.edu.in | kimir@isquareit.edu.in

More Related