CSS for Designers

CSS FOR DESIGNERS @shoshizilla

WHAT’S ALL THIS? Content Styling Interactions

STARTING A PROJECT my_project index.html styles.css

<!DOCTYPE html> <html> <head> </head> <body> </body> </html> BASE STRUCTURE

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Haberdashery</title> </head> </html> HEAD

<head> . . </head> <body> <h1>Heading 1</h1> <p>This is a
paragraph tag!</p> </body> BODY

CHECK IT OUT!

blah...

CSS TO THE RESCUE!

<html> <head> . <link rel="stylesheet" href="styles.css"> </head> . . </html>
ADD STYLESHEET

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

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

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

<img src="http://placekitten.com/ 450/300" alt="kitten" /> <p> <a href="http://google.com/"> Link to
google </a> </p> ADD MORE THINGS!

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

Hover Normal

LAYOUT TIME! IF YOU GET LOST IN THIS SECTION, JUST
PRETEND YOU’RE BUILDING WITH LEGO.

THE BOX MODEL! width: 100px; padding: 10px; margin: 10px; border:
1px solid black; TOTAL: 142px

DISPLAY display: block; display: inline;

FLOATS float: left; float: right;

<body> <div class="wrapper"> <h1>The Title</h1> <div class="main"> <p>The main column.</p>
</div>  <div class="sidebar"> <p>This is the sidebar.</p> </div>  </div>  </body> BASE PAGE LAYOUT

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

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

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

THANKS & HAPPY HACKING! @shoshizilla

CSS for Designers

CSS for Designers

Shoshi

More Decks by Shoshi

Other Decks in Programming

Featured

Transcript