1 / 18

CSS

CSS SLIDE

sunrays
Download Presentation

CSS

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. CSS SUNRAYS Technologies PUNE | INDORE | VADODARA | RAIPUR Email : hrd@sunrays.co.in URL : www.sunrays.co.in, www.sunraystechnologies.com

  2. Our Books – www.sunilbooks.com www.sunrays.co.in

  3. Cascading Style Sheets • CSS stands for Cascading Style Sheets. • CSS defines the look and feel of HTML elements. • Styles were added to HTML 4.0 to solve a problem. • External Style Sheets are stored in CSS files. • It is a way to define themes of your HTML Web Site. www.sunrays.co.in

  4. Declaration of CSS • Each declaration of CSS consist of Property & Value pair • Properties are separated from their values by colons ( : ) • Pairs are separated from each other by semicolon ( ; ) color : red; font-size : 20px; www.sunrays.co.in

  5. Simple Example <html> <head> <style> p{ color : red; font-size : 20px; } </style> </head> <body> <p>This is a paragraph</p> </body> </html> Output : This is a paragraph www.sunrays.co.in

  6. Selector • Selectors are used to apply style to a particular markup. • Selectors are normally the HTML element. • Selector never starts with a number. • Selector never contains space. • Three types of Selector • Tag Selector • ID Selector • Class Selector www.sunrays.co.in

  7. Tag Selectors • Tag Selector • p – paragraph • h – heading • a – hyperlink • ID Selector • #param • #wrapper • Class Selector • .menu • .title • .subtitle www.sunrays.co.in

  8. Tag Selector • Tag selector is used to redefine existing HTML tags. • Selector is used when you want to change the formatting of existing tags. • Such as : • <h1> (heading 1) tag • <ul> (unordered list) tag. • <p>(paragraph) tag. • <a>(hyperlink) tag. www.sunrays.co.in

  9. ID Selector • ID selector is used to specify a single, unique element. • ID selector uses the id attribute of the HTML element . • ID selector defines with “#”. • Do not start an ID name with a number. <style> #param{ test-align : center; font-size : 20px; } </style> <div id=“param”>……………</div> www.sunrays.co.in

  10. Class Selector • Class selector is used to specify a style for group of elements. • Set a particular style for many HTML elements with the same class. • Class selector defines with ”.” <style> .title{ color : red ; font-size : 30px; } </style> <p class=“title”>……………</p> www.sunrays.co.in

  11. Style Sheets • There are three ways to insert a style sheet • Inline Style • Internal Style Sheet • External Style Sheet www.sunrays.co.in

  12. Inline Style • CSS is applied in every HTML tag by Inline style • For using Inline style, style attribute is used in relevant tag. • Style attribute can contain any CSS property. • For example: <p style="background: blue; color: white;">A new background and font color with inline CSS</p> www.sunrays.co.in

  13. Internal Style Sheet • Internal is the basic & easy way to insert style in HTML • In Internal style, <style>…………</style> tag is added in the <head>…………</head> tag of HTML document. • Internal Style Sheet should be used when a single document has a unique style. www.sunrays.co.in

  14. Internal Style sheet <html> <head> <style type="text/css"> p { color: red; } body { background-color: yellow; } </style> </head> <body> <p>Paragraph showing Internal style sheet</p> </body> </html> www.sunrays.co.in

  15. External Style Sheet • External CSS is a file that contains only CSS code and is saved with a ".css" file extension. • This CSS file is then referenced in HTML using the <link>  tag instead of <style> tag. • External style sheet is applied to many pages. • External style sheet can change the entire look of website by changing only one file. • External style sheet keeps the design & content separate. • We can reuse the CSS code. www.sunrays.co.in

  16. External Style Sheet <html> <head> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <h3> A White Header </h3> <p> This paragraph has a blue font. The background color of this page is gray because we changed it with CSS! </p> </body> </html> www.sunrays.co.in

  17. Example Source Code https://github.com/sunilbooks/SelfLearnJava www.sunrays.co.in

  18. Thank You If you have any questions feel free to contact us : Email : hrd@sunrays.co.in URL : www.sunrays.co.in Next topic “JDBC” www.sunrays.co.in

More Related