5 ways to customize your website with css
DESCRIPTION
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?TRANSCRIPT
5 WAYS TO CUSTOMIZE YOUR WEBSITE WITH CSS
December 13, 2012 #5WaysCSS
WHO’S THIS GUY?
#5WaysCSS
Maurice Cherry Creative Principal, 3eighteen media
@3eighteenmedia
#5WaysCSS
THE RUNDOWN • What is CSS? • 5 Ways to Customize Your Website With CSS • Wrap-Up • Questions
#5WaysCSS
WHAT IS CSS?
0
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, RULES
h1 { color: red; background-color: black; }
#5WaysCSS
selector
RULES, RULES, RULES
h1 { color: red; background-color: black; }
#5WaysCSS
declaration
RULES, RULES, RULES
h1 { color: red; background-color: black; }
#5WaysCSS
property property
value value
#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
BOXES
1
EVERYTHING IN HTML IS A BOX
#5WaysCSS
EVERYTHING IN HTML IS A BOX
#5WaysCSS
• 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
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-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 }
BORDER PROPERTIES
#5WaysCSS
• 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. */
BORDER PROPERTIES (CSS3)
#5WaysCSS
BORDER PROPERTIES (CSS3)
#5WaysCSS
• 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. */
BORDER PROPERTIES (CSS3)
#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
TEXT
2
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
• 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 */
TEXT PROPERTIES – COLOR
#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
• 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.
FONT PROPERTIES – FONT-WEIGHT
#5WaysCSS
FONT PROPERTIES – FONT-WEIGHT
#5WaysCSS
LINKS
3
THE RUNDOWN HTML <a href=“page.html”>Click here!</a> CSS Example a { color: green; }
#5WaysCSS
• :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; }
PSEUDO-CLASSES
#5WaysCSS
• CSS box properties and text/font properties apply to links also!
• Experiment, mix and match, and find your own stylish combos!
LINKS ARE TEXT AND BOXES, TOO!
#5WaysCSS
JUST A FEW THINGS YOU CAN DO…
#5WaysCSS
• 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
CSS LINK RESOURCES
#5WaysCSS
IMAGES
4
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
ANIMATION
5
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
