Css
Download as PPTX, PDF0 likes271 views
This document provides an introduction to CSS and HTML, covering terminology, syntax, selectors, elements and semantics. It discusses common HTML elements like headings, paragraphs, hyperlinks and structural elements. It also covers CSS box model and positioning, typography, font properties, backgrounds, images, audio and video.
Css
- 1. CSS&HTML
- 2. Terminology, Syntax, & Introduction • • • • Element <a> tags<a>….<a> Attributes <a href="http://www.shayhowe.com/">Shay Howe</a>
- 3. Selectors • Type Selectors HTML • <p>...</p> CSS • p { ... } • Class selectors HTML • <div class="awesome">...</div> CSS • .awesome { ... } • ID Selectors HTML • <div id="shayhowe">...</div> CSS • #shayhowe { ... }
- 4. Elements & Semantics • • • • • • • • Headings <h1>This is a Level 1 Heading</h1> <h2>This is a Level 2 Heading</h2> <h3>This is a Level 3 Heading</h3> Headings Demo This is a Level 1 Heading This is a Level 2 Heading This is a Level 3 Heading
- 5. • Paragraphs • <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> • Paragraphs Demo • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
- 6. • Hyperlinks • <a href="http://shayhowe.com">Shay</a> • Hyperlinks Demo • Shay Email Link <a href="mailto:shay@awesome.com?subject=Still%20Awesome&b ody=This%20is%20awesome">Email Me</a> • Email Link Demo • Email Me
- 8. •header <header>...</header> • navigation <nav> <ul> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> </nav>
- 10. Box Model & Positioning
- 11. • • • • • • • • CSS Height Property div { height: 100px; } CSS Width Property div { width: 400px; }
- 12. Typography • • • • • • Formatting Content Headings <h1>Lorem ipsum dolor sit amet...</h1> <h2>Pellentesque habitant morb...</h2> Bolding Text <p>Duis in <strong>voluptate</strong> velit cillum.</p>
- 13. • Italicizing Text • <p>Quae vivendi <em>putanda</em> est, expeteretur nih.</p> • Text Color • body { • color: #555; • }
- 14. Font Properties • • • • • • • • • • • • Font Size p{ font-size: 13px; } Font Style p{ font-style: italic; } Font Variant p{ font-variant: small-caps; }
- 15. • • • • • • • • Font Weight p{ font-weight: bold; } Line Height p{ line-height: 20px; }
- 16. Backgrounds & Gradients • • • • • • • • • • Background color div { background: #f60; background-color: #f60; } Background Image div { background: url('alert.png'); background-image: url('alert.png'); }
- 17. Images, Audio, & Video • Adding Images • <img src="cows.jpg" alt="Brown and white cows in a field"> • • • • • Sizing Images img { height: 200px; width: 200px; }
- 18. Adding Audio • <audio src="images-audio-video/jazz.ogg"></audio> • <audio src="images-audio-video/jazz.ogg" controls></audio>
- 19. Audio Fallbacks • • • • • • • • <audio controls> <source src="jazz.ogg" type="audio/ogg"> <source src="jazz.mp3" type="audio/mpeg"> <object type="application/x-shockwave-flash" data="player.swf?audio=jazz.mp3"> <param name="movie" value="player.swf?audio=jazz.mp3"> <p>This browser does not support the audio format. Please <a href="jazz.mp3" title="Jazz song">download</a> the audio clip.</p> </object> </audio>
- 20. • Adding Video • <video src="earth.ogv" controls></video>