Layout & css lecture

840 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
840
On SlideShare
0
From Embeds
0
Number of Embeds
34
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Evolutionof web design
  • Various types of LayoutsOne Column
  • Two Column Fixed
  • Two Column Fixed
  • Three column fixed
  • Three column
  • Fluid Design
  • Layout & css lecture

    1. 1. Basics
    2. 2. Layout
    3. 3. CSS?
    4. 4. What is it?• CSS: Outside file to format text and objects• CSS: Formats HTML tags• CSS: Adds additional styles to HTML tags
    5. 5. What can it do?• http://www.csszengarden.com
    6. 6. HTML Tags• <body></body>• Heading Elements <h1>Largest Heading</h1> <h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5> <h6>Smallest Heading</h6>• Text Elements <p>This is a paragraph</p> <br /> (line break) <hr /> (horizontal rule) <pre>This text is preformatted</pre>• Logical Styles <em>This text is emphasized</em> <strong>This text is strong</strong> <code>This is some computer code</code>Physical Styles <b>This text is bold</b> <i>This text is italic</i>• LinksOrdinary• link: <a href="http://www.example.com/">Link-text goes here</a> Image-link: <a href="http://www.example.com/"><imgsrc="URL" alt="Alternate Text" /></a> Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a> A named anchor:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>• Unordered list <ul> <li>Item</li> <li>Item</li></ul>• Ordered list <ol> <li>First item</li> <li>Second item</li></ol>
    7. 7. CSS Styles: Class• Class: specify a style for a group of elements.CSS: .imgLeft { float: left; margin: 10px;}HTML: <imgsrc=”PhotoName.jpg" width="169" height="156" class="imgLeft" />
    8. 8. CSS styles• ID: specify a style for a single, unique element. #header { width: 920px; height: 150px; padding: 5px; background-color: #F3C; margin: 5px;}http://www.w3schools.com/css/css_id_class. asp
    9. 9. CSS• Cascading Style Sheets• History: CSS• http://www.w3.org/Style/LieBos2e/hist ory/Overview.html
    10. 10. Color• http://nowsourcing.com/blog/wp- content/uploads/2012/01/louisville- painter.html• http://colorschemedesigner.com/
    11. 11. Font: CSS Family Web Safe• Serif Georgia, serif "Palatino Linotype", "Book Antiqua", Palatino, serif "Times New Roman", Times, serif• Sans-Serif Arial, Helvetica, sans-serif Arial Black, Gadget, sans-serif "Comic Sans MS", cursive, sans-serif Impact, Charcoal, sans-serif "Lucida Sans Unicode", "Lucida Grande", sans-serif Tahoma, Geneva, sans-serif "Trebuchet MS", Helvetica, sans-serif Verdana, Geneva, sans-serif• Monospace Fonts "Courier New", Courier, monospace "Lucida Console", Monaco, monospace

    ×