1. CSS Color & Text Cascading Style Sheets

2. Advantages of CSS Typography and page layout can be better controlled Style is separate from structure Documents are potentially smaller Site maintenance is easier

3. Configuring CSS Commenting CSS = /*comment goes here*/ Inline Styles (coded in body, apply to one element only) Embedded Styles (coded in head, apply to entire document) External Styles (coded in separate.css file, can be applied to multiple documents) Imported Styles (similar to external, external can be imported using @import directive)

4. CSS Selectors and Declarations CSS Style Rule Selector Can be an HTML element, a class name, or an id name CSS Style Rule Declaration Indicates the CSS property you are setting body{color:blue;}Selector{Declaration:Value;}

5. A Few CSS Properties background-color, color font-family, font-size, font-style, font-weight line-height margin, margin-left, margin-right text-align, text-decoration width

6. Color Values (Hex and Name) Hexadecimal Number System Base 16 0-9, A-F (must begin with #) #FFFFFF (white), #000000 (black) CSS Color Syntax p{color:red;} = p{color:#FF0000;} = p{color:#F00;} = p{color:rgb(255,0,0);} http://www.w3schools.com/cssref/css_colornames.asp

7. Inline CSS with Style This is displayed as a red heading This is displayed as a red heading This is displayed as a red heading on a gray background This is displayed as a red heading on a gray background

8. Embedded CSS With Style Embedded styles are placed within a element located in the head section of a web page XHTML requires XHTML requires HTML5 requires HTML5 requires body{background-color:#CCFFFF; color:#000033;} body{background-color:#CCFFFF; color:#000033;}

9. Configuring Text with CSS Font-Family Category serif, sans-serif, monospace, cursive, fantasy p{font-family:Arial, Helvetica, sans-serif;} Not all computers have the same font installed. Or a list of web-safe fonts, visit http://www.w3schools.com/cssref/css_websafe_fonts.asp http://www.w3schools.com/cssref/css_websafe_fonts.asp

10. More CSS Font Properties font-size Text Value (xx-small, x-small, small, medium, large, x-large, xx-large) Pixel Unit (px), Point Unit (pt), Em Unit (em), Percentage Value (%) font-weight, font-style, line-height, text-align, text- indent, text-decoration Configuring selectors (h1, h2, ul, p)

11. CSS Class and id Selectors Class Selector (used when you need to apply a CSS declaration to certain elements).feature{color:#FF0000;} Usability Studies Usability Studies I’ll have the feature CSS properties I’ll have the feature CSS properties id Selector (used when you want to apply a CSS declaration to a single area) #footer{color:#333333; font-size:.75em; font-style:italic;} Usability Studies Usability Studies This is the footer This is the footer

12. Contextual Selectors Used when you want to specify an element within the context of its container (parent) element aka: descendent selectors To specify a green text color only for anchor tags located within the footer id declared earlier… #footer a {color:#00ff00;}

13. Span Element defines areas separate, with empty space above and below defines areas separate, with empty space above and below defines a section that is not physically separated from other areas defines a section that is not physically separated from other areas Use the tag if you need to format an area that is contained within another, such as within,,, or tag.

14. External Style Sheets Best method (in my opinion) Link to external style sheet from HEAD Link to external style sheet from HEAD

15. Centering with CSS Wrap the entire document in a to encompass centering all content #wrapper {width:700px; margin-left:auto; margin-right:auto;} #wrapper {width:80%; margin-left:auto; margin-right:auto;}

16. The “Cascade” Browser Defaults External Styles Embedded Styles Inline Styles HTML Attributes

17. CSS Validation Similar to HTML5 validation http://jigsaw.w3.org/css-validator/

18. Horizontal Rule Element Visually separates areas of the page XHTML = XHTML = HTML5 = HTML5 = Use CSS to specify width, height, color, & style

19. Border & Padding Property Border = configure the border around an element (default width set to 0 to be invisible) border-width, border-color, border-style Padding = configures the empty space between the content of the element and the border padding-bottom, padding-left, padding-right, padding-top

20. Other CSS Properties background- attachment, clip, image, origin, position, repeat, size box-shadow, height, linear- gradient, min-width, opacity, radial-gradient, text-shadow border- bottom, bottom-left- radius, bottom-right- radius, color, left, radius, right, style, top, top-left-radius, top- right-radius, width

21. Types of Graphics GIF, JPEG, PNG

22. Image Element Image Element = src attribute + alt attribute Attributes: align, alt, border, height, hspace, id, name, src, title, vspace, width Image Hyperlinks

23. HTML5 Figure Element Figure includes image and caption (figcaption) Create image element, add alternate text, set figcaption in CSS Open element, create image element with, use Caption Here, close element

24. HTML5 Meter & Progress Meter = displays a visual gauge of a numeric value within a known rage, typically part of a bar chart 123 123 Progress = displays a bar that depicts a numeric value within a specified range 123 123

25. Background Images Use CSS whenever possible for background images body{background-image: url(pic.jpg);} background-repeat (repeat-y, repeat-x, no-repeat) background-position (left, top, center, bottom, right) background-attachment (fixed, scroll) = configure whether the background image remains fixed in place or scrolls along with the page

26. Image Maps Create “hotspots” on images that are links Certainly not something you want to code by hand. Use GIMP, Fireworks, Coffee Cup HTML Editor

27. Favorites Icon favicon.ico Either 16x16 or 32x32 pixels favicongenerator.com, favicon.cc, freefavicon.com For IE compatibility: For IE compatibility:

28. CSS3 Visual Effects background-clip (content-box, padding-box, border- box) background-origin (content-box, padding-box, border- box) background-size (%w%h, px w px h, auto, contain, cover)

29. Multiple Background Images Progressive Enhancement In CSS, configure a standard background-image property Continue by adding background: url(….); within body CSS

30. CSS3 Rounded Corners border-radius property border-bottom-left-radiusborder-top-left-radiusborder-bottom-right-radiusborder-top-right-radius

31. Shadow Properties CSS3 box-shadow property CSS3 text-shadow property CSS3 opacity property Gradients (filter and linear)