Cascade.ss

328 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
328
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Cascade.ss

  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 Email:ashwinanand99@gmail.com Facebook id:ashwinanand99@gmail.com
  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 facebook.com/baabtra and like it. Thanks in advance.• www.baabtra.com | www.massbaab.com |ww w.baabte.com
  21. 21. Thank you
  22. 22. Contact Us

×