• Like
Layout & css lecture
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Layout & css lecture

  • 611 views
Published

 

Published in Education , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
611
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

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
  • Evolutionof web design
  • Various types of LayoutsOne Column
  • Two Column Fixed
  • Two Column Fixed
  • Three column fixed
  • Three column
  • Fluid Design

Transcript

  • 1. Basics
  • 2. Layout
  • 3. CSS?
  • 4. What is it?• CSS: Outside file to format text and objects• CSS: Formats HTML tags• CSS: Adds additional styles to HTML tags
  • 5. What can it do?• http://www.csszengarden.com
  • 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. 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. 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. CSS• Cascading Style Sheets• History: CSS• http://www.w3.org/Style/LieBos2e/hist ory/Overview.html
  • 10. Color• http://nowsourcing.com/blog/wp- content/uploads/2012/01/louisville- painter.html• http://colorschemedesigner.com/
  • 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