WEB DESIGN With HTML & CSS

1. WEB DESIGN With HTML & CSS

3. 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

4. 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

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

7. 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

8. What is CSS?

11. 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

12. 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

13. 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

14. 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

15. 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

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

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

18. 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

19. .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

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

21. :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

22. CSS BasicsSome Examples

23. 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

24. .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

25. 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

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

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

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

29. 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)

30. 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

31. 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

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

33. 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

34. 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

35. CSS BasicsSome More Examples

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

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

38. 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

39. CSS: The CascadeSome Examples

40. Box Model

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

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

44. CSS FloatsSome Examples

45. <!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

46. /** * 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

47. 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

48. Wireframes Photo: Nathanael Boehm – flickr: NathanaelB