Week3 css


Published on

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

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

No notes for slide

Week3 css

  1. 1. Week 3 css
  2. 2. CSS - what? <ul><li>Cascade Style Sheets </li></ul><ul><li>Defines how to display HTML elements (fonts, size, colors, background images, border, styles) </li></ul><ul><li>Add to HTML 4.0 </li></ul><ul><li>Stored in CSS files </li></ul><ul><li>All browsers support CSS </li></ul><ul><li>Defined by the World Wide Web consortium (W3C) </li></ul>CSS Website Example http:// www.csszengarden.com /
  3. 3. CSS - why??? <ul><li>Advantages </li></ul><ul><ul><li>Saves time editing (define once on the element, next time the elements will automatically defined) </li></ul></ul><ul><ul><li>Page load faster </li></ul></ul><ul><ul><li>Easy maintenance </li></ul></ul><ul><ul><li>Superior styles to HTML (much wider array of attributes) </li></ul></ul><ul><li>Disadvantage </li></ul><ul><ul><li>Browser compatibility </li></ul></ul>
  4. 4. syntax <ul><li>A CSS rule has two main parts: a selector, and one or more declarations </li></ul><ul><li>The selector is the HTML element you want to style. </li></ul><ul><ul><li>Each declaration consists of a property and a value. </li></ul></ul><ul><ul><li>The property is the style attribute you want to change. Each property has a value. </li></ul></ul>
  5. 5. how to ?? <ul><li>Text editors </li></ul><ul><ul><li>Notepad/WordPad for Windows; TextEdit for Mac </li></ul></ul><ul><ul><li>Dreamweaver has a function embedded into the program. </li></ul></ul><ul><li>Comments </li></ul><ul><ul><li>/* This is for CSS. */ </li></ul></ul><ul><li>Grouping </li></ul><ul><ul><li>h1, h2, h3 {color: blue;} </li></ul></ul><ul><li>Applying multiple properties </li></ul><ul><ul><li>h1 {color: blue; </li></ul></ul><ul><ul><ul><li>font-size: 150%; </li></ul></ul></ul><ul><ul><ul><li>font-family: arial, Helvetica, “sans serif”; </li></ul></ul></ul><ul><ul><li>} </li></ul></ul>
  6. 6. inline and internal styles <html> <head> <title>Project One</title> </head> < body > <p > This is a red page. </p> </body> </html> <style type=&quot;text/css&quot;> body {background-color: #ff0000;} p {color: blue; margin-left:20px;} </style> style=&quot;background-color: #ff0000;&quot; style=&quot;color:blue;margin-left:20px ;&quot;
  7. 7. external style (1) <ul><li>Create a text file and save as .css </li></ul><ul><li>Create a link in HTML document </li></ul><ul><li>The css style sheet contains only styles </li></ul>
  8. 8. external style – where to put it?
  9. 9. <ul><ul><li>p{margin-left:20px;} </li></ul></ul><ul><ul><li>body{background-color:#ff0000;} </li></ul></ul>external style – how to write it? mystyle.css project.html <ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title>Project One</title> </li></ul></ul><ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=“mystyle.css&quot; /> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li>... </li></ul></ul>
  10. 10. cascade order <ul><li>Styles can be specified: </li></ul><ul><ul><li>Inside an HTML element (in-line) </li></ul></ul><ul><ul><li>Inside the head section of an HTML page (internal) </li></ul></ul><ul><ul><li>In an external CSS style sheet (external) </li></ul></ul><ul><li>All the styles will cascade into a new style sheet by the following rules, where number 1 has the highest priority: </li></ul><ul><ul><li>inline style </li></ul></ul><ul><ul><li>internal style </li></ul></ul><ul><ul><li>external style </li></ul></ul><ul><ul><li>browser default </li></ul></ul>
  11. 11. CSS code reference <ul><li>Text Color </li></ul><ul><ul><li>body {color:blue} h1 {color:#00ff00} h2 {color:rgb(255,0,0)} </li></ul></ul><ul><li>Text Alignment </li></ul><ul><ul><ul><li>h1 {text-align:center} </li></ul></ul></ul><ul><ul><ul><li>p.date {text-align:right} </li></ul></ul></ul><ul><ul><ul><li>p.main {text-align:justify} </li></ul></ul></ul><ul><li>Text Decoration </li></ul><ul><ul><ul><li>h1 {text-decoration:overline} </li></ul></ul></ul><ul><ul><ul><li>h2 {text-decoration:line-through} </li></ul></ul></ul><ul><ul><ul><li>h3 {text-decoration:underline} </li></ul></ul></ul><ul><ul><ul><li>h4 {text-decoration:blink} </li></ul></ul></ul>
  12. 12. CSS code reference <ul><li>font </li></ul><ul><li>p { font-style: italic; </li></ul><ul><li>font-weight: bold; </li></ul><ul><li>font-size: 30px; </li></ul><ul><li>font-family: arial, sans-serif;} </li></ul><ul><li>Using the short hand property, the code can be simplified: </li></ul><ul><ul><li>p { font: italic bold 30px arial, sans-serif; } </li></ul></ul>
  13. 13. CSS code reference <ul><li>link </li></ul><ul><ul><li>a:link {color: blue;} (unvisited link) </li></ul></ul><ul><ul><li>a:visited {color: red;} </li></ul></ul><ul><ul><li>a:active {background-color: #ffff00;} (active link) </li></ul></ul><ul><ul><li>a:hover {color: orange; </li></ul></ul><ul><ul><li>font-style: italic; </li></ul></ul><ul><ul><li>letter-spacing: 10px; </li></ul></ul><ul><ul><li>font-weight:bold; </li></ul></ul><ul><ul><li>text-transform: uppercase; </li></ul></ul><ul><ul><li>background-color:yellow;} </li></ul></ul>
  14. 14. 4 selector types <ul><li>Tag: </li></ul><ul><ul><li>re-define an existing HTML element </li></ul></ul><ul><li>ID: </li></ul><ul><li>applies to only one HTML element </li></ul><ul><li>Class: </li></ul><ul><li>applies to any HTML element </li></ul><ul><li>Compound: </li></ul><ul><li>used to combine two or more style rules to create a style definition that displays only when one style is contained within another. </li></ul><ul><li>Read: CSS selectors: tags, ID, class and compound </li></ul>
  15. 15. tag
  16. 16. ID #id <ul><li>used to specify a style for a single, unique element. </li></ul><ul><li>The id selector uses the id attribute of the HTML element, and is defined with a &quot;#&quot;. </li></ul><html> <head> <style type=&quot;text/css&quot;> #para1 {text-align:center; color:red;} </style> </head> <body> <p id=&quot;para1&quot; >Hello World!</p> <p>This paragraph is not affected.</p> </body> </html> Hello World! This paragraph is not affected. P P P P
  17. 17. CLASS .classname <ul><li>used to specify a style for different elements. </li></ul><ul><li>allows you to set a particular style for any html elements with the same class. </li></ul><ul><li>uses the html class attribute, and is defined with a &quot;.&quot; </li></ul>P h1 h4 h2
  18. 18. CLASS (example) <html> <head> <style type=&quot;text/css&quot;> .center{text-align:center;} </style> </head> <body> <h1 class=&quot;center&quot; >center-aligned heading</h1> <p class=&quot;center&quot; >center-aligned paragraph.</p> /body> </html> center-aligned heading center-aligned paragraph.
  19. 19. recap <ul><li>3 places </li></ul><ul><li>inline </li></ul><ul><li>internal style (between <head></head>) </li></ul><ul><li>external style (save as .css, html links in the head section) </li></ul><ul><li>Selectors </li></ul><ul><li>tag style (applies globally to an individual HTML tag) </li></ul><ul><li>Id style (format a unique item on a page) </li></ul><ul><li>class style (format more than 1 item at the same time) </li></ul><ul><li>compound style </li></ul>
  20. 20. Set up the working space <ul><li>Click Window tab > click CSS style to open CSS panel </li></ul><ul><li>On Properties panel, choose CSS tab </li></ul>
  21. 21. create a new CSS style <ul><li>CSS style panel </li></ul><ul><ul><li>highlight the text or image or table </li></ul></ul><ul><ul><li>+ add new CSS rule >selector (class, id, tag, or compound) </li></ul></ul><ul><ul><li>name internal or external or defined .css file </li></ul></ul><ul><ul><li>define elements </li></ul></ul><ul><li>Properties Panel </li></ul><ul><ul><li>click CSS mode </li></ul></ul><ul><ul><li>highlight the text or image </li></ul></ul><ul><ul><li>targeted rule: new CSS rule>edit rule> </li></ul></ul><ul><ul><li>open a window > choose the appropriate selector - class, id, tag, or compound > name it </li></ul></ul><ul><ul><li>define the elements </li></ul></ul>
  22. 22. apply existing styles <ul><li>Properties Panel </li></ul><ul><ul><li>For non-text elements, find class button and click the arrow, choose the existing class from the list; </li></ul></ul><ul><ul><li>For text elements, click CSS mode> targeted rule , choose the existing class from the list. </li></ul></ul>
  23. 23. remove a style <ul><li>Property panel: </li></ul><ul><ul><li><HTML> mode >class>none </li></ul></ul><ul><ul><ul><li>or </li></ul></ul></ul><ul><ul><li><CSS> mode> targeted rule>remove class </li></ul></ul><ul><li>** It only remove the style form the item, but the class is still there. </li></ul>
  24. 24. style, style, more style <ul><li>Edit Styles </li></ul><ul><ul><li>Find the rule in CSS panel </li></ul></ul><ul><ul><li>Click on it </li></ul></ul><ul><ul><li>Change it in the window </li></ul></ul><ul><li>Rename a class style </li></ul><ul><ul><li>Properties Panel > class menu>rename or </li></ul></ul><ul><ul><li>Right click the rule in CSS panel </li></ul></ul><ul><li>Duplicate a style </li></ul><ul><ul><li>CSS style panel > right click the style name> duplicate </li></ul></ul>
  25. 25. Link to an existing CSS style sheet <ul><li>Open the HTML file </li></ul><ul><li>CSS style panel>attach style sheet >browse>all media </li></ul>Attach style sheet button This is your .css file name.