CSS Color CSS Color & Text& Text

Cascading Style SheetsCascading Style Sheets

Advantages of CSSAdvantages of CSS

Typography and page layout can be better Typography and page layout can be better controlledcontrolled

Style is separate from structureStyle is separate from structure

Documents are potentially smallerDocuments are potentially smaller

Site maintenance is easierSite maintenance is easier

Configuring CSSConfiguring CSS

Commenting CSS = /*comment goes here*/Commenting CSS = /*comment goes here*/

Inline Styles Inline Styles (coded in body, apply to one element only)(coded in body, apply to one element only)

Embedded Styles Embedded Styles (coded in head, apply to entire document)(coded in head, apply to entire document)

External Styles External Styles (coded in separate .css file, can be applied to (coded in separate .css file, can be applied to multiple documents)multiple documents)

Imported Styles Imported Styles (similar to external, external can be imported (similar to external, external can be imported using @import directive)using @import directive)

CSS Selectors and CSS Selectors and DeclarationsDeclarations

CSS Style Rule SelectorCSS Style Rule Selector

Can be an HTML element, a class name, Can be an HTML element, a class name, or an id nameor an id name

CSS Style Rule DeclarationCSS Style Rule Declaration

Indicates the CSS property you are Indicates the CSS property you are settingsetting

body{color:blue;}body{color:blue;}

Selector{Declaration:Value;}Selector{Declaration:Value;}

A Few CSS PropertiesA Few CSS Properties

background-color, colorbackground-color, color

font-family, font-size, font-style, font-weightfont-family, font-size, font-style, font-weight

line-heightline-height

margin, margin-left, margin-rightmargin, margin-left, margin-right

text-align, text-decorationtext-align, text-decoration

widthwidth

Color Values (Hex and Color Values (Hex and Name)Name)

Hexadecimal Number SystemHexadecimal Number System

Base 16Base 16

0-9, A-F (must begin with #)0-9, A-F (must begin with #)

#FFFFFF (white), #000000 (black)#FFFFFF (white), #000000 (black)

CSS Color SyntaxCSS Color Syntax

p{color:red;} = p{color:#FF0000;} = p{color:#F00;} = p{color:red;} = p{color:#FF0000;} = p{color:#F00;} = p{color:rgb(255,0,0);}p{color:rgb(255,0,0);}

http://www.w3schools.com/cssref/css_colornames.asp

Inline CSS with StyleInline CSS with Style

<h1 style=“color:#cc0000”>This is displayed <h1 style=“color:#cc0000”>This is displayed as a red heading</h1>as a red heading</h1>

<h1 style=“color:#cc0000; background-<h1 style=“color:#cc0000; background-color:#cccccc”>This is displayed as a red color:#cccccc”>This is displayed as a red heading on a gray background</h1>heading on a gray background</h1>

Embedded CSS With StyleEmbedded CSS With Style

Embedded styles are placed within a <style> Embedded styles are placed within a <style> element located in the head section of a web element located in the head section of a web pagepage

XHTML requires <style type=“text/css”>XHTML requires <style type=“text/css”>

HTML5 requires <style>HTML5 requires <style>

<style><style>body{background-color:#CCFFFF; color:#000033;}body{background-color:#CCFFFF; color:#000033;}

</style></style>

Configuring Text with CSSConfiguring Text with CSS

Font-Family CategoryFont-Family Category

serif, sans-serif, monospace, cursive, fantasyserif, sans-serif, monospace, cursive, fantasy

p{font-family:Arial, Helvetica, sans-serif;}p{font-family:Arial, Helvetica, sans-serif;}

Not all computers have the same font installed. Not all computers have the same font installed. Or a list of web-safe fonts, visit Or a list of web-safe fonts, visit http://www.w3schools.com/cssref/css_websafe_fonts.asp

More CSS Font More CSS Font PropertiesProperties

font-sizefont-size

Text Value (xx-small, x-small, small, medium, Text Value (xx-small, x-small, small, medium, large, x-large, xx-large)large, x-large, xx-large)

Pixel Unit (px), Point Unit (pt), Em Unit (em), Pixel Unit (px), Point Unit (pt), Em Unit (em), Percentage Value (%)Percentage Value (%)

font-weight, font-style, line-height, text-align, font-weight, font-style, line-height, text-align, text-indent, text-decorationtext-indent, text-decoration

Configuring selectors (h1, h2, ul, p)Configuring selectors (h1, h2, ul, p)

CSS Class and id CSS Class and id SelectorsSelectors

Class Selector (used when you need to apply a Class Selector (used when you need to apply a CSS declaration to certain elements)CSS declaration to certain elements)

.feature{color:#FF0000;}.feature{color:#FF0000;}

<li class=“feature”>Usability Studies</li><li class=“feature”>Usability Studies</li>

<div class=“feature”>I’ll have the feature CSS properties</div><div class=“feature”>I’ll have the feature CSS properties</div>

id Selector (used when you want to apply a id Selector (used when you want to apply a CSS declaration to a single area)CSS declaration to a single area)

#footer{color:#333333; font-size:.75em; font-style:italic;}#footer{color:#333333; font-size:.75em; font-style:italic;}

<li id=“footer”>Usability Studies</li><li id=“footer”>Usability Studies</li>

<div id=“footer”>This is the footer</div><div id=“footer”>This is the footer</div>

Contextual SelectorsContextual Selectors

Used when you want to specify an element Used when you want to specify an element within the context of its container (parent) within the context of its container (parent) elementelement

aka: descendent selectorsaka: descendent selectors

To specify a green text color only for anchor To specify a green text color only for anchor tags located within the footer id declared tags located within the footer id declared earlier…earlier…#footer a {color:#00ff00;}#footer a {color:#00ff00;}

Span ElementSpan Element

<div> defines areas separate, with empty <div> defines areas separate, with empty space above and belowspace above and below

<span> defines a section that is not physically <span> defines a section that is not physically separated from other areasseparated from other areas

Use the <span> tag if you need to format an Use the <span> tag if you need to format an area that is contained within another, such as area that is contained within another, such as within <p>, <blockquote>, <li>, or <div> tag.within <p>, <blockquote>, <li>, or <div> tag.

External Style SheetsExternal Style Sheets

Best method (in my opinion)Best method (in my opinion)

Link to external style sheet from HEADLink to external style sheet from HEAD<link rel=“stylesheet” href=“stylesheet.css”><link rel=“stylesheet” href=“stylesheet.css”>

Centering with CSSCentering with CSS

Wrap the entire document in a <div> to Wrap the entire document in a <div> to encompass centering all contentencompass centering all content

<div id=“wrapper”></div><div id=“wrapper”></div>

#wrapper {width:700px; margin-left:auto; margin-right:auto;}#wrapper {width:700px; margin-left:auto; margin-right:auto;}

#wrapper {width:80%; margin-left:auto; margin-right:auto;}#wrapper {width:80%; margin-left:auto; margin-right:auto;}

The “Cascade”The “Cascade”

Browser DefaultsBrowser Defaults

External StylesExternal Styles

Embedded StylesEmbedded Styles

Inline StylesInline Styles

HTML AttributesHTML Attributes

CSS ValidationCSS Validation

Similar to HTML5 validationSimilar to HTML5 validation

http://jigsaw.w3.org/css-validator/

Horizontal Rule ElementHorizontal Rule Element

Visually separates areas of the pageVisually separates areas of the page

XHTML = <hr />XHTML = <hr />

HTML5 = <hr>HTML5 = <hr>

Use CSS to specify width, height, color, & styleUse CSS to specify width, height, color, & style

Border & Padding Border & Padding PropertyProperty

Border = configure the border around an Border = configure the border around an element (default width set to 0 to be invisible)element (default width set to 0 to be invisible)

border-width, border-color, border-styleborder-width, border-color, border-style

Padding = configures the empty space Padding = configures the empty space between the content of the element and the between the content of the element and the borderborder

padding-bottom, padding-left, padding-right, padding-bottom, padding-left, padding-right, padding-toppadding-top

Other CSS PropertiesOther CSS Properties

background-background-attachment, clip, attachment, clip,

image, origin, position, image, origin, position, repeat, sizerepeat, size

box-shadow, height, box-shadow, height, linear-gradient, min-linear-gradient, min-width, opacity, radial-width, opacity, radial-gradient, text-shadowgradient, text-shadow

border-border-bottom, bottom-left-bottom, bottom-left-radius, bottom-radius, bottom-

right-right- radius, color, radius, color, left, left, radius, right, radius, right, style, top, style, top, top-left-top-left-radius, top-radius, top- right-radius, right-radius, widthwidth

Types of GraphicsTypes of Graphics

GIF, JPEG, PNGGIF, JPEG, PNG

Image ElementImage Element

Image Element = src attribute + alt attributeImage Element = src attribute + alt attribute

<img src=“pic.jpg” height=“200” width=“500” alt=“My Picture”><img src=“pic.jpg” height=“200” width=“500” alt=“My Picture”>

Attributes:Attributes:

align, alt, border, height, hspace, id, name, align, alt, border, height, hspace, id, name, src, title, vspace, widthsrc, title, vspace, width

Image HyperlinksImage Hyperlinks

<a href=“url”><img src=“pic.jpg” alt=“Alt Text”></a><a href=“url”><img src=“pic.jpg” alt=“Alt Text”></a>

HTML5 Figure ElementHTML5 Figure Element

Figure includes image and caption (figcaption)Figure includes image and caption (figcaption)

Create image element, add alternate text, Create image element, add alternate text, set figcaption in CSSset figcaption in CSS

Open <figure> element, create image Open <figure> element, create image element with <img…>, use element with <img…>, use <figcaption>Caption Here</figcaption>, <figcaption>Caption Here</figcaption>, close </figure> elementclose </figure> element

HTML5 Meter & ProgressHTML5 Meter & Progress

Meter = displays a visual gauge of a numeric Meter = displays a visual gauge of a numeric value within a known rage, typically part of a value within a known rage, typically part of a bar chartbar chart

<meter value=“123” min=“0” max=“200”>123</meter><meter value=“123” min=“0” max=“200”>123</meter>

Progress = displays a bar that depicts a Progress = displays a bar that depicts a numeric value within a specified rangenumeric value within a specified range

<progress value=“123” max=“200”>123</progress><progress value=“123” max=“200”>123</progress>

Background ImagesBackground Images

Use CSS whenever possible for background imagesUse CSS whenever possible for background images

body{background-image: url(pic.jpg);}body{background-image: url(pic.jpg);}

background-repeat (repeat-y, repeat-x, no-repeat)background-repeat (repeat-y, repeat-x, no-repeat)

background-position (left, top, center, bottom, right)background-position (left, top, center, bottom, right)

background-attachment (fixed, scroll) = configure background-attachment (fixed, scroll) = configure whether the background image remains fixed in whether the background image remains fixed in place or scrolls along with the pageplace or scrolls along with the page

Image MapsImage Maps

Create “hotspots” on images that are linksCreate “hotspots” on images that are links

<map name=“boat” id=“boat”><map name=“boat” id=“boat”><area href=“http://someurl.com” shape=“rect” <area href=“http://someurl.com” shape=“rect”

coords=“24, 188, 339, 283” coords=“24, 188, 339, 283” alt=“Alt Text”>alt=“Alt Text”></map></map><img src=“pic.jpg” usemap=“#boat” alt=“Alt Text” width=“416” <img src=“pic.jpg” usemap=“#boat” alt=“Alt Text” width=“416” height=“350”>height=“350”>

Certainly not something you want to code by Certainly not something you want to code by hand. Use GIMP, Fireworks, Coffee Cup HTML hand. Use GIMP, Fireworks, Coffee Cup HTML EditorEditor

Favorites IconFavorites Icon

favicon.icofavicon.ico

Either 16x16 or 32x32 pixelsEither 16x16 or 32x32 pixels

favicongenerator.com, favicon.cc, favicongenerator.com, favicon.cc, freefavicon.comfreefavicon.com

<link rel=“icon” href=“favicon.ico” type=“image/x-icon”><link rel=“icon” href=“favicon.ico” type=“image/x-icon”>

For IE compatibility:For IE compatibility:<link rel=“shortcut icon” href=“favicon.ico” type=“image/x-<link rel=“shortcut icon” href=“favicon.ico” type=“image/x-icon”>icon”>

CSS3 Visual EffectsCSS3 Visual Effects

background-clip (content-box, padding-box, background-clip (content-box, padding-box, border-box)border-box)

background-origin (content-box, padding-box, background-origin (content-box, padding-box, border-box)border-box)

background-size (%w%h, px w px h, auto, background-size (%w%h, px w px h, auto, contain, cover)contain, cover)

Multiple Background Multiple Background ImagesImages

Progressive EnhancementProgressive Enhancement

In CSS, configure a standard background-In CSS, configure a standard background-image propertyimage property

Continue by adding background: url(….); within Continue by adding background: url(….); within body CSSbody CSS

CSS3 Rounded CornersCSS3 Rounded Corners

border-radius propertyborder-radius property

border-bottom-left-radiusborder-bottom-left-radius

border-top-left-radiusborder-top-left-radius

border-bottom-right-radiusborder-bottom-right-radius

border-top-right-radiusborder-top-right-radius

Shadow PropertiesShadow Properties

CSS3 box-shadow propertyCSS3 box-shadow property

CSS3 text-shadow propertyCSS3 text-shadow property

CSS3 opacity propertyCSS3 opacity property

Gradients (filter and linear)Gradients (filter and linear)