Published on

  • Be the first to comment

  • Be the first to like this

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 ofbaabtra as a part of mentoring program. This is not officialdocument of baabtra –Mentoring PartnerBaabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt .Ltd
  2. 2. Cascading Style Sheets (CSS) Ashwin Anand V Facebook
  3. 3. The Breakdown• All web pages can be broken down into bucketized content areas• These areas can updated by changing the code on every page, - or -• By using cascading style sheets!
  4. 4. Cascading Style Sheets• Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document• Created by: CSS was created by Håkon Wium Lie and Bert Bos and was adopted as a W3C Recommendation in late 1996.
  5. 5. What Are Cascading Style Sheets?• A standards-based method for controlling the look and feel of XML content.• Comprised of Rules to control elements in the document.• Designed to separate formatting from the content while being flexible and scalable
  6. 6. What Can CSS Do?• Text formatting• Element sizing• Element positioning• Change link attributes• Cursor manipulation
  7. 7. • Most importantly, CSS can support the control of hundreds or thousands of documents from a single control file• This makes your life much easier when it is time to make updates
  8. 8. Types of CSS
  9. 9. • Three CSS implementations – Inline • Affects only the element applied to – Embedded • Affects only the elements in a single file – External • Linked to an unlimited number of files
  10. 10. HTML Page Structure Document (HTML)<HTML> Head <HEAD> Title Text <TITLE>Title Text</TITLE> </HEAD> Body <BODY> H1 Heading <H1>H1 Heading</H1> Paragraph 1 <P>Paragraph 1</P> <P>Paragraph 2</P> Paragraph 2</BODY></HTML>
  11. 11. Inline CSSUse the STYLE attribute<p>This is normal text</p><p><b>This is bold text</b></p><p style=“font-weight: bold”>This is bold text</p>
  12. 12. Embedded CSS• Added to the <HEAD> area of file• Use <STYLE> element<HEAD> <TITLE>New Topic1</TITLE> <STYLE>P{font-weight:bold}</STYLE></HEAD>
  13. 13. External CSS • The <LINK> element is used to attach a CSS document to an HTML document<HEAD><TITLE>New Topic1</TITLE><LINK HREF="example.css" REL="StyleSheet" ></HEAD>
  14. 14. What is Cascading?
  15. 15. The three CSS types combine at run time to render the page.Order of precedence• Inline styles• Embedded style sheets• Linked (external) style sheets
  16. 16. Style RulesInline style=“font-weight: bold” Property ValueEmbedded/ H1 {font-weight: bold}External Selector Declaration H1 {font-weight: bold; color:black; }
  17. 17. Creating a Cascading Style Sheetbody {color: #000000; <html > background: #F1F2EC; <head> font-size: 8pt; <link href="test.css" rel="stylesheet" /> </head> font-family: Verdana, <body> Arial,Helvetica, Sans Serif;} <h1>Heading 1 Text</h1>h1 {color: #0D10E5; <p>A normal paragraph</p> <h2>Heading 2 Text</h2> font-size: 12pt;} <p>Another normal paragraph</p>h2 {color: #040677; <p>This paragraph will be a tip.</p> </body> font-size: 10pt;} </html>p {margin-bottom: 16px;}
  18. 18. CLASS attribute• Class Syntax: – In a style sheet: P.myclass { color:blue;} – In a page: <P CLASS=“myclass”>Text</P>
  19. 19. Creating a Cascading Style Sheetbody {color: #000000; background: #F1F2EC; font-size: 8pt; <html > font-family: Verdana, Arial, Helvetica, Sans Serif;} <head>h1 {color: #002000; <link href="test.css" rel="stylesheet" /> font-size: 12pt;} </head>h2 {color: #002b00; <body> font-size: 10pt;} <h1>Heading 1 Text</h1> <p>A normal paragraph</p>p {margin-bottom: 16px;} <h2>Heading 2 Text</h2>p.tip {color: #BEF5BF; <p>Another normal paragraph</p> font-weight: bold; <p class=“tip”>This paragraph will be a tip.</p> background-color: #696969; padding-left: 0.8em; </body> padding-right: 0.8em; </html> padding-bottom: 0.3em; padding-top: 0.3em; border-bottom-color: #000000; border-bottom-style: Solid; border-bottom-width: 1px; border-top-color: #000000; border-top-style: Solid; border-top-width: 1px;}
  20. 20. • If this presentation helped you, please visit our page and like it. Thanks in advance.• | |ww
  21. 21. Thank you
  22. 22. Contact Us