1 / 58

WEB DESIGN With HTML & CSS

WEB DESIGN With HTML & CSS. Tags tell browsers what type of information is inside. <p> This is a paragraph. </p> <a> This is an anchor (also known as a link) </a>. HTML Basics: Tags. Tags usually have an open, and a closing part to them. <p> This is a paragraph. </p>

rocio
Download Presentation

WEB DESIGN With HTML & CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. WEB DESIGN With HTML & CSS

  2. Tags tell browsers what type of information is inside. <p>This is a paragraph.</p> <a>This is an anchor (also known as a link)</a> HTML Basics: Tags

  3. Tags usually have an open, and a closing part to them. <p>This is a paragraph.</p> <a>This is an anchor (also known as a link)</a> HTML Basics: Tags

  4. Some Tags do not… <imgsrc=“image.jpg”> HTML Basics: Tags

  5. You can add more info to tags. <ahref=“http://google.com”>Go to Google</a> <p class=“meta”>Written by me on Tuesday</p> <nav class=“main”>Menu Goes Here</nav> <imgsrc=“logo.png” width=“50” height=“50”> HTML Basics: Attributes on Tags

  6. What is CSS?

  7. http://www.popandshorty.bigcartel.com/product/you-are-the-css-to-my-html-buttonhttp://www.popandshorty.bigcartel.com/product/you-are-the-css-to-my-html-button

  8. Use IDs (id=“foo” in html and #foo in the css) for unique items on a single HTML page. Only one #container or #menu, but use them sparingly. Think of an ID as your DNA… Only one person on this Earth has your DNA… hopefully. CSS Basics: IDs

  9. Use classes (class=“foo” in the html and .foo in the css) for common or reusable things and descriptions. You could have several .important paragraphs on a page. Or an .important <p>, an .important <a> and an .important <div>. Think of a class as a characteristic of yourself. Are you .right_handed or .left-handed? .tall or .short? CSS Basics: Classes

  10. This is me as an HTML element <person id=“stan-grabowski” class=“glasses right-handed polish”> Please Note: There is no <person> tag CSS Basics

  11. Class names to avoid: .redText .l13k .big_bold_text .leftMenu Better class names: .slogan .siteInfo .important .error .description .product .intro .purchase-info CSS Basics: Class Names

  12. * {color:red} Any text in any html tag will be red. Universal Selectors

  13. p {color:red} Only text in a <p> tag will be red. Type Selectors

  14. div p {color:red} Only text in a <p> that is within a <div> tag will be red. <div><p>this will be red</p></div> <p>this will not be red</p> Descendant Selectors

  15. .item {color:red} Any HTML tag with class=“item”. <div class=“item”>this will be red</div> <p class=“item”>this will also be red</p> Class Selectors

  16. #item {color:red} Any HTML tag with id=“item”. <div id=“item”>this will be red</div> ID Selectors

  17. :link{ } :visited{ } :focus{ } :hover { } :active { } :hover must be after :link and :visited in the style sheet. Usually this is the best order to have them in. In IE6, these only work on <a> tags. In most other browsers you can apply these to any tag. Pseudo Selectors

  18. CSS BasicsSome Examples

  19. You can add multiple classes onto an element (note that they are separated by a space, not a comma) <div class=“bio project-leader”><h2>Dr. Horrible</h2><p>Has a PhD in Horribleness.</p> </div> CSS Basics: Multiple classes

  20. .bio {font-size: 16px;} .bio.project-leader {font-size: 18px;} <p class=“bio”> Bob just works here. This text is 16px</p> <p class=“bio project-leader”> Mary is the Project Leader. This text is 18px</p> .project-leader {font-size: 18px;} <p class=“project-leader”><p class=“bio project-leader”><p class=“contact-info project-leader”> CSS Basics: Multiple classes

  21. Some CSS properties have a shorthand method e.g. font, border, margin, padding… margin-top:30px; margin-right:30px;margin-bottom:10px; margin-left:10px; Can be combined into: margin:30px 30px 10px 10px; CSS Basics: Shorthand

  22. padding:10px 25px 10px 25px; padding:10px 25px; CSS Basics: Shorthand Sometimes they can be shorter yet

  23. padding:10px 25px 10px 35px; This cannot be shortened. CSS Basics: Shorthand

  24. CSS Basics: Shorthand All the same? padding:10px; Order: top right bottom left Also works for: border and margin properties

  25. Absolute Length Values Absolute values don’t change. • Pixel (px) • Points (pt) – use for text size when printing • Others… but hardly used (mm, cm, in, pc)

  26. Percentage (%) Often a percentage of the parent element em (em) Much like percentage but a typographic term, but doesn’t have to be only used for type. Based on the size of font used 100% = 1em. 120%=1.2em Relative Length Values

  27. body {font-size: 15px;} h1 {font-size: 1.4em;} /* h1 = 21px */ body {font-size: 17px;} h1 {font-size: 1.4em;} /* h1 = 23.8px */ ems for font sizes

  28. Some properties are inherited Colors, font styling, list styling, text alignment Most properties are not Border, width, height, background, margin, padding… Inheritance

  29. h1 {color: gray;} <h1>Demo <em>Page</em></h1> How it works Demo Page How it doesn’t work: Demo Page When a property is inherited

  30. h1 {border: red;} <h1>Demo <em>Page</em></h1> How it works How it doesn’t work When a property is notinherited Demo Page Demo Page

  31. CSS BasicsSome More Examples

  32. CSS Specificity Some selectors in CSS have more power than others. http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

  33. http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.htmlhttp://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

  34. Specificity is basically the importance of a selector to the element it is styling. body p { } overrides p { } body p { } is more specific to the element it is styling CSS Specificity

  35. CSS: The CascadeSome Examples

  36. Box Model

  37. div { • height: 250px; • padding: 50px; • border-width: 50px; • margin: 50px; • }

  38. body { background: silver; } div { background: purple; border-color: black; }

  39. CSS FloatsSome Examples

  40. <!DOCTYPE html> <html> <head> <meta charset=utf-8"> <title>Title</title> <link href=“styles.css" rel="stylesheet" media="all"> <script src=“behaviors.js"></script> <meta name="keywords" content=""> <meta name="description" content=""> </head> <body> <div id="container"></div> </body> </html> Setting up your HTML for CSS

  41. /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } Use a reset

  42. Firebugand DevTools Disable certain styles to see what is being affected. Validate! Both HTML and CSS validator.w3.org jigsaw.w3.org/css-validator/ Give your selector a higher specificity Change #container to html body #container Troubleshooting

  43. Wireframes Photo: Nathanael Boehm – flickr: NathanaelB

More Related