More Related Content
What's hot
What's hot (20)
Similar to HTML and CSS crash course!
Similar to HTML and CSS crash course! (20)
Recently uploaded
Recently uploaded (20)
HTML and CSS crash course!
- 1. HTML & CSS The basics
- 2. HTML CSS JavaScript Structure Style Behaviour
- 4. Common HTML terms Elements Tags Attributes <h1>I’m a HTML Element</h1> <p>so am I!</p> <a>We’re a tag</a> <h2>because I</h2> <p>have brackets</p> <a href="http://shayhowe.com/"> You find me </a> <p title="I'm a tooltip"> after an equal sign </p>
- 6. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>This is a web page.</p> </body> </html>
- 8. HTML CHEAT SHEET DOCUMENT OUTLINE <!DOCTYPE> <html> <head> <body> Version of html HTML document Page information Page documents COMMENTS <!--comment text--> PAGE INFORMATION <base/> <meta/> <title> <link/> <style> <script> Base URL Meta data Title Relevant resource Style resource Script esource DOCUMENT STRUCTURE <h[1-6]> <div> <span> <p> <br/> <hr/> Heading Page section Inline section Paragraph Line break Horizontal rule LINKS <a href=””> <a href=”mailto:”> <a href=”name”> <a href=”#name”> Page link Email link Anchor Link to anchor TEXT MARKUP <strong> <em> <blockquote> <q> <abbr> <acronym> <address> <pre> <dfn> <code> <cite> <del> <ins> <sub> <sup> <bdo> Strong emphasis Empahasis Long quotation Short quotation Abrreviation Acronym Address Pre-formatted text Definition Code Citation Deleted text Inserted text Subscript Superscript Text direction <form> <fieldset> <legend> <label> <input/> <select> <optgroup> <option> <textarea> <button> Form Collection of fields Form legend Input label Form input Drop-down box Group of options Drop-down options Large text input Button FORMS IMAGES AND IMAGE MAPS <img/> <map> <area/> Image Image map Area of image map LISTS <ol> <ul> <li> <dl> <dt> <dd> Ordered list Unordered list List item Definition list Definition term Term description TABLES <table> <caption> <thead> <tbody> <tfoot> <colgroup> <col/> <tr> <th> <td> Table Caption Table header Table body Table footer Column group Column Table row Header cell Table cell CORE ATTRIBUTES class id style title *<br/> empty tags
- 10. EXERCISE 1 Create a HTML document
- 11. <!DOCTYPE html> <html lang="en"> <head> </head> <body> </body> </html> 1. Create a folder 1.1 Create a file called index.html 2. Make the file a html readable document:
- 12. 3. Inside the <head> element, let’s add <meta> and <title> elements. <head> <meta charset="utf-8"> <title>Hello World</title> </head>
- 13. 4. Inside the <body> element, add <h1> and <p> elements. <body> <h1>Put a header here</h1> <p>And some text here</p> </body>
- 14. 5. Let’s check it out! Double-clicking this file or dragging it into a web browser will open it for us to review.
- 16. Common CSS terms Selectors Properties Values p { ... } h1 { ... } p { color: ...; font-size: ...; } h1 { font-family: ...; font-size: ...; } p { color: green; font-size: 16; } h1 { font-family: Arial; font-size: 24; }
- 18. Selectors
- 19. Type Selectors Type selectors target elements by their element type div { ... } <div>...</div> CSS HTML <div>...</div>
- 20. Class selectors allow us to select an element based on the element’s class attribute value. Class Selectors .awesome { ... } <div class=”awesome”>...</div> CSS HTML
- 21. ID Selectors #anacidre { ... } <div id=”anacidre”>...</div> CSS HTML ID selectors are even more precise than class selectors, as they target only one unique element at a time.
- 22. Additional Selectors Many more advanced selectors exist and are readily available
- 23. Referencing CSS
- 24. In order to get our CSS talking to our HTML, we need to reference our CSS file within our HTML. <head> <link rel="stylesheet" href="main.css"> </head>
- 26. 1.1 Inside of our “styles-conference” folder, let’s create a new folder named “assets.” 1. Create a folder named “styles-conference” inside our initial folder. 1.2 For our style sheets, let’s go ahead and add another folder named “stylesheets” inside the “assets” folder. 1.3 A new file named main.css and save it within the “stylesheets” folder we just created. 1.4 Head over to Eric’s website, copy his reset, and paste it at the top of our main.css file: http://meyerweb.com/eric/tools/css/reset/
- 27. 2. Let’s connect our stylesheet to our index.html file. <head> <meta charset="utf-8"> <title>Your title here</title> <link rel="stylesheet" href="main.css"> </head>
- 28. 3. Do some CSS-ing!
- 29. color background background-color background-attachment background-repeat background-image background-position CSS CHEAT SHEET FONTS font font-family font-style font-variant font-weight font-stretch font-size font-size-adjust TEXT COLOR/BACKGROUND BOX MODEL TEXT MARKUP margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left border border-top border-bottom border-right border-left border-color border-top-color border-right-color border-bottom-color border-left-color border-style border-top-style border-right-style border-bottom-style border-left-style border-width border-top-width border-right-width border-bottom-width border-left-width :first-child :first-line :first-letter :hover :active :focus :link :visited :lang(var) :before :after PSEUDO-SELECTORS /CLASSES TABLES caption-side table-layout border-collapse border-spacing empty-cells speak-header DIMENSIONS POSITIONING SELECTORS * div div* div span div, span div > span div + span .class div.class #itemid div#itemid a[attr] a[lang|=‘en’] All elements <div> All elements within <div> <span> within <div> <div> and <span> <span> with parent <div> <span> preceded by <div> Elements of class “class” <div> of class “class” <div> with “itemid” <a> with attribute “attr” <a> when lang begins “en” display position top right bottom left float clear z-index direction + unicode-bidi overflow clip visibility text-indent text-align text-decoration text-shadow letter-spacing word-spacing text-transform white-space line-height width min-width max-width height min-height max-height vertical-align Content Padding Border Margin