1 / 121

CSS Overview

CSS Overview. CSS Quick Facts. CSS – Cascading Style Sheets Can be used in HTML, SVG, and any XML document . Is a style sheet language used for presentation. Intro. Three ways to get CSS into HTML. From easiest to best practice Inline Embedded External. Intro. Inline.

otis
Download Presentation

CSS Overview

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

  2. CSS Quick Facts • CSS – Cascading Style Sheets • Can be used in HTML, SVG, and any XML document. • Is a style sheet language used for presentation Intro

  3. Three ways to get CSS into HTML From easiest to best practice • Inline • Embedded • External Intro

  4. Inline Using the style attribute <p style=“color: red; font-family: arial;”> This is awesome content. </p> Intro

  5. Embedded Placed inside of the <head> element <head> <style type=“text/css”> p { color: red; font-family: arial; } h1 { margin: 0em; padding: 0em; } </style> <head> Intro

  6. External index.html <head> <link rel=“stylesheet” type=“text/css” href=“style.css”/> </head> style.css p { color: red; font-family: arial; } h1 { margin: 0em; padding: 0em; } Intro

  7. Inline CSS is Bad! Avoid this because we want to • Separate presentation from structure • Make maintenance easier • Promote re-usability • Make our HTML more accessible Intro

  8. Disadvantages of Embedded CSS • They affect only the pages they’re on • Increase page load times Intro

  9. Why use external CSS? • See previous two slides Intro CSE 3345

  10. External CSS Tip Don’t use @import for external css Not as network friendly and will not be cached by browser. **if you don’t know what @import is, don’t worry** Intro CSE 3345

  11. CSS Selectors CSE 3345

  12. How does CSS work? Three key features • Selector • Properties • Values Property Value Declaration Selector { color: red; font-family: arial; } p Intro CSE 3345

  13. Selectors 5 ways to select • element - body • class - .page • id - #navigation • position in document - .page p, p:first-child, div > a, li + li • State – a:visited, input:focus Selectors CSE 3345

  14. A Subtle Distinction Class selector Matches an element that has a class value which contains the attribute value. Id selector Matches an element that has a class value which is equal Selectors CSE 3345

  15. Element Selector • To select an element, create a selector using the element’s name. <p>This text will be red</p> p { color: red} CSE 3345

  16. Style all h2 elements <body> <h1>History</h1> <section> <article> <h2>Ancient</h2> <p>Knights and horses use to be best friends.</p> </article> <article> <h2>Colonial</h2> <p>In 1300, men walked around town holding a gun.</p> </article> </section> </body> CSE 3345

  17. Class Selector • To select an element by class value, create a selector with the class value you want to select prepended with a period. <div class=“content”>Hello blue text!</div> .content { color: blue; } CSE 3345

  18. Id Selector • To select an element by id, create a selector with the id value you want to select prepended with a pound/hash/bang sign. <div id=“nav”>Hello green text!</div> #nav { color: green; } CSE 3345

  19. Pseudo-Class Selector • Create a pseudo-class selector by appending a colon after an element, class, or id selector followed by the pseudo-class. CSE 3345

  20. Pseudo-Class Selector <p> The last P before the note. </p> <div class="note"> <p id=“fred”>The selector applies to me, I’m purple!</p> <p>The selector doesn’t apply to me</p> </div> div p:first-child { color: purple; } div p#fred:first-child { color: purple; } CSE 3345

  21. Specialized Selectors Selectors CSE 3345

  22. 30 selectors you should memorize • http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ Selectors CSE 3345

  23. More Info • See the CSS spec for thorough details on selectors http://www.w3.org/TR/CSS2/selector.html Selectors CSE 3345

  24. What will be selected? #navul.links a:hover <body> <div id=“nav”> <ul class=“links”> <li><a href=“#”>Selectors Rule</a></li> </ul> </div> </body> A possible HTML snippet Selectors CSE 3345

  25. Practice Selectors Visit Selectoracle to learn about and practice with CSS selectors. Selectors CSE 3345

  26. CSS Specificity/Point System CSE 3345

  27. CSS Specificity/Point System <pstyle="color:red;">This is red</p> CSE 3345

  28. CSS Specificity/Point System #nav{ color: red;} CSE 3345

  29. CSS Specificity/Point System .warning{ color: yellow;} p:first-child{ padding: 10em;} CSE 3345

  30. CSS Specificity/Point System a { margin-top: 5em;} CSE 3345

  31. CSS Specificity/Point System • If the element has inline styling, that automatically1 wins 1,0,0,0 points • For each ID value, apply 0,1,0,0 points • For each class value (or pseudo-class or attribute selector), apply 0,0,1,0 points • For each element reference, apply 0,0,0,1 point CSE 3345

  32. Points System (Bad Way!!!) • Is NOT base 10 system • (1, 1, 1, 1) -> (1 * (10^3)) + (1 * (10^2)) + (1 * (10^1)) + (1 * (10^0)) --> (1 * (1000)) + (1 * (100)) + (1 * (10)) + (1 * (1)) ---> (1,000)) + (100) + (10) + (1) ----> 1,111 -----> WRONG!!! CSE 3345

  33. Points System • Add the number of selectors for each category and place them in the appropriate column. • Numbers don’t fill over • (0, 1, 13, 1) CSE 3345

  34. How to determine a winner • Score your selectors in the order they are written • Starting from the top, go down the first column looking for the highest score. If you don’t find a winner or two columns are equal, move to the next column (repeat if necessary). • If you find two selectors with equal specificity, the selector listed last wins. CSE 3345

  35. How to determine a winner (0, 1, 1, 10) (0, 0, 13, 5) (0, 0, 7, 3) (0, 0, 2, 1) (0, 0, 1, 0) (0, 1, 2, 2) CSE 3345

  36. How to determine a winner (0, 1, 1, 10) (0, 0, 13, 5) (0, 0, 7, 3) (0, 0, 2, 1) (0, 0, 1, 0) (0, 1, 2, 2) – winner! CSE 3345

  37. Lets Practice • div #nav li • ol.ing li • ol.ing:hover li CSE 3345

  38. Point System Reminder! • 13 elements don’t override a class • 13 classes don’t override an id • 13 ids don’t override an inline style CSE 3345

  39. Inheritance & Units CSE 3345

  40. Inheritance • Some styles are inherited by the child from their parent • Font-family • Text-decoration • Text related styles Inheritance CSE 3345

  41. Inheritance: ones on left will, ones on right will not Text related Layout related Inheritance CSE 3345

  42. Inheritance You can force a child to inherit properties from its parent <div style=“border: 1px solid red;”> <p style=“border: inherit”> I like to inherit stuff. </p> </div> Inheritance CSE 3345

  43. Units • Absolute: always compute the same value • Points (pt) • Inches (in) • Relative: computed with respect to something • Pixels (px) • Em • % Units CSE 3345

  44. Absolute Units • Don’t use them unless your media type is print • DON’T USE THEM for building web pages! Units CSE 3345

  45. Relative Units : Pixels • Pixels are relative because they are based on the pixel size of the display screen. • There are a lot of different pixel sizes so almost every screen will be different. Units CSE 3345

  46. Relative Units : Em For fonts and containers • 1em is equal to the current font size of the element in question. Units CSE 3345

  47. Relative Units : % Percent For fonts • 100% is equal to the current font size of the element in question For containers • 100% is equal to the size of the parent container Units CSE 3345

  48. CSS Font Size Fiddle • http://jsfiddle.net/znpKn/ CSE 3345

  49. Box Model CSE 3345

  50. CSS Moment of Clarity • Every page element is a box. • Developers can control the size and position of these boxes. Box Model CSE 3345

More Related