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


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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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:// /
  • 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}
        • {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.