Layout & css lecture

What is it?
• CSS: Outside file to format text and objects
• CSS: Formats HTML tags
• CSS: Adds additional styles to HTML tags

What can it do?
• http://www.csszengarden.com

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>

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" />

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/hist
ory/Overview.html

Color
• http://nowsourcing.com/blog/wp-
content/uploads/2012/01/louisville-
painter.html
• http://colorschemedesigner.com/

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

Layout & css lecture

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (6)

Semelhante a Layout & css lecture

Semelhante a Layout & css lecture (20)

Último

Último (20)

Layout & css lecture

Notas do Editor