CSS for Designers

2ffbfdb10473f54f3be8a7851e902a90?s=47 Shoshi
October 19, 2013

CSS for Designers

An intro to HTML and CSS starting with the very basics.

2ffbfdb10473f54f3be8a7851e902a90?s=128

Shoshi

October 19, 2013
Tweet

Transcript

  1. 4.
  2. 11.
  3. 12.
  4. 15.

    /*** Reset ***/ /* DOWNLOAD FROM: http://bit.ly/reset-styles */ /*** Global

    ***/ body { padding: 40px; font-family: 'Helvetica Neue', 'Helvetica', sans-serif; line-height: 1.6; } h1 { color: #3facac; font-size: 40px; font-weight: bold; } p { font-size: 16px; } STYLES.CSS
  5. 16.

    ^_^

  6. 17.

    <!-- HTML --> <p id="username">username</p> <p class="warning">The cake is a

    lie.</p> <p class="warning">The cake is a pie.</p> /*** CSS ***/ p#username { /* Use IDs sparingly */ font: bold 18px/1.4 'Georgia', serif; } .warning { /* Use classes all the time! */ color: red; } WHAT IF I ONLY WANT TO CHANGE SOME ELEMENTS?
  7. 18.
  8. 19.

    <!-- HTML --> <p id="username" class="warning">username</p> <p class="warning high-alert"> The

    cake is a lie. </p> /*** CSS ***/ /* Define styles for two selectors with a `,` */ a, .high-alert { text-decoration: underline; } HOLY SELECTORS, BATMAN! CAN I COMBINE THESE?
  9. 20.
  10. 22.
  11. 23.

    /*** CSS ***/ a { color: #7c3fb8; /* purple */

    text-decoration: none; } a:hover, a:focus { text-decoration: underline; } a:active { color: #623292; /* darker purple */ } LINK STATE STYLES
  12. 25.

    LAYOUT TIME! IF YOU GET LOST IN THIS SECTION, JUST

    PRETEND YOU’RE BUILDING WITH LEGO.
  13. 29.

    <body> <div class="wrapper"> <h1>The Title</h1> <div class="main"> <p>The main column.</p>

    </div> <!-- .main --> <div class="sidebar"> <p>This is the sidebar.</p> </div> <!-- .sidebar --> </div> <!-- .wrapper --> </body> BASE PAGE LAYOUT
  14. 30.

    div.wrapper { margin: 0 auto; /* top right bottom left

    */ width: 960px; } div.main { float: left; width: 640px; background: #EEE; } div.sidebar { float: left; width: 320px; background: #CCC; } div.main, div.sidebar { min-height: 200px; } LEGO TIME
  15. 31.
  16. 32.

    div.main { float: left; width: 590px; /* changed */ margin-right:

    20px; /* new */ background: #EEE; } div.sidebar { float: left; width: 270px; /* changed */ background: #CCC; } div.main, div.sidebar { padding: 20px; /* new */ min-height: 200px; } MARGIN & PADDING
  17. 33.
  18. 34.

    background background-attachment background-color background-image background-position background-repeat border border-collapse border-color border-spacing

    border-style border-width bottom caption-side clear clip color content counter-increment counter-reset WHAT CAN I CHANGE? cursor direction display empty-cells float font font-family font-size font-style font-variant font-weight height left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin max-height max-width min-height min-width orphans outline outline-color outline-style outline-width overflow padding page-break-after page-break-before page-break-inside position quotes right table-layout text-align text-decoration text-indent text-transform top unicode-bidi vertical-align visibility white-space widows width word-spacing z-index