Embed Size (px)
DESCRIPTION
Citation preview
Basics
Layout
CSS?
What is it?
• CSS: Outside file to format text and objects
• CSS: Formats HTML tags• CSS: Adds additional styles to HTML
tags
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/"><img src="URL" alt="Alternate Text" /></a>Mailto link: <a href="mailto:[email protected]">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>
CSS Styles: Class• Class: specify a style for a group of
elements.CSS:
.imgLeft {float: left;margin: 10px;}
HTML:<img src=”PhotoName.jpg" width="169" height="156" class="imgLeft" />
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
CSS
• Cascading Style Sheets• History: CSS • http://www.w3.org/Style/LieBos2e/his
tory/Overview.html
Color
• http://nowsourcing.com/blog/wp-content/uploads/2012/01/louisville-painter.html
• http://colorschemedesigner.com/
Font: CSS Family Web Safe
• SerifGeorgia, serif"Palatino Linotype", "Book Antiqua", Palatino, serif"Times New Roman", Times, serif
• Sans-Serif Arial, Helvetica, sans-serifArial Black, Gadget, sans-serif"Comic Sans MS", cursive, sans-serifImpact, Charcoal, sans-serif"Lucida Sans Unicode", "Lucida Grande", sans-serifTahoma, Geneva, sans-serif"Trebuchet MS", Helvetica, sans-serifVerdana, Geneva, sans-serif
• Monospace Fonts "Courier New", Courier, monospace"Lucida Console", Monaco, monospace
