Downloaded 828 times
More Related Content
css.ppt
- 2. Disclaimer: This presentationis prepared by trainees of baabtra as a part of mentoring program. This is not official document of baabtra –Mentoring Partner Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd
- 3.
- 4. Cascading Style Sheet(CSS) A cascading style sheet(CSS) is a web page derived from multiple sources with a defined order of precedence where the definition of any style element conflict. CSS saves a lot of work CSS define how HTML elements are to be displayed
- 5. Syntax Of CSS ACSS rule set consist of a selector and a declaration block. Selector Declaration Declaration Property Value Property Value • The selector points to the HTML element you want to style • The Declaration block contains one or more declarations separated by semicolons. • Each declaration includes a property name and a value, separated by a colon. h1 {color: red; font-size:15px;}
- 6. Types Of CSS Thereare 3 types of CSS styles declaration are as follows: 1. Internal(Embedded) Styles 2. Inline Styles 3. External Styles Internal (Embedded)Styles Internal styles are placed inside the head section of a particular web page via the style tag. Internal styles are also called “Embedded” styles . Inline Styles Inline styles are placed directly inside an HTML element in the code. External Styles An external style sheet is a separate page which is then linked to the web page.
- 7. CSS Selectors CSS selectorsallow you to select and manipulate HTML elements. CSS selectors are used to “find”(or select) HTML elements based on their id,class,type,attribute,and more. The CSS selectors are follows: 1. Element Selector 2. ID Selector 3. Class Selector 4. Grouping Selector
- 8. • The ElementSelector The element selector selects elements based on the element name. Example P{ text-align: center; Color: red; } When we use above example, we get all<p> elements will be center-aligned with a red text color.
- 9. • The idSelector The id selector uses the id attribute of an HTML element to select a specific element. An id should be unique within a page, so the id selector is used if you want to select a single,unique element. To select an element with a specific id, write a hash(#)character, followed by the id of the element. The style rule below will be applied to the HTML element with id=“paragraph” Example #paragraph{ text-align: center; color: red; }
- 10. • Class Selector Theclass selector selects elements with a specific class attribute. To select elements with a specific class ,write a period(.)character , followed by the name of the class In the example below, all HTML elements with class=”center” will be center-aligned Example .center{ text-aligned: center; Color: red; }
- 11. • Grouping Selectors Youcan group the selectors , to minimize the code. To group selectors , separate each selector with comma. Example h1,h2,h3,p{ text-align: center; Color: red; } In the above example we have grouped some selectors.
- 12. Example Program OfCSS <html> <head> <style> #tb { Border-radius:25px; Width:200px; Padding:20px; } </style> </head> <body> <table border=1 id=“tb” cellpadding=“10px”> <tr> <th colspan=“3”><u>Student Details</u></th> </tr> <tr> <td>Name</td> <td>Address</td> <td>Phone Number</td> </tr> <tr> <td>Athira</td> <td>Keeripoyil(h)<br/>Mukkam</td> <td>9946757413</td> </tr> <tr><td>Aswathi</td. <td>Periyapurath(h)<br/.Kozhikode</td> <td>9656368644</td></tr> </body> </html>
- 13.
- 14.
- 15. Want to learnmore about programming or Looking to become a good programmer? Are you wasting time on searching so many contents online? Do you want to learn things quickly? Tired of spending huge amount of money to become a Software professional? Do an online course @ baabtra.com We put industry standards to practice. Our structured, activity based courses are so designed to make a quick, good software professional out of anybody who holds a passion for coding.
- 16. Follow us @twitter.com/baabtra Like us @ facebook.com/baabtra Subscribe to us @ youtube.com/baabtra Become a follower @ slideshare.net/BaabtraMentoringPartner Connect to us @ in.linkedin.com/in/baabtra Give a feedback @ massbaab.com/baabtra Thanks in advance www.baabtra.com | www.massbaab.com |www.baabte.com