CSS Color & Text Cascading Style Sheets

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

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 directive)

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;}

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

Color Values (Hex and Name) Hexadecimal Number System Base , A-F (must begin with #) #FFFFFF (white), # (black) CSS Color Syntax p{color:red;} = p{color:#FF0000;} = p{color:#F00;} = p{color:rgb(255,0,0);}

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

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;}

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

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)

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

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;}

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.

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

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;}

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

CSS Validation Similar to HTML5 validation

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

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

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

Types of Graphics GIF, JPEG, PNG

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

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

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

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

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

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

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)

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

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

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