Web topic 14 cascading style sheets

378 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Web topic 14 cascading style sheets

  1. 1. Web Authoring Topic 14 –Cascading Style Sheets
  2. 2. ObjectivesStudents should able to:1 Explain Cascading Style Sheets.2 Identify the basic syntax and use Cascading Style Sheets. ATTRIBUTE NAME and VALUE pair(s) <STYLE> Tag <LINK> Tag <LINK REL >3 Use Cascading Style Sheets to create two or more HTML pages
  3. 3. Cascading Style SheetGives complete control over the layout ofthe Web page and the appearance of itscontent.You only need to specify presentationalpreferences once, and the style can beapplied to an entire site.
  4. 4. Advantages of CSSThe presentation of an entire website can beupdated at a moment’s notice - standardisingthe look and feel of a website.Users of a website can compose style sheetsof their own.Browsers are beginning to support multiplestyle sheets.
  5. 5. Advantages of CSSStyle sheets allow content to be optimized formore than one type of device.Style sheets download much more quicklybecause web documents using CSS take upless hard disk space and consume lessbandwidth.
  6. 6. CSS RulesA style sheet can be broken down intoprogressively smaller bits. From large tosmall, it goes like this: • Style sheet • Rule • Selector • Declaration • Property • Value
  7. 7. CSS RulesRule:-begins with a selector, followed by aleft curly brace, “{“ and ends with a rightcurly brace “}”. body { margin: 0; padding: 0; background: #000 url(‘images/backgrounds/earth.jpg) no- repeat fixed; font: 12 px sans-serif; }
  8. 8. CSS RulesSelectors:- is the HTML element or elements towhich a CSS rule is applied (what to format). body { margin: 0; padding: 0; background: #000 url(‘images/backgrounds/earth.jpg) no- repeat fixed; font: 12 px sans-serif; }
  9. 9. CSS RulesDeclarations:- is the combination of a CSSproperty and value. body { margin: 0; padding: 0; background: #000 url(‘images/backgrounds/earth.jpg) no- repeat fixed; font: 12 px sans-serif; }
  10. 10. CSS RulesDeclarations:- is the combination of a CSSproperty and value.The property appears before the colon,and the colon is used to separate theproperty from the value.
  11. 11. CSS RulesValues:- keyword value is used to invoke apredefined function. body { margin: 0; padding: 0; background: #000 url(‘images/backgrounds/earth.jpg) no- repeat fixed; font: 12 px sans-serif; }
  12. 12. CSS RulesValues:- keyword value is used to invoke apredefined function. Cont’d a{ text-decoration: none; color: lightblue; }
  13. 13. CSS RulesValues:- keyword value is used to invoke apredefined function. Cont’d The keywords are no-repeat, fixed and light blue. No-repeat and fixed provide the browser with instructions for how to render the background image. Light blue is a keyword that tells the browser what color the text of hyperlinks should be.
  14. 14. Basic Syntax of CSSA CSS rule consists of two main parts:selecter (H1) and declaration (color:blue).
  15. 15. Cascading Style SheetTwo ways to specify cascading style rules.1. Within the HTML document – use <STYLE> tag2. Via an external style sheet document - use <LINK> tag
  16. 16. Using <style> TagThe <STYLE> tag is always inside theheader of the document, i.e. between the<HEAD> Start and End Tags.<HEAD> <TITLE>Bachs home page</TITLE> <STYLE type="text/css"> H1 { color: blue } </STYLE></HEAD>
  17. 17. Using <link> TagThe <LINK> tag is used to access anExternal Style Sheet that is contained inanother document. The Attributes RELand TYPE are required.<LINK> tag should be placed in theHEAD section of the document. <STYLE>tag is not required in external style sheet.
  18. 18. Using <link> Tag<HTML><HEAD> <TITLE>Bachs home page</TITLE> <LINK rel="stylesheet" href="styles.css" type="text/css"></HEAD><BODY> <H1>Bachs home page</H1> <P>Johann Sebastian Bach was a prolificcomposer.</BODY></HTML> In styles.css document H1 { color: blue }
  19. 19. Using <link> Tag <LINK rel="stylesheet" href="styles.css" type="text/css">Specifies the relationship between thecurrent document and the linkeddocumentReferenced to the external file calledstyles.css
  20. 20. CSS FileAn example of a CSS file – mystyle.cssbody{ background:brown}h1{ color:blue; font-size:x-large}

×