Your SlideShare is downloading. ×
Week3 css
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Week3 css

3,277

Published on

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

No Downloads
Views
Total Views
3,277
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×