Pres

299 views
246 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
299
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://berkeleydecal.com/demo/simple.html
  • http://berkeleydecal.com/demo/simple.html
  • Pres

    1. 1. Building and Marketing Websites
    2. 2. Every element in a document, both block-level and inline, generates a rectangular element box Box Model
    3. 3. Block Elements vs Inline Elements
    4. 4. Block Elements • Paragrahs <p> … </p> • Headings <h1> … </h2> • Lists <ol> … </ol> • Block-level element begins on a new line, and some space is also usually added above and below the entire element by default.
    5. 5. Inline Elements • <em> … </em> • <strong> … </strong> • <img src=“test” /> • Go with the flow
    6. 6. Block vs Inline • Block elements are the major building blocks of your Web page • Inline elements for small pieces of content
    7. 7. Class Identifier Used to classify elements into a conceptual group.
    8. 8. <html> <head> <title>Simple Website</title> </head> <body> <h1>Welcome</h1> <p class=“green”>This is a demonstration.</p> <p>Business as usual</p> </body> </html>
    9. 9. p.green { color: green; } 1. Select <p> elements that belong to a certain class. 2. Make them green. The CSS Rule
    10. 10. If you want all elements that are in the green class to have a style, then you can just write your rule like this: .green { color: green; }
    11. 11. Id Identifier Used to identify a unique element in the document.
    12. 12. <html> <head> <title>Simple Website</title> </head> <body> <h1>Welcome</h1> <p id=“startline”>This is a demonstration.</p> <p>Business as usual</p> </body> </html>
    13. 13. Id Identifier • Giving an element an id is similar to adding an element to a class. • Differences: –attribute is called “id”, not “class”, –an element can’t have multiple ids –can not have more than one element on a page with the same id.
    14. 14. #start { color: green; } The CSS Rule
    15. 15. Generic Elements
    16. 16. Generic block-level element Generic inline element <div> … </div> <span> … </span>
    17. 17. Generic Elements • No inherent presentation qualities of their own • You can use style sheets to format the content however you like.
    18. 18. div element • Short for “division” • A container around a logical grouping of elements on the page • Used for structure
    19. 19. span element • Same benefits as the div element • Used for inline elements that do not introduce line breaks

    ×