Published on


Published in: Education, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. 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
  2. 2. Typing Speed Week Target Achieved 1 40 21 2 40 23 3 40 27
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. One CSS – Multiple Documents
  8. 8. 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
  9. 9. 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 "."
  10. 10. 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>
  11. 11. 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
  12. 12. 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
  13. 13. 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");}
  14. 14. 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