• Like
C S S  Top  Elements
Upcoming SlideShare
Loading in...5
×

C S S Top Elements

  • 515 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
515
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
1

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.  
  • 2. Font-size : x-large ; p { Background-color : purple ; } Selector Property names Declarations or values
  • 3.
    • HTML Style
    • P
    • H1
    • H2
    • body
    • Class Style
    • .class
    • Psuedo-class
    Applies to common tags Applies to anything ID DIV isions
  • 4. HEAD BODY <title> </title> <p> </p> <h1> </h1> <style type=&quot;text/css&quot;> <!-- .style1 { font-size: xx-large; font-family: Georgia, serif; color: #FF0000; } --> </style> <h1 class=&quot;style1&quot;>This is an H1 Style</h1> ADD CSS for Styles Internal CSS Sheet
  • 5.
    • Internal / Embedded
    • Build one page with all attributes & styles
    • Export the styles to separate CSS page
    • External
    • Build regular html page
    • Build separate CSS page
    • Link the HTML to CSS
  • 6. Font Size Color Background Links Headings Font-family: Font-size: color: a:link a:visited H1 H2 P
  • 7.  
  • 8.
    • Points for wrappers
  • 9.  
  • 10.  
  • 11.
    • Create a DIV #wrapper
    • Box: 700 px width
  • 12.
    • html, body { margin: 0px; padding: 0px; border: 0px; }
  • 13.
    • body { font-size: 62.5% }
      • Now continue to use ems for the rest of your font sizes
  • 14.  
  • 15. Pixels for relative size (exc IE) Ems for relative sizes Numbers for absolute size Relative Sizes based on default
  • 16. Size Matters Pixel – dot on computer monitor – exc. IE Points – 1/72 inch Inch Centimeter Millimeter Pica Ems Exs Percentages
  • 17.  
  • 18.
    • Format as you go
    • Create rules
    Link Add Edit Delete
  • 19. Stay Out of TR ou BL e
    • Shorthand for Margins, Padding, Borders
      • T op
      • R ight
      • B ottom
      • L eft
  • 20.
    • Link Order
    • a:link
    • a:visited
    • a:hover
    • a:active
  • 21.
    • Block
      • <div>, <p>, <h1>, <form>, <ul>, <li>
        • Always begin on a new line
        • Height, Margins can be changed
        • Width 100% of parent
    • Inline
      • <span>, <a>, <label>, <input>, <img>, <strong>, <em>
        • Begin on same line
        • Height, Margins cannot be changed
        • Width can’t be changed.
  • 22.
    • Style Larger elements first
    • DIVs for DIVisions of logical content
    • SPANs for exceptions to the rules
    • Styles
      • Class – multiple elements – Starts with a . Case sensitive.
      • ID – one element – Starts with a # Case sensitive.
    • Name Styles & Classes
      • No starting with # or non-alpha
    http://webdesign.about.com/od/css/a/aa071204.htm
  • 23.
    • /* Structure */
    • /* Typography */
    • /* Links */
    • /* Lists, images, etc. */
    http://www.blogherald.com/2006/09/08/css-tips-and-tricks/
  • 24.
    • a:link
    • a:visited
    • a:hover
    • a:active
    • a.nav:link
    • a.nav:visited
    • a.nav:hover
    • a.nav:active