5 Ways to Customize Your Website with CSS
Upcoming SlideShare
Loading in...5
×
 

5 Ways to Customize Your Website with CSS

on

  • 389 views

CSS is one of the primary building blocks of the Internet. But to the average person, it may just look like a bunch of random code. Wouldn't you like to know how to understand that code so you can ...

CSS is one of the primary building blocks of the Internet. But to the average person, it may just look like a bunch of random code. Wouldn't you like to know how to understand that code so you can make changes to your website without forking over hundreds of dollars to a web designer?

Statistics

Views

Total Views
389
Views on SlideShare
389
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

5 Ways to Customize Your Website with CSS 5 Ways to Customize Your Website with CSS Presentation Transcript

  • 5 WAYS TO CUSTOMIZEYOUR WEBSITE WITH CSSDecember 13, 2012#5WaysCSS
  • WHO’S THIS GUY? Maurice Cherry Creative Principal, 3eighteen media mail@3eighteenmedia.com @3eighteenmedia#5WaysCSS
  • #5WaysCSS
  • THE RUNDOWN • What is CSS? • 5 Ways to Customize Your Website With CSS • Wrap-Up • Questions#5WaysCSS
  • 0 WHAT IS CSS?
  • CSS = CASCADING STYLE SHEET • A style sheet language • A file that contains style rules which tell the browser how to present HTML elements • CSS Example: h1 { color: red; background-color: black}#5WaysCSS
  • CSS = CASCADING STYLE SHEET#5WaysCSS
  • CSS = CASCADING STYLE SHEET#5WaysCSS
  • RULES, RULES, RULES h1 { color: red; background-color: black; }#5WaysCSS
  • RULES, RULES, RULES h1 { color: red; background-color: black; }#5WaysCSS
  • RULES, RULES, RULESselector h1 { color: red; background-color: black; }#5WaysCSS
  • RULES, RULES, RULES declaration h1 { color: red; background-color: black; }#5WaysCSS
  • RULES, RULES, RULES value value h1 { color: red; background-color: black; } property property#5WaysCSS
  • #5WaysCSS
  • CASCADE (THE “C” IN “CSS”) • The cascade tells browsers the order in which to process rules in CSS stylesheets to prevent conflicts and collisions. • Browser, User, Author • External, Internal, Inline#5WaysCSS
  • CASCADE (THE “C” IN “CSS”)#5WaysCSS
  • CASCADE (THE “C” IN “CSS”)#5WaysCSS
  • INHERITANCE • Inheritance means that child elements will inherit properties from their parent element. • Inheritance works on a property by property basis.#5WaysCSS
  • INHERITANCE#5WaysCSS
  • INHERITANCE CSS body { color: blue; } HTML <body> <h1>This is some text. What color am I?</h1> </body>#5WaysCSS
  • INHERITANCE CSS body { color: blue; } HTML <body> <! -- parent element --> <h1>This is some text. What color am I?</h1> <!– child element --> </body> NOTE: NOT ALL PROPERTIES ARE INHERITABLE, BUT INHERITANCE CAN BE FORCED.#5WaysCSS
  • #5WaysCSS
  • BEFORE YOU EDIT YOUR CSS… • Test your CSS in a “code sandbox” first. • Save a copy of the original .css file!#5WaysCSS
  • BEFORE YOU EDIT YOUR CSS… • Codepen: http://codepen.io • CSSDesk: http://cssdesk.com • Dabblet: http://dabblet.com • JS Bin: http://jsbin.com • JSFiddle: http://jsfiddle.net • Tinkerbin: http://tinkerbin.com#5WaysCSS
  • 1 BOXES
  • EVERYTHING IN HTML IS A BOX#5WaysCSS
  • EVERYTHING IN HTML IS A BOX• Links: <a href=“index.html”>Click here</a>• Text: <p>This is some text.</p>• Images: <img src=“image.jpg” />• Boxes: several of these • <div>, <blockquote>, <header>, <section>, <figure>, <aside>, <footer>, etc.#5WaysCSS
  • #5WaysCSS
  • #5WaysCSS
  • #5WaysCSS
  • #5WaysCSS
  • MARGIN PROPERTIES • margin-top, margin-right, margin-bottom, margin-left • CSS Example: h1 { margin-top: 10px; margin-bottom: 10px; } • Remember: margins control space outside of the border.#5WaysCSS
  • #5WaysCSS
  • BORDER PROPERTIES • border-top-width, border-top-style, border-top-color, etc. • Shorter property: border-top, border-bottom, etc. • Default width: 1 pixel (px) • Default style: solid • Default color: black • CSS Example: h1 { border-left-width: 10px; border-left-color: yellow; border-left-style: solid }#5WaysCSS
  • BORDER PROPERTIES (CSS3) • border-top-left-radius, border-top-right-radius, border- bottom-right-radius, border-bottom-left-radius • Shorter property: border-radius • Creates rounded borders on boxes • CSS Example: h1 { border-top-left-radius: 10px; background-color: red; } /* This will round the top left corner. */#5WaysCSS
  • BORDER PROPERTIES (CSS3)#5WaysCSS
  • BORDER PROPERTIES (CSS3) • box-shadow • Creates drop shadows for boxes, can be stacked to create multiple shadows • CSS Example: p { box-shadow: 10px 10px 5px #888; } /* This creates a drop shadow that is underneath the box and to the right. */#5WaysCSS
  • BORDER PROPERTIES (CSS3)#5WaysCSS
  • #5WaysCSS
  • PADDING PROPERTIES • padding-top, padding-right, padding-bottom, padding-left • CSS Example: h1 { padding-left: 10px; padding-right: 5px; } • Remember: padding controls space inside of the border.#5WaysCSS
  • OTHER BOX PROPERTIES • height (number with units of length or percentage) • width (number with units of length or percentage) • background-color (color name, hexadecimal code, RGB color code) – Controls the background color of an element – Example: h1 { background-color: red; } /* The background of this HTML element will be red. */#5WaysCSS
  • TRY PUTTING IT ALL TOGETHER! • CSS div { background-color: red; height: 200px; width: 200px; border: 2px solid blue; padding: 20px; margin: 40px; } • HTML <div>This is an example of what you can do!</div>#5WaysCSS
  • 2 TEXT
  • TEXT AND FONT PROPERTIES • These apply to all text elements in HTML • Example: <p>, <blockquote>, <cite>, <h1>, <h2>, etc.#5WaysCSS
  • TEXT PROPERTIES • color, letter-spacing, text-align, text- decoration, text-indent, text-transform, word- spacing#5WaysCSS
  • TEXT PROPERTIES – COLOR • Color values – color names (red, black, yellow, etc.) – hexadecimal codes (#FF0000, #BADA55, etc.) – RGB color code (rgb(255,0,0)) • Example: h1 { color: rgb(255,0,0); } /* red */#5WaysCSS
  • TEXT PROPERTIES – LETTER-SPACING • Adjusts the space between letters – Values are numbers with units of length • Example: h1 { letter-spacing: 0.5em; }#5WaysCSS
  • TEXT PROPERTIES – LETTER-SPACING#5WaysCSS
  • TEXT PROPERTIES – TEXT-ALIGN • Controls the alignment of text within its bounding box – Values are left, right, center, justify • Example: h1 { text-align: center; }#5WaysCSS
  • TEXT PROPERTIES – TEXT-ALIGN#5WaysCSS
  • TEXT PROPERTIES – TEXT-DECORATION • Controls the “decoration” of text – Values are underline, overline, line-through, blink • Example: h1 { text-decoration: underline; } • Not to be confused with the border-bottom property!#5WaysCSS
  • TEXT PROPERTIES – TEXT-DECORATION#5WaysCSS
  • TEXT PROPERTIES – TEXT-INDENT • Indents the first line of text in an element – Values are numbers or percentages • Example: h1 { text-indent: 1em; }#5WaysCSS
  • TEXT PROPERTIES – TEXT-INDENT#5WaysCSS
  • TEXT PROPERTIES – TEXT-TRANSFORM • Controls the case of text – Values are uppercase, lowercase, capitalize • Example: h1 { text-transform: capitalize; } • Capitalize is the same as title case#5WaysCSS
  • TEXT PROPERTIES – TEXT-TRANSFORM#5WaysCSS
  • TEXT PROPERTIES – WORD-SPACING • Controls the spacing between words – Values are numbers with units of length • Example: h1 { word-spacing: 5px; }#5WaysCSS
  • TEXT PROPERTIES – WORD-SPACING#5WaysCSS
  • FONT PROPERTIES • font-family, font-size, font-style, font-variant, font-weight#5WaysCSS
  • FONT PROPERTIES • Shorter property: font#5WaysCSS
  • FONT PROPERTIES – FONT-FAMILY • Changes the font – Values are names of fonts, usually in a font stack, with a generic font family at the end • Example: h1 { font-family: Arial, Helvetica, sans- serif; } • Web fonts (Google Web Fonts, Typekit, etc.)#5WaysCSS
  • FONT PROPERTIES – FONT-FAMILY#5WaysCSS
  • FONT PROPERTIES – FONT-SIZE • Changes the size of the font – Values are numbers with units of length or percentages • Example: h1 { font-size: 30px; }#5WaysCSS
  • FONT PROPERTIES – FONT-SIZE#5WaysCSS
  • FONT PROPERTIES – FONT-STYLE • Changes the style of the font – Values are normal, italic, or oblique • Example: h1 { font-style: italic; } • Italic and oblique look the same, but aren’t; when in doubt go with italic#5WaysCSS
  • FONT PROPERTIES – FONT-STYLE#5WaysCSS
  • FONT PROPERTIES – FONT-VARIANT • Changes the variance of the font – Values are normal or small-caps • Example: h1 { font-variant: small-caps; }#5WaysCSS
  • FONT PROPERTIES – FONT-VARIANT#5WaysCSS
  • FONT PROPERTIES – FONT-WEIGHT • Changes the weight of the font – Values are numbers (100-900), normal, lighter, bold, bolder • Example: h1 { font-weight: bold; } • You’ll really only use normal and bold.#5WaysCSS
  • FONT PROPERTIES – FONT-WEIGHT#5WaysCSS
  • 3 LINKS
  • THE RUNDOWN HTML <a href=“page.html”>Click here!</a> CSS Example a { color: green; }#5WaysCSS
  • PSEUDO-CLASSES • :link (normal state) • :visited (a link the user has already visited) • :hover (a link when the user mouses over it) • :active (a link when it’s clicked) • Examples: a:hover { color:red; } a:visited { color:orange; }#5WaysCSS
  • LINKS ARE TEXT AND BOXES, TOO! • CSS box properties and text/font properties apply to links also! • Experiment, mix and match, and find your own stylish combos!#5WaysCSS
  • JUST A FEW THINGS YOU CAN DO…#5WaysCSS
  • CSS LINK RESOURCES • Link Pseudo-Classes (In Order): http://css- tricks.com/snippets/css/link-pseudo-classes-in-order • Button Maker: http://css-tricks.com/examples/ButtonMaker • CSS Button Generator: http://www.cssbuttongenerator.com • CSS Button | CSS Generator: http://www.cssbutton.me/generator • CSS Gradient Button: http://cssgradientbutton.com • CSS3 Button Generator: http://css3button.net#5WaysCSS
  • 4 IMAGES
  • HOW IMAGES ARE USED IN CSS • background-image (use for any element) • list-style-image (used for <ul> elements) • opacity (controls transparency)#5WaysCSS
  • BACKGROUND-IMAGE PROPERTY • Uses an image in the background of an element • Image repeats horizontally and vertically by default • Repetition can be changed with background-repeat property; position can be changed with background- position property • Example: h1 { background-image: url(‘image.jpg); }#5WaysCSS
  • BACKGROUND-IMAGE PROPERTY#5WaysCSS
  • BACKGROUND-REPEAT PROPERTY • Controls horizontal or vertical repetition of background-image – Values are repeat-x, repeat-y, no-repeat, repeat • Example: h1 { background-repeat: repeat-x; } /* The background image will repeat horizontally. */#5WaysCSS
  • BACKGROUND-REPEAT PROPERTY#5WaysCSS
  • BACKGROUND-POSITION PROPERTY • Controls position of the background-image relative to the element’s height and width – Values are repeat-x, repeat-y, no-repeat, repeat • Example: h1 { background-repeat: repeat-x; } /* The background image will repeat horizontally. */#5WaysCSS
  • BACKGROUND-POSITION PROPERTY#5WaysCSS
  • LIST-STYLE-IMAGE PROPERTY • Changes the bullets in a bulleted list to an image of your choice – Value is the URL of your image • Example: ul { list-style-image: url(‘bullet.gif); } /* The bullets in the <ul> list will be replaced with bullet.gif. Use a small image. */#5WaysCSS
  • LIST-STYLE-IMAGE PROPERTY#5WaysCSS
  • OPACITY PROPERTY • Changes the transparency of your image –Value is a decimal number from 0.00 to 1.00 • Example: img { opacity: 0.5; } /* This image will have 50% transparency. */ • Text is also affected by opacity, so use carefully! • Can be used in conjunction with pseudo-classes#5WaysCSS
  • OPACITY PROPERTY#5WaysCSS
  • IMAGES ARE BOXES, TOO! • CSS box properties apply to images also! –padding –margin –border –background-color • Experiment to find your own combinations!#5WaysCSS
  • 5 ANIMATION
  • ADVANCED, BUT IMPRESSIVE • 2D Transforms • 3D Transforms • Transitions • Animations NOTE: Support is mixed across browsers.#5WaysCSS
  • CSS ANIMATION RESOURCES • 2D Transforms: http://westciv.com/tools/transforms/index.html • 3D Transforms: http://westciv.com/tools/3Dtransforms/index.html • CSS Transition: http://www.css3maker.com/css3-transition.html • CSS Animation: http://www.css3maker.com/css3-animation.html#5WaysCSS
  • WRAP-UP • CSS is a powerful language that controls the presentation of nearly every element on a web page. • Save your main CSS file before experimenting on your website. • Learn the basics by practicing on code playgrounds. • Don’t reinvent the wheel – use code generators where necessary to save time!#5WaysCSS
  • http://eepurl.com/sVmz9#5WaysCSS
  • QUESTIONS?mail@3eighteenmedia.com | @3eighteenmedia#5WaysCSS