Css
•Als PPTX, PDF herunterladen•
1 gefällt mir•608 views
Css
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Css
Ähnlich wie Css (20)
Mehr von baabtra.com - No. 1 supplier of quality freshers
Mehr von baabtra.com - No. 1 supplier of quality freshers (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Css
- 2. Disclaimer: This presentation is 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
- 4. Jobs Applied Week Company Designation Applied Date Current Status 1 Advent software Sr. Application Engineer 26-8-2013 Short listed 2 Alcatel-lucent Software Engineer 28-8-2013 Waiting 3
- 5. Cascading Style Sheets [CSS] Muhammed Noufal V T muhammednoufalvt@gmail.c om www.facebook.com/vtnoufa lvt twitter.com/noufalurnappy in.linkedin.com/pub/muham med-noufal 9744003056
- 6. What is CSS • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Three ways to Insert CSS 1. External style sheet 2. Embedded styles 3. Inline styles • External Style Sheets can save a lot of work • External Style Sheets are stored in CSS files
- 7. Advantages of Style Sheets • • • • • • Saves time Easy to change Keep consistency Give you more control over layout Use styles with JavaScript Make it easy to create a common format for all the Web pages
- 8. One CSS – Multiple Documents
- 9. CSS Syntax • A CSS rule has two main parts: a selector, and one or more declarations: • The selector is normally the HTML element you want to style. • Each declaration consists of a property and a value. • The property is the style attribute you want to change. Each property has a value. • Example
- 10. CSS Id and Class • 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 "#". • Example:- <p id="para1"> #para1 { text-align:center; color:red; } • 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 many HTML elements with the same class. • The class selector uses the HTML class attribute, and is defined with a "."
- 11. Three ways to Insert CSS • Inline Styles o Add styles to each tag within the HTML file – Example <h1 style=“color:red; font-family: sanssarif”>HAI</h1> • Internal Style Sheet o A style is applied to the entire HTML file – Example <head> <style> hr {color:sienna;} p {margin-left:20px;} body {backgroundimage:url("images/back40.gif");} </style> </head>
- 12. Three ways to Insert CSS • External Style Sheet o An external style sheet is a text file containing the style definition (declaration) o An external style sheet is ideal when the style is applied to many pages o Example – h1, h2, h3, h4, h5, h6 {color:red; fontfamily:sans-serif} – Save this in a new document using a .css extension
- 13. Linking to Style Sheets • Open an HTML file • Between <head> and </head> add – <link href=URL rel=“relation_type” type=“link_type”> • URL is the file.css • Relation_type=“stylesheet” • Link_type=“text/css” • Save this file and the .css file in the same web server directory
- 14. Example- External CSS • Html File • <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css" > </head> </html> • mystyle.css File • hr {color:sienna;} p {marginleft:20px;} body {backgroundimage:url("images/ back40.gif");}
- 15. Contact Us Emarald Mall (Big Bazar Building) Mavoor Road, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550 Start up Village Eranakulam, Kerala, India. Email: info@baabtra.com NC Complex, Near Bus Stand Mukkam, Kozhikode, Kerala, India. Ph: + 91 – 495 40 25 550